@openshift-assisted/ui-lib 2.14.8-cim → 2.14.9-cim

package/lib/common/components/hosts/AITable.tsx

@@ -80,6 +80,7 @@ export type AITableProps<R> = ReturnType<typeof usePagination> & {
   actionResolver?: ActionsResolver<R>;
   canSelectAll?: boolean;
   variant?: TableProps['variant'];
+  alreadySorted?: boolean;
 };
 
 // eslint-disable-next-line
@@ -103,8 +104,21 @@ const AITable = <R extends any>({
   perPageOptions,
   canSelectAll,
   variant,
+  alreadySorted,
 }: WithTestID & AITableProps<R>) => {
   const itemIDs = React.useMemo(() => data.map(getDataId), [data, getDataId]);
+  const [openRows, setOpenRows] = React.useState<OpenRows>({});
+
+  const sortByRef = React.useRef<ISortBy>();
+  const [sortBy, setSortBy] = React.useState<ISortBy>({
+    index: onSelect ? 1 : 0,
+    direction: SortByDirection.asc,
+  });
+
+  const dataRef = React.useRef(data);
+  if (dataRef.current !== data) {
+    dataRef.current = data;
+  }
 
   React.useEffect(() => {
     if (selectedIDs && setSelectedIDs) {
@@ -121,16 +135,29 @@ const AITable = <R extends any>({
     }
   }, [data, setSelectedIDs, selectedIDs, getDataId]);
 
-  const [openRows, setOpenRows] = React.useState<OpenRows>({});
-  const [sortBy, setSortBy] = React.useState<ISortBy>({
-    index: onSelect ? 1 : 0,
-    direction: SortByDirection.asc,
-  });
+  React.useEffect(() => {
+    if (alreadySorted) {
+      sortByRef.current = sortBy;
+      setSortBy({
+        index: -1,
+        direction: SortByDirection.asc,
+      });
+    } else {
+      if (sortBy.index === -1 && sortByRef.current) {
+        setSortBy(sortByRef.current);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [alreadySorted]);
+
+  React.useEffect(() => {
+    if (!alreadySorted) {
+      sortByRef.current = sortBy;
+    } else if (alreadySorted && sortBy.index !== -1) {
+      sortByRef.current = sortBy;
+    }
+  }, [sortBy, alreadySorted]);
 
-  const dataRef = React.useRef(data);
-  if (dataRef.current !== data) {
-    dataRef.current = data;
-  }
   const onSelectAll = React.useCallback(
     (isChecked: boolean) => {
       setSelectedIDs?.(isChecked ? dataRef.current.map(getDataId) : []);
@@ -169,33 +196,27 @@ const AITable = <R extends any>({
     return [newContent, columns];
   }, [canSelectAll, content, getDataId, onSelect, onSelectAll]);
 
-  const hostRows = React.useMemo(() => {
-    const rows = (data || [])
-      .map<IRow>((obj) => {
-        const id = getDataId(obj);
-        const cells = contentWithAdditions.filter((c) => !!c.cell).map((c) => c.cell?.(obj));
-        const isOpen = !!openRows[id];
-        return {
-          isOpen,
-          cells,
-          key: `${id}-master`,
-          id,
-          actions: actionResolver ? actionResolver(obj) : undefined,
-          nestedComponent: ExpandComponent ? <ExpandComponent obj={obj} /> : undefined,
-        };
-      })
-      .slice((page - 1) * perPage, page * perPage);
-    return rows;
-  }, [
-    data,
-    page,
-    perPage,
-    ExpandComponent,
-    getDataId,
-    contentWithAdditions,
-    openRows,
-    actionResolver,
-  ]);
+  const getRows = React.useCallback(
+    (data: R[]) =>
+      (data || [])
+        .map<IRow>((obj) => {
+          const id = getDataId(obj);
+          const cells = contentWithAdditions.filter((c) => !!c.cell).map((c) => c.cell?.(obj));
+          const isOpen = !!openRows[id];
+          return {
+            isOpen,
+            cells,
+            key: `${id}-master`,
+            id,
+            actions: actionResolver ? actionResolver(obj) : undefined,
+            nestedComponent: ExpandComponent ? <ExpandComponent obj={obj} /> : undefined,
+          };
+        })
+        .slice((page - 1) * perPage, page * perPage),
+    [page, perPage, getDataId, contentWithAdditions, openRows, actionResolver, ExpandComponent],
+  );
+
+  const hostRows = React.useMemo(() => getRows(data), [data, getRows]);
 
   const rows = React.useMemo(() => {
     if (hostRows.length) {
@@ -223,10 +244,13 @@ const AITable = <R extends any>({
   }, []);
 
   const sortedRows = React.useMemo(() => {
+    if (alreadySorted && sortBy.index === -1) {
+      return getRows(data);
+    }
     return rows.sort(
       rowSorter(sortBy, (row: IRow, index = 0) => row.cells?.[index] as string | HumanizedSortable),
     );
-  }, [rows, sortBy]);
+  }, [alreadySorted, sortBy, rows, getRows, data]);
 
   return (
     <>

package/lib/common/components/hosts/HostsTable.tsx

@@ -60,20 +60,32 @@ type HostsTableProps = ReturnType<typeof usePagination> &
     | 'variant'
   > & {
     hosts: Host[];
+    alreadySorted?: boolean;
     skipDisabled?: boolean;
     children: React.ReactNode;
   };
 
-const HostsTable = ({ hosts, skipDisabled, ...rest }: HostsTableProps & WithTestID) => {
-  const data = React.useMemo(
-    () =>
-      (hosts || [])
-        .filter((host) => !skipDisabled || host.status !== 'disabled')
-        .sort((a, b) => (a.createdAt && b.createdAt && a.createdAt < b.createdAt ? -1 : 1)),
-    [hosts, skipDisabled],
-  );
+const HostsTable = ({
+  hosts,
+  skipDisabled,
+  alreadySorted,
+  ...rest
+}: HostsTableProps & WithTestID) => {
+  const data = React.useMemo(() => {
+    const filteredHosts = (hosts || []).filter(
+      (host) => !skipDisabled || host.status !== 'disabled',
+    );
+
+    return alreadySorted
+      ? filteredHosts
+      : filteredHosts.sort((a, b) =>
+          a.createdAt && b.createdAt && a.createdAt < b.createdAt ? -1 : 1,
+        );
+  }, [hosts, skipDisabled, alreadySorted]);
 
-  return <AITable<Host> getDataId={getHostId} data={data} {...rest} />;
+  return (
+    <AITable<Host> getDataId={getHostId} data={data} alreadySorted={alreadySorted} {...rest} />
+  );
 };
 
 export default HostsTable;

package/lib/common/components/hosts/utils.ts

@@ -196,7 +196,7 @@ export const getInventory = (host: Host) => {
 
 export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefined) => {
   if (!hostnameFilter) {
-    return hosts;
+    return { hosts, sorted: false };
   }
   const hostsWithHostname = hosts.map((host) => {
     const { inventory: inventoryString = '' } = host;
@@ -209,12 +209,28 @@ export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefin
   });
 
   const fuse = new Fuse(hostsWithHostname, {
+    includeScore: true,
     ignoreLocation: true,
     threshold: 0.3,
     keys: ['hostname'],
   });
 
-  return fuse.search(hostnameFilter).map(({ item }) => item.host);
+  const filteredHosts = fuse.search(hostnameFilter);
+
+  const sortedHosts = filteredHosts
+    .sort((a, b) => (a.score || 0) - (b.score || 0))
+    .map(({ item }) => item.host);
+
+  const sorted =
+    filteredHosts.length > 1 &&
+    filteredHosts.some(
+      (result, index) => index > 0 && (result.score || 0) !== (filteredHosts[0].score || 0),
+    );
+
+  return {
+    hosts: sortedHosts,
+    sorted,
+  };
 };
 
 export const getFailingHostValidations = (validationsInfo: HostValidationsInfo) =>

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.14.8-cim",
-    "@openshift-assisted/types": "2.14.8-cim",
+    "@openshift-assisted/locales": "2.14.9-cim",
+    "@openshift-assisted/types": "2.14.9-cim",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "5.2.0",
     "@patternfly/react-code-editor": "5.2.0",
@@ -140,5 +140,5 @@
       ]
     }
   },
-  "version": "2.14.8-cim"
+  "version": "2.14.9-cim"
 }

package/build/@types/common/components/clusterConfiguration/OpenShiftVersionSelect.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { OpenshiftVersionOptionType } from '../../types';
-import { SelectFieldProps } from '../ui/formik/types';
-type OpenShiftVersionSelectProps = {
-    versions: OpenshiftVersionOptionType[];
-    onChange?: SelectFieldProps['onChange'];
-};
-declare const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps>;
-export default OpenShiftVersionSelect;
-//# sourceMappingURL=OpenShiftVersionSelect.d.ts.map

package/build/@types/common/components/clusterConfiguration/OpenShiftVersionSelect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpenShiftVersionSelect.d.ts","sourceRoot":"","sources":["../../../../../lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AA4CtD,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,0BAA0B,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACzC,CAAC;AACF,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAqBjE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/build/cjs/common/components/clusterConfiguration/OpenShiftVersionSelect.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
-const exclamation_triangle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon");
-const external_link_alt_icon_1 = require("@patternfly/react-icons/dist/js/icons/external-link-alt-icon");
-const config_1 = require("../../config");
-const ui_1 = require("../ui");
-const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
-const OpenShiftLifeCycleDatesLink = () => {
-    const { t } = (0, use_translation_wrapper_1.useTranslation)();
-    return (react_1.default.createElement("a", { href: config_1.OPENSHIFT_LIFE_CYCLE_DATES_LINK, target: "_blank", rel: "noopener noreferrer" },
-        t('ai:Learn more'),
-        " ",
-        react_1.default.createElement(external_link_alt_icon_1.ExternalLinkAltIcon, null)));
-};
-const getOpenshiftVersionHelperText = 
-// eslint-disable-next-line react/display-name
-(versions) => (selectedVersionValue) => {
-    const { t } = (0, use_translation_wrapper_1.useTranslation)();
-    if (!versions.length) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(ui_1.UiIcon, { size: "sm", status: "danger", icon: react_1.default.createElement(exclamation_circle_icon_1.ExclamationCircleIcon, null) }),
-            "\u00A0 ",
-            t('ai:No release image is available.')));
-    }
-    const selectedVersion = versions.find((version) => version.value === selectedVersionValue);
-    if (!selectedVersionValue || !selectedVersion) {
-        return null;
-    }
-    if (selectedVersion.supportLevel !== 'production' &&
-        selectedVersion.supportLevel !== 'maintenance') {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(ui_1.UiIcon, { size: "sm", status: "warning", icon: react_1.default.createElement(exclamation_triangle_icon_1.ExclamationTriangleIcon, null) }),
-            "\u00A0",
-            t('ai:Please note that this version is not production-ready.'),
-            "\u00A0",
-            react_1.default.createElement(OpenShiftLifeCycleDatesLink, null)));
-    }
-    return null;
-};
-const OpenShiftVersionSelect = ({ versions, onChange }) => {
-    const selectOptions = react_1.default.useMemo(() => versions.map((version) => ({
-        label: version.label,
-        value: version.value,
-    })), [versions]);
-    const { t } = (0, use_translation_wrapper_1.useTranslation)();
-    return (react_1.default.createElement(ui_1.SelectField, { label: t('ai:OpenShift version'), name: "openshiftVersion", options: selectOptions, getHelperText: getOpenshiftVersionHelperText(versions), isDisabled: versions.length === 0, isRequired: true, onChange: onChange }));
-};
-exports.default = OpenShiftVersionSelect;
-//# sourceMappingURL=OpenShiftVersionSelect.js.map

package/build/cjs/common/components/clusterConfiguration/OpenShiftVersionSelect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpenShiftVersionSelect.js","sourceRoot":"","sources":["../../../../../lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,2GAAsG;AACtG,+GAA0G;AAC1G,yGAAmG;AAEnG,yCAA+D;AAE/D,8BAA4C;AAC5C,iFAAqE;AAGrE,MAAM,2BAA2B,GAAG,GAAG,EAAE;IACvC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,wCAAc,GAAE,CAAC;IAC/B,OAAO,CACL,qCAAG,IAAI,EAAE,wCAA+B,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB;QAChF,CAAC,CAAC,eAAe,CAAC;;QAAE,8BAAC,4CAAmB,OAAG,CAC1C,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,6BAA6B;AACjC,8CAA8C;AAC9C,CAAC,QAAsC,EAAE,EAAE,CAAC,CAAC,oBAA4B,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,wCAAc,GAAE,CAAC;IAC/B,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;QACpB,OAAO,CACL;YACE,8BAAC,WAAM,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAE,8BAAC,+CAAqB,OAAG,GAAI;;YAC7D,CAAC,CAAC,mCAAmC,CAAC,CAC7C,CACJ,CAAC;KACH;IACD,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,KAAK,oBAAoB,CAAC,CAAC;IAC3F,IAAI,CAAC,oBAAoB,IAAI,CAAC,eAAe,EAAE;QAC7C,OAAO,IAAI,CAAC;KACb;IAED,IACE,eAAe,CAAC,YAAY,KAAK,YAAY;QAC7C,eAAe,CAAC,YAAY,KAAK,aAAa,EAC9C;QACA,OAAO,CACL;YACE,8BAAC,WAAM,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAE,8BAAC,mDAAuB,OAAG,GAAI;;YACjE,CAAC,CAAC,2DAA2D,CAAC;;YACrE,8BAAC,2BAA2B,OAAG,CAC9B,CACJ,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAMJ,MAAM,sBAAsB,GAA0C,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/F,MAAM,aAAa,GAAG,eAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACzB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,KAAK,EAAE,OAAO,CAAC,KAAK;KACrB,CAAC,CAAC,EACL,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,wCAAc,GAAE,CAAC;IAC/B,OAAO,CACL,8BAAC,gBAAW,IACV,KAAK,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAChC,IAAI,EAAC,kBAAkB,EACvB,OAAO,EAAE,aAAa,EACtB,aAAa,EAAE,6BAA6B,CAAC,QAAQ,CAAC,EACtD,UAAU,EAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,EACjC,UAAU,QACV,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,sBAAsB,CAAC"}

package/lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-
-import { OPENSHIFT_LIFE_CYCLE_DATES_LINK } from '../../config';
-import { OpenshiftVersionOptionType } from '../../types';
-import { SelectField, UiIcon } from '../ui';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { SelectFieldProps } from '../ui/formik/types';
-
-const OpenShiftLifeCycleDatesLink = () => {
-  const { t } = useTranslation();
-  return (
-    <a href={OPENSHIFT_LIFE_CYCLE_DATES_LINK} target="_blank" rel="noopener noreferrer">
-      {t('ai:Learn more')} <ExternalLinkAltIcon />
-    </a>
-  );
-};
-
-const getOpenshiftVersionHelperText =
-  // eslint-disable-next-line react/display-name
-  (versions: OpenshiftVersionOptionType[]) => (selectedVersionValue: string) => {
-    const { t } = useTranslation();
-    if (!versions.length) {
-      return (
-        <>
-          <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
-          &nbsp; {t('ai:No release image is available.')}
-        </>
-      );
-    }
-    const selectedVersion = versions.find((version) => version.value === selectedVersionValue);
-    if (!selectedVersionValue || !selectedVersion) {
-      return null;
-    }
-
-    if (
-      selectedVersion.supportLevel !== 'production' &&
-      selectedVersion.supportLevel !== 'maintenance'
-    ) {
-      return (
-        <>
-          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
-          &nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
-          <OpenShiftLifeCycleDatesLink />
-        </>
-      );
-    }
-
-    return null;
-  };
-
-type OpenShiftVersionSelectProps = {
-  versions: OpenshiftVersionOptionType[];
-  onChange?: SelectFieldProps['onChange'];
-};
-const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps> = ({ versions, onChange }) => {
-  const selectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        label: version.label,
-        value: version.value,
-      })),
-    [versions],
-  );
-  const { t } = useTranslation();
-  return (
-    <SelectField
-      label={t('ai:OpenShift version')}
-      name="openshiftVersion"
-      options={selectOptions}
-      getHelperText={getOpenshiftVersionHelperText(versions)}
-      isDisabled={versions.length === 0}
-      isRequired
-      onChange={onChange}
-    />
-  );
-};
-
-export default OpenShiftVersionSelect;