Add primitive tooltip

plausible · Nov 5, 2024 · 7fe1c50 · 7fe1c50
1 parent a4de6dd
commit 7fe1c50
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 44 deletions.
diff --git a/assets/js/dashboard/nav-menu/filter-pills-list.tsx b/assets/js/dashboard/nav-menu/filter-pills-list.tsx
@@ -37,7 +37,7 @@ export const FilterPillsList = React.forwardRef<
 >(({ className, style, slice, direction }, ref) => {
   const { query } = useQueryContext()
   const navigate = useAppNavigate()
-  
+
   const renderableFilters =
     slice?.type === 'no-render-outside'
       ? query.filters.slice(slice.start, slice.end)

diff --git a/assets/js/dashboard/nav-menu/filters-bar.tsx b/assets/js/dashboard/nav-menu/filters-bar.tsx
@@ -257,5 +257,7 @@ export const ClearAction = () => (
 )
 
 const VerticalSeparator = () => {
-  return <div className="border-gray-300 border-1 border-l h-9"></div>
+  return (
+    <div className="border-gray-300 dark:border-gray-500 border-1 border-l h-9"></div>
+  )
 }
diff --git a/assets/js/dashboard/segments/segment-actions.tsx b/assets/js/dashboard/segments/segment-actions.tsx
@@ -163,15 +163,16 @@ export const SaveSegmentAction = ({ options }: { options: O[] }) => {
   )
 
   const option = options.find((o) => o.type === modal)
-
+  const buttonClass =
+    'whitespace-nowrap rounded font-medium text-sm leading-tight px-2 py-2 h-9 dark:text-gray-500 hover:text-indigo-700 dark:hover:text-indigo-500'
   return (
     <div className="flex">
       {options.map((o) => {
         if (o.type === 'create segment') {
           return (
             <button
               key={o.type}
-              className="whitespace-nowrap rounded font-medium text-sm leading-tight px-2 py-2 h-9 hover:text-indigo-700 dark:hover:text-indigo-500"
+              className={buttonClass}
               onClick={openCreateSegment}
             >
               {options.find((o) => o.type === 'update segment')
@@ -184,7 +185,7 @@ export const SaveSegmentAction = ({ options }: { options: O[] }) => {
           return (
             <button
               key={o.type}
-              className="whitespace-nowrap rounded font-medium text-sm leading-tight px-2 py-2 h-9 hover:text-indigo-700 dark:hover:text-indigo-500"
+              className={buttonClass}
               onClick={openUpdateSegment}
             >
               Update segment

diff --git a/assets/js/dashboard/segments/segment-modals.tsx b/assets/js/dashboard/segments/segment-modals.tsx
@@ -5,6 +5,9 @@ import ModalWithRouting from '../stats/modals/modal'
 import classNames from 'classnames'
 import { SavedSegment } from './segments'
 
+const buttonClass =
+  'h-12 text-md font-medium py-2 px-3 rounded border dark:border-gray-100 dark:text-gray-100'
+
 export const CreateSegmentModal = ({
   segment,
   close,
@@ -66,17 +69,16 @@ export const CreateSegmentModal = ({
         </span>
       </div>
       <div className="mt-8 flex gap-x-2 items-center justify-end">
-        <button
-          className="h-12 text-md font-medium py-2 px-3 rounded border"
-          onClick={close}
-        >
+        <button className={buttonClass} onClick={close}>
           Cancel
         </button>
         <button
-          className="h-12 text-md font-medium py-2 px-3 rounded border"
+          className={buttonClass}
           onClick={() => {
             const trimmedName = name.trim()
-            const saveableName = trimmedName.length ? trimmedName : namePlaceholder
+            const saveableName = trimmedName.length
+              ? trimmedName
+              : namePlaceholder
             onSave({ name: saveableName, personal })
           }}
         >
@@ -145,17 +147,16 @@ export const UpdateSegmentModal = ({
         </span>
       </div>
       <div className="mt-8 flex gap-x-2 items-center justify-end">
-        <button
-          className="h-12 text-md font-medium py-2 px-3 rounded border"
-          onClick={close}
-        >
+        <button className={buttonClass} onClick={close}>
           Cancel
         </button>
         <button
-          className="h-12 text-md font-medium py-2 px-3 rounded border"
+          className={buttonClass}
           onClick={() => {
             const trimmedName = name.trim()
-            const saveableName = trimmedName.length ? trimmedName : namePlaceholder
+            const saveableName = trimmedName.length
+              ? trimmedName
+              : namePlaceholder
             onSave({ id: segment.id, name: saveableName, personal })
           }}
         >

diff --git a/assets/js/dashboard/segments/segments-dropdown.tsx b/assets/js/dashboard/segments/segments-dropdown.tsx
@@ -24,6 +24,8 @@ import {
 import { cleanLabels } from '../util/filters'
 import { useAppNavigate } from '../navigation/use-app-navigate'
 import classNames from 'classnames'
+import { Tooltip } from '../util/tooltip'
+import { formatDayShort, parseUTCDate } from '../util/date'
 
 export const SegmentsList = ({ closeList }: { closeList: () => void }) => {
   const { query } = useQueryContext()
@@ -44,7 +46,11 @@ export const SegmentsList = ({ closeList }: { closeList: () => void }) => {
       ).then(
         (res) =>
           res.json() as Promise<
-            { name: string; id: number; personal: boolean }[]
+            (SavedSegment & {
+              ownerId: number
+              inserted_at: string
+              updated_at: string
+            })[]
           >
       )
       return response
@@ -58,12 +64,24 @@ export const SegmentsList = ({ closeList }: { closeList: () => void }) => {
     !!data?.length && (
       <DropdownLinkGroup>
         {data.map((s) => (
-          <SegmentLink
+          <Tooltip
             key={s.id}
-            {...s}
-            appliedSegmentIds={appliedSegmentIds}
-            closeList={closeList}
-          />
+            info={
+              <div>
+                <div>{`${s.personal ? 'Personal' : 'Shared'} segment`}</div>
+                <div className="font-normal text-xs">{`Created at ${formatDayShort(parseUTCDate(s.inserted_at))}`}</div>
+                {s.updated_at !== s.inserted_at && (
+                  <div className="font-normal text-xs">{`Last updated at ${formatDayShort(parseUTCDate(s.updated_at))}`}</div>
+                )}
+              </div>
+            }
+          >
+            <SegmentLink
+              {...s}
+              appliedSegmentIds={appliedSegmentIds}
+              closeList={closeList}
+            />
+          </Tooltip>
         ))}
       </DropdownLinkGroup>
     )
@@ -153,7 +171,9 @@ const SegmentLink = ({
       key={id}
       active={appliedSegmentIds.includes(id)}
       onMouseEnter={prefetchSegment}
-      navigateOptions={{state: {editingSegment: null} as EditingSegmentState}}
+      navigateOptions={{
+        state: { editingSegment: null } as EditingSegmentState
+      }}
       search={(search) => {
         const otherFilters = query.filters.filter((f) => !isSegmentFilter(f))
         const updatedSegmentIds = appliedSegmentIds.includes(id)
@@ -176,18 +196,9 @@ const SegmentLink = ({
         return {
           ...search,
           filters: updatedFilters,
-          labels: cleanLabels(
-            updatedFilters,
-            query.labels,
-            'segment',
-            {[formatSegmentIdAsLabelKey(id)]: name}
-            // Object.fromEntries(
-            //   updatedSegmentIds.map((id) => [
-            //     formatSegmentIdAsLabelKey(id),
-            //     data.find() ?? 'Unknown segment'
-            //   ])
-            // )
-          ),
+          labels: cleanLabels(updatedFilters, query.labels, 'segment', {
+            [formatSegmentIdAsLabelKey(id)]: name
+          })
         }
       }}
       actions={

diff --git a/assets/js/dashboard/stats/modals/filter-modal-row.js b/assets/js/dashboard/stats/modals/filter-modal-row.js
@@ -15,7 +15,10 @@ import {
 import { apiPath } from '../../util/url'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
-import { formatSegmentIdAsLabelKey, isSegmentFilter } from '../../segments/segments'
+import {
+  formatSegmentIdAsLabelKey,
+  isSegmentFilter
+} from '../../segments/segments'
 
 export default function FilterModalRow({ filter, labels, onUpdate }) {
   const { query } = useQueryContext()

diff --git a/assets/js/dashboard/util/filters.js b/assets/js/dashboard/util/filters.js
@@ -3,7 +3,10 @@
 import React, { useMemo } from 'react'
 import * as api from '../api'
 import { useQueryContext } from '../query-context'
-import { formatSegmentIdAsLabelKey, isSegmentFilter } from '../segments/segments'
+import {
+  formatSegmentIdAsLabelKey,
+  isSegmentFilter
+} from '../segments/segments'
 
 export const FILTER_MODAL_TO_FILTER_GROUP = {
   page: ['page', 'entry_page', 'exit_page'],
@@ -255,22 +258,25 @@ function remapFilterKey(filterKey) {
 }
 
 function remapApiFilterKey(apiFilterKey) {
-  const isNoPrefixKey = NO_PREFIX_KEYS.has(apiFilterKey);
+  const isNoPrefixKey = NO_PREFIX_KEYS.has(apiFilterKey)
 
   if (isNoPrefixKey) {
-    return apiFilterKey;
+    return apiFilterKey
   }
 
   const isEventKey = apiFilterKey.startsWith(EVENT_PREFIX)
   const isVisitKey = apiFilterKey.startsWith(VISIT_PREFIX)
 
-  if (isEventKey) {return apiFilterKey.substring(EVENT_PREFIX.length)}
-  if (isVisitKey) {return apiFilterKey.substring(VISIT_PREFIX.length)}
+  if (isEventKey) {
+    return apiFilterKey.substring(EVENT_PREFIX.length)
+  }
+  if (isVisitKey) {
+    return apiFilterKey.substring(VISIT_PREFIX.length)
+  }
 
   return apiFilterKey // maybe throw?
 }
 
-
 export function remapToApiFilters(filters) {
   return filters.map(([operation, filterKey, clauses]) => {
     return [operation, remapFilterKey(filterKey), clauses]
@@ -283,7 +289,6 @@ export function remapFromApiFilters(apiFilters) {
   })
 }
 
-
 export function serializeApiFilters(filters) {
   return JSON.stringify(remapToApiFilters(filters))
 }