implemented new tooltip

kloudlite · Jul 26, 2024 · 92c66b6 · 92c66b6
1 parent 42afb9c
commit 92c66b6
Show file tree

Hide file tree

Showing 21 changed files with 434 additions and 235 deletions.
diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
@@ -34,6 +34,7 @@ import { ChildrenProps } from '~/components/types';
 import Page404 from '~/components/organisms/page-404';
 import { getClientEnv, getServerEnv } from '~/root/lib/configs/base-url.cjs';
 import { useDataFromMatches } from '../client/hooks/use-custom-matches';
+import { TooltipContainer } from '~/components/atoms/tooltipV2';
 
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesUrl },
@@ -119,8 +120,8 @@ export function ErrorBoundary() {
               ? error.stack
               : JSON.stringify(error.stack, null, 2)
             : typeof error.stack === 'string'
-            ? error.stack
-            : JSON.stringify(error.stack, null, 2)}
+              ? error.stack
+              : JSON.stringify(error.stack, null, 2)}
         </code>
       </ErrorWrapper>
     );
@@ -261,6 +262,7 @@ const Root = ({
               </Tooltip.Provider>
             </Wrapper>
           )}
+          <TooltipContainer />
         </ProgressContainer>
         <Scripts />
       </body>

diff --git a/lib/utils/common.tsx b/lib/utils/common.tsx
@@ -2,7 +2,7 @@ import { toast } from '~/components/molecule/toast';
 import logger from '../client/helpers/log';
 
 export const handleError = (
-  e: unknown
+  e: unknown,
 ): {
   error?: {
     message: string;
@@ -41,7 +41,11 @@ export const Truncate = ({
   length: number;
 }) => {
   const newStr = str?.length > length ? `${str.substring(0, length)}...` : str;
-  return <span title={str}>{newStr}</span>;
+  return (
+    <span title={str} className="truncate">
+      {newStr}
+    </span>
+  );
 };
 
 export function sleep(time: number) {

diff --git a/package.json b/package.json
@@ -92,6 +92,7 @@
 		"react-remove-scroll": "^2.5.7",
 		"react-router-dom": "^6.21.1",
 		"react-toastify": "^9.1.3",
+		"react-tooltip": "^5.27.0",
 		"react-viewport-list": "^7.1.2",
 		"reconnecting-websocket": "^4.4.0",
 		"remix": "^1.19.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/apps/console/components/common-console-components.tsx b/src/apps/console/components/common-console-components.tsx
@@ -4,7 +4,8 @@ import { cn } from '~/components/utils';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { toast } from '~/components/molecule/toast';
 import { Copy, Check } from '~/console/components/icons';
-import { ListItem } from './console-list-components';
+import { Truncate } from '~/root/lib/utils/common';
+import TooltipV2 from '~/components/atoms/tooltipV2';
 
 interface IDeleteContainer {
   title: ReactNode;
@@ -47,7 +48,7 @@ export const Box = ({ children, title, className }: IBox) => {
     <div
       className={cn(
         'rounded border border-border-default bg-surface-basic-default shadow-button p-3xl flex flex-col gap-3xl ',
-        className
+        className,
       )}
     >
       <div className="text-text-strong headingLg">{title}</div>
@@ -59,13 +60,11 @@ export const Box = ({ children, title, className }: IBox) => {
 export const CopyContentToClipboard = ({
   content,
   toastMessage,
-  label,
-  toolTip = false,
+  truncateLength = 20,
 }: {
   content: string;
   toastMessage: string;
-  label?: ReactNode;
-  toolTip?: boolean;
+  truncateLength?: number;
 }) => {
   const iconSize = 16;
   const { copy } = useClipboard({});
@@ -83,7 +82,7 @@ export const CopyContentToClipboard = ({
 
   return (
     <div
-      className="flex flex-row items-center truncate flex-1 cursor-pointer group"
+      className="flex flex-row items-center flex-1 cursor-pointer group"
       onClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -92,15 +91,15 @@ export const CopyContentToClipboard = ({
         }
       }}
     >
-      <ListItem
-        className="flex-1"
-        noTooltip={!toolTip}
-        data={
-          <span className="cursor-pointer items-center gap-lg hover:text-text-default group-hover:text-text-default group-[.is-data]:truncate">
-            {label || content}
-          </span>
-        }
-      />
+      <span className="bodyMd-medium text-text-strong">
+        {content.length >= truncateLength ? (
+          <TooltipV2 content={content}>
+            <Truncate length={truncateLength}>{content}</Truncate>
+          </TooltipV2>
+        ) : (
+          content
+        )}
+      </span>
       <div className="shrink-0 ml-md">
         {copied ? (
           <span>

diff --git a/src/apps/console/components/console-list-components.tsx b/src/apps/console/components/console-list-components.tsx
@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 import Tooltip from '~/components/atoms/tooltip';
+import TooltipV2 from '~/components/atoms/tooltipV2';
 import { cn } from '~/components/utils';
+import { Truncate } from '~/root/lib/utils/common';
 
 interface IBase {
   className?: string;
@@ -126,6 +128,88 @@ const ListItem = ({
   );
 };
 
+const ListItemV2 = ({
+  data,
+  subtitle,
+  className = '',
+  action,
+  noTooltip = false,
+  truncateLength = 20,
+  pre,
+  subtitleClass,
+  titleClass,
+}: {
+  pre?: ReactNode;
+  data?: string;
+  subtitle?: string;
+  noTooltip?: boolean;
+  truncateLength?: number;
+  titleClass?: string;
+  subtitleClass?: string;
+} & IBase) => {
+  return (
+    <div className={cn(BaseStyle, className)}>
+      {pre && <div className="flex-shrink-0">{pre}</div>}
+      <div className="flex flex-col flex-1">
+        {noTooltip ? (
+          <div className="flex flex-col gap-sm max-w-full w-fit pulsable">
+            {data && (
+              <div
+                className={cn(
+                  'flex-1 bodyMd-medium text-text-strong pulsable',
+                  titleClass,
+                )}
+              >
+                <Truncate length={truncateLength}>{data}</Truncate>
+              </div>
+            )}
+            {subtitle && (
+              <div
+                className={cn('pulsable bodyMd text-text-soft', subtitleClass)}
+              >
+                <Truncate length={truncateLength}>{subtitle}</Truncate>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex flex-col flex-1">
+            {data && (
+              <div
+                className={cn(
+                  'flex-1 bodyMd-medium text-text-strong pulsable whitespace-normal',
+                  titleClass,
+                )}
+              >
+                {data.length >= truncateLength ? (
+                  <TooltipV2 content={data}>
+                    <Truncate length={truncateLength}>{data}</Truncate>
+                  </TooltipV2>
+                ) : (
+                  <Truncate length={truncateLength}>{data}</Truncate>
+                )}
+              </div>
+            )}
+            {subtitle && (
+              <div
+                className={cn('pulsable bodyMd text-text-soft', subtitleClass)}
+              >
+                {subtitle.length >= truncateLength ? (
+                  <TooltipV2 content={subtitle}>
+                    <Truncate length={truncateLength}>{subtitle}</Truncate>
+                  </TooltipV2>
+                ) : (
+                  <Truncate length={truncateLength}>{subtitle}</Truncate>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+      {action}
+    </div>
+  );
+};
+
 const ListTitle = ({
   className,
   action,
@@ -184,14 +268,85 @@ const ListTitle = ({
   );
 };
 
+const ListTitleV2 = ({
+  className,
+  action,
+  title,
+  avatar,
+  subtitle,
+  truncateLength = 20,
+  titleClass,
+  subtitleClass,
+}: {
+  className?: string;
+  action?: ReactNode;
+  title?: string;
+  subtitle?: string;
+  avatar?: ReactNode;
+  truncateLength?: number;
+  titleClass?: string;
+  subtitleClass?: string;
+}) => {
+  return (
+    <div className={cn(BaseStyle, className)}>
+      <div className="flex flex-row items-center gap-xl flex-1 truncate">
+        {avatar}
+        <div className="flex flex-col gap-sm flex-1">
+          {title && (
+            <div className="bodyMd-semibold text-text-default pulsable">
+              <span className={cn('w-fit', titleClass)}>
+                {title.length >= truncateLength ? (
+                  <TooltipV2 content={title}>
+                    <Truncate length={truncateLength}>{title}</Truncate>
+                  </TooltipV2>
+                ) : (
+                  <Truncate length={truncateLength}>{title}</Truncate>
+                )}
+              </span>
+            </div>
+          )}
+
+          {subtitle && (
+            <div
+              className={cn('bodySm text-text-soft pulsable', subtitleClass)}
+            >
+              {subtitle.length >= truncateLength ? (
+                <TooltipV2 content={subtitle}>
+                  <Truncate length={truncateLength}>{subtitle}</Truncate>
+                </TooltipV2>
+              ) : (
+                <Truncate length={truncateLength}>{subtitle}</Truncate>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      {action}
+    </div>
+  );
+};
 const listFlex = ({ key }: { key: string }) => ({
   key,
   className: 'flex-1',
   render: () => <div />,
 });
 
 const listClass = {
-  title: 'w-[180px] min-w-[180px] max-w-[180px] mr-2xl',
-  author: 'w-[180px] min-w-[180px] max-w-[180px]',
+  title: 'w-[80px] flex flex-1',
+  author: 'w-[180px]',
+  updated: 'w-[180px]',
+  status: 'flex-1 min-w-[30px] w-fit',
+  action: 'w-[24px]',
+  flex: 'flex-1',
+  item: 'w-[146px]',
+};
+export {
+  ListBody,
+  ListItem,
+  ListTitle,
+  ListTitleV2,
+  ListItemV2,
+  ListSecondary,
+  listFlex,
+  listClass,
 };
-export { ListBody, ListItem, ListTitle, ListSecondary, listFlex, listClass };
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx
@@ -14,6 +14,7 @@ import {
   Github__Com___Kloudlite___Operator___Pkg___Operator__CheckMetaIn as ICheckList,
 } from '~/root/src/generated/gql/server';
 import { Badge } from '~/components/atoms/badge';
+import TooltipV2 from '~/components/atoms/tooltipV2';
 
 interface IStatusMetaV2 {
   recordVersion: number;
@@ -216,7 +217,7 @@ const parseOverallState = (item: IStatusMetaV2): OverallStates => {
     {
       value: 'idle',
       progress: 'init',
-    }
+    },
   );
 
   return (mainStatus?.value as OverallStates) || 'idle';
@@ -359,7 +360,7 @@ export const SyncStatusV2 = ({
         } & ICheckList)[],
         message: '',
         progress: 'init',
-      }
+      },
     );
 
     return items?.items;
@@ -396,9 +397,10 @@ export const SyncStatusV2 = ({
 
   return (
     <div>
-      <Tooltip.Root
-        align="center"
-        className="!max-w-[300px]"
+      <TooltipV2
+        className="max-w-[300px]"
+        place="right"
+        offset={5}
         content={
           isByok ? (
             <div className="p-md flex flex-col gap-lg">
@@ -448,7 +450,7 @@ export const SyncStatusV2 = ({
             }).component
           }
         </div>
-      </Tooltip.Root>
+      </TooltipV2>
     </div>
   );
 };