Remove dependencies on @stackrox/ui-components (#883)

stackrox · Jul 7, 2023 · 2ffa9a4 · 2ffa9a4
1 parent 24ec220
commit 2ffa9a4
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 85 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -23,7 +23,6 @@
  },
  "dependencies": {
  "@patternfly/react-core": "^4.276.8",
- "@stackrox/ui-components": "^0.3.0",
  "axios": "^0.21.4",
  "formik": "^2.4.2",
  "history": "^5.0.1",

diff --git a/ui/src/app.tw.css b/ui/src/app.tw.css
@@ -1,8 +1,6 @@
 @import '~@stackrox/tailwind-config/light.theme.css';
 @import '~@stackrox/tailwind-config/dark.theme.css';
 
-@import '~@stackrox/ui-components/lib/ui-components.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/ui/src/components/Countdown.tsx b/ui/src/components/Countdown.tsx
@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import moment from 'moment';
 import { PlusCircle, MinusCircle } from 'react-feather';
-import { Tooltip, TooltipOverlay } from '@stackrox/ui-components';
 
 function calcDuration(targetDate: Date): moment.Duration {
  return moment.duration(moment(targetDate).diff(moment()));
@@ -91,13 +90,10 @@ export default function Countdown({ targetDate, className = '', onModify }: Prop
  const duration = calcDuration(targetDate);
 
  return (
- <Tooltip
- placement="left"
- content={<TooltipOverlay>{`Expiration: ${moment(targetDate).format('LLL')}`}</TooltipOverlay>}
- >
- <div className={className}>
- <FormatDuration duration={duration} onModify={onModify} />
- </div>
- </Tooltip>
+ <div className={className}>
+ {`Expiration: ${moment(targetDate).format('LLL')}`}
+ <span>&nbsp;-&nbsp;</span>
+ <FormatDuration duration={duration} onModify={onModify} />
+ </div>
  );
 }
diff --git a/ui/src/containers/AppHeader/Version.tsx b/ui/src/containers/AppHeader/Version.tsx
@@ -1,9 +1,7 @@
 import React, { ReactElement } from 'react';
 import { AxiosPromise } from 'axios';
-import moment from 'moment';
 import { Info, AlertCircle } from 'react-feather';
 import { ClipLoader } from 'react-spinners';
-import { Tooltip, TooltipOverlay } from '@stackrox/ui-components';
 
 import { VersionServiceApi, V1Version } from 'generated/client';
 import configuration from 'client/configuration';
@@ -13,71 +11,29 @@ const versionService = new VersionServiceApi(configuration);
 
 const fetchVersion = (): AxiosPromise<V1Version> => versionService.getVersion();
 
-function TooltipContentRow(props: { label: string; value?: string }): ReactElement {
- const { label, value = 'unknown' } = props;
+function VersionContent(props: { icon: ReactElement; text: string }): ReactElement {
+ const { icon, text } = props;
  return (
- <div>
- <span className="font-700">{label}: </span>
- <span>{value}</span>
+ <div className="flex items-center">
+ {icon}
+ <span className="ml-1 text-2xs whitespace-nowrap">{text}</span>
  </div>
  );
 }
 
-function TooltipContent(props: { data: V1Version }): ReactElement {
- const { data } = props;
- return (
- <TooltipOverlay extraClassName="text-left">
- <TooltipContentRow label="Build Date" value={moment(data.BuildDate).format('LLL')} />
- <TooltipContentRow label="Git Commit" value={data.GitCommit} />
- <TooltipContentRow label="Workflow" value={data.Workflow} />
- <TooltipContentRow label="Go Version" value={data.GoVersion} />
- <TooltipContentRow label="Platform" value={data.Platform} />
- </TooltipOverlay>
- );
-}
-
-function VersionContent(props: {
- tooltip: ReactElement;
- icon: ReactElement;
- text: string;
-}): ReactElement {
- const { tooltip, icon, text } = props;
- return (
- <Tooltip content={tooltip}>
- <div className="flex items-center">
- {icon}
- <span className="ml-1 text-2xs whitespace-nowrap">{text}</span>
- </div>
- </Tooltip>
- );
-}
-
 export default function Version(): ReactElement {
  const { loading, error, data } = useApiQuery(fetchVersion);
 
  if (loading)
  return (
  <VersionContent
- tooltip={<TooltipOverlay>Loading server version data...</TooltipOverlay>}
  icon={<ClipLoader loading size={16} color="currentColor" />}
  text="Loading..."
  />
  );
 
  if (error || !data?.Version)
- return (
- <VersionContent
- tooltip={<TooltipOverlay>{error?.message || 'Unexpected server response'}</TooltipOverlay>}
- icon={<AlertCircle size={16} />}
- text="Error occurred"
- />
- );
+ return <VersionContent icon={<AlertCircle size={16} />} text="Error occurred" />;
 
- return (
- <VersionContent
- tooltip={<TooltipContent data={data} />}
- icon={<Info size={16} />}
- text={data.Version}
- />
- );
+ return <VersionContent icon={<Info size={16} />} text={data.Version} />;
 }
diff --git a/ui/src/containers/ClusterInfoPage/ClusterConnect.tsx b/ui/src/containers/ClusterInfoPage/ClusterConnect.tsx
@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
 import { useClipboard } from 'use-clipboard-copy';
-import { Tooltip, TooltipOverlay } from '@stackrox/ui-components';
 import { Clipboard } from 'react-feather';
 
 type Props = {
@@ -22,16 +21,15 @@ export default function ClusterConnect({ connect }: Props): ReactElement {
  Connect: <span className="ml-2 font-mono">{stripComments}</span>{' '}
  <button
  type="button"
+ title="Copy to clipboard"
  aria-label="Copy to clipboard"
  onClick={() => clipboard.copy(stripComments)}
  className="ml-2"
  >
- <Tooltip content={<TooltipOverlay>Copy to clipboard</TooltipOverlay>}>
- <div className="flex items-center">
- <Clipboard size={16} />
- {clipboard.copied && <span className="ml-2 text-success-700">Copied!</span>}
- </div>
- </Tooltip>
+ <div className="flex items-center">
+ <Clipboard size={16} />
+ {clipboard.copied && <span className="ml-2 text-success-700">Copied!</span>}
+ </div>
  </button>
  </span>
  );

diff --git a/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx b/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx
@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import { AxiosPromise } from 'axios';
 import { useClipboard } from 'use-clipboard-copy';
-import { Tooltip, TooltipOverlay } from '@stackrox/ui-components';
 
 import { V1TokenResponse, UserServiceApi } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
@@ -30,14 +29,10 @@ export default function UserServiceAccountToken(): ReactElement {
 
  if (error || !data?.Token) {
  return (
- <Tooltip content={<TooltipOverlay>{error?.message || 'Unknown error'}</TooltipOverlay>}>
- <div className="inline-flex items-center">
- <AlertCircle size={16} />
- <span className="ml-2">
- Unexpected error occurred while loading service account token
- </span>
- </div>
- </Tooltip>
+ <div className="inline-flex items-center">
+ <AlertCircle size={16} />
+ <span className="ml-2">Unexpected error occurred while loading service account token</span>
+ </div>
  );
  }
 
@@ -67,16 +62,15 @@ export default function UserServiceAccountToken(): ReactElement {
  <p className="text-xl">Run the following in a terminal to authenticate infractl for use:</p>
  <button
  type="button"
+ title="Copy to clipboard"
  aria-label="Copy to clipboard"
  onClick={clipboard.copy}
  className="ml-2"
  >
- <Tooltip content={<TooltipOverlay>Copy to clipboard</TooltipOverlay>}>
- <div className="flex items-center">
- <Clipboard size={16} />
- {clipboard.copied && <span className="ml-2 text-success-700">Copied!</span>}
- </div>
- </Tooltip>
+ <div className="flex items-center">
+ <Clipboard size={16} />
+ {clipboard.copied && <span className="ml-2 text-success-700">Copied!</span>}
+ </div>
  </button>
  </div>
  <textarea