Merge pull request #13137 from sg00dwin/remove-cluster-filter

OCPBUGS-18094: Remove cluster filter and menu group title

Author: openshift-merge-robot

frontend/packages/console-app/locales/en/console-app.json

@@ -269,10 +269,6 @@
   "Create": "Create",
   "Required": "Required",
   "Service binding already exists. Select a different service to connect to.": "Service binding already exists. Select a different service to connect to.",
-  "No cluster found": "No cluster found",
-  "No results match the filter criteria.": "No results match the filter criteria.",
-  "Clear filter": "Clear filter",
-  "Find a cluster...": "Find a cluster...",
   "All Clusters": "All Clusters",
   "Remove from navigation?": "Remove from navigation?",
   "Remove": "Remove",

frontend/packages/console-app/src/components/nav/ClusterMenu.tsx

@@ -1,105 +1,45 @@
 import * as React from 'react';
-import {
-  Button,
-  Divider,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateSecondaryActions,
-  Menu,
-  MenuContent,
-  MenuGroup,
-  MenuInput,
-  MenuItem,
-  MenuList,
-  TextInput,
-  Title,
-} from '@patternfly/react-core';
-import fuzzysearch from 'fuzzysearch';
+import { Menu, MenuContent, MenuItem, MenuList } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { useActivePerspective } from '@console/dynamic-plugin-sdk';
 import { useActiveCluster, usePerspectiveExtension } from '@console/shared';
 import { ACM_PERSPECTIVE_ID } from '../../consts';
 import ClusterMenuToggle from './ClusterMenuToggle';
 
-const NoResults: React.FC<{
-  onClear: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}> = ({ onClear }) => {
-  const { t } = useTranslation();
-  return (
-    <EmptyState>
-      <Title size="md" headingLevel="h4">
-        {t('console-app~No cluster found')}
-      </Title>
-      <EmptyStateBody>{t('console-app~No results match the filter criteria.')}</EmptyStateBody>
-      <EmptyStateSecondaryActions>
-        <Button variant="link" onClick={onClear}>
-          {t('console-app~Clear filter')}
-        </Button>
-      </EmptyStateSecondaryActions>
-    </EmptyState>
-  );
-};
-
-const ClusterFilter: React.FC<{
-  filterRef: React.Ref<any>;
-  onFilterChange: (filterText: string) => void;
-  filterText: string;
-}> = ({ filterText, filterRef, onFilterChange }) => {
-  const { t } = useTranslation();
-  return (
-    <MenuInput translate="no">
-      <TextInput
-        autoFocus
-        placeholder={t('console-app~Find a cluster...')}
-        aria-label={t('console-app~Find a cluster...')}
-        iconVariant="search"
-        type="search"
-        value={filterText}
-        onChange={onFilterChange}
-        ref={filterRef}
-      />
-    </MenuInput>
-  );
-};
-
 const ClusterGroup: React.FC<{
   clusters: ClusterMenuItem[];
 }> = ({ clusters }) => {
   const [activeCluster] = useActiveCluster();
   const [activePerspective] = useActivePerspective();
 
   return clusters.length === 0 ? null : (
-    <MenuGroup translate="no" label="Clusters">
-      <MenuList>
-        {clusters.map((cluster) => (
-          <MenuItem
-            translate="no"
-            data-test-id="cluster-dropdown-item"
-            key={cluster.key}
-            itemId={cluster.key}
-            isSelected={
-              activePerspective === ACM_PERSPECTIVE_ID
-                ? cluster.key === ACM_PERSPECTIVE_ID
-                : cluster.key === activeCluster
-            }
-            onClick={(e) => {
-              e.preventDefault();
-              cluster.onClick();
-            }}
-          >
-            {cluster.title}
-          </MenuItem>
-        ))}
-      </MenuList>
-    </MenuGroup>
+    <MenuList>
+      {clusters.map((cluster) => (
+        <MenuItem
+          translate="no"
+          data-test-id="cluster-dropdown-item"
+          key={cluster.key}
+          itemId={cluster.key}
+          isSelected={
+            activePerspective === ACM_PERSPECTIVE_ID
+              ? cluster.key === ACM_PERSPECTIVE_ID
+              : cluster.key === activeCluster
+          }
+          onClick={(e) => {
+            e.preventDefault();
+            cluster.onClick();
+          }}
+        >
+          {cluster.title}
+        </MenuItem>
+      ))}
+    </MenuList>
   );
 };
 
 // TODO remove multicluster
 const ClusterMenu = () => {
   const { t } = useTranslation();
-  const [filterText, setFilterText] = React.useState('');
-  const filterRef = React.useRef(null);
   const menuRef = React.useRef(null);
   const [activePerspective, setActivePerspective] = useActivePerspective();
   const acmPerspectiveExtension = usePerspectiveExtension(ACM_PERSPECTIVE_ID);
@@ -139,40 +79,10 @@ const ClusterMenu = () => {
     [acmPerspectiveExtension, onAllClustersClick, onClusterClick],
   );
 
-  const isOptionShown = React.useCallback(
-    (option: ClusterMenuItem): boolean =>
-      fuzzysearch(filterText.toLowerCase(), option.title.toLowerCase()),
-    [filterText],
-  );
-
-  const filteredOptions = React.useMemo(() => optionItems.filter(isOptionShown), [
-    isOptionShown,
-    optionItems,
-  ]);
-
-  const emptyState: JSX.Element =
-    filteredOptions.length === 0 ? (
-      <NoResults
-        onClear={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          setFilterText('');
-          filterRef.current?.focus();
-        }}
-      />
-    ) : null;
-
   const clusterMenu: JSX.Element = (
     <Menu ref={menuRef} isScrollable activeItemId={activeCluster} className="co-cluster-menu">
       <MenuContent maxMenuHeight="60vh" translate="no">
-        <ClusterFilter
-          filterText={filterText}
-          filterRef={filterRef}
-          onFilterChange={setFilterText}
-        />
-        <Divider />
-        {emptyState}
-        <ClusterGroup clusters={filteredOptions} />
+        <ClusterGroup clusters={optionItems} />
       </MenuContent>
     </Menu>
   );