Move QuickSearch to Shared Package

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

@@ -134,6 +134,11 @@
   "Increase the Pod count": "Increase the Pod count",
   "Decrease the Pod count": "Decrease the Pod count",
   "Close": "Close",
+  "Quick search bar": "Quick search bar",
+  "No results": "No results",
+  "Provided by {{provider}}": "Provided by {{provider}}",
+  "Quick search list": "Quick search list",
+  "Quick search": "Quick search",
   "Hover": "Hover",
   "Drag": "Drag",
   "Click": "Click",

frontend/packages/console-shared/src/components/index.ts

@@ -28,3 +28,4 @@ export * from './custom-resource-list';
 export * from './toast';
 export * from './markdown-extensions';
 export * from './actions';
+export * from './quick-search';

frontend/packages/topology/src/components/quick-search/QuickSearchBar.tsx → frontend/packages/console-shared/src/components/quick-search/QuickSearchBar.tsx

@@ -10,13 +10,15 @@ interface QuickSearchBarProps {
   autoFocus: boolean;
   searchTerm: string;
   onSearch: (searchTerm: string) => void;
+  searchPlaceholder: string;
 }
 
 const QuickSearchBar: React.FC<QuickSearchBarProps> = ({
   showNoResults,
   itemsLoaded,
   autoFocus = false,
   searchTerm,
+  searchPlaceholder,
   onSearch,
 }) => {
   const { t } = useTranslation();
@@ -28,9 +30,9 @@ const QuickSearchBar: React.FC<QuickSearchBarProps> = ({
       </InputGroupText>
       <TextInput
         type="search"
-        aria-label={t('topology~Quick search bar')}
+        aria-label={t('console-shared~Quick search bar')}
         className="odc-quick-search-bar__input"
-        placeholder={`${t('topology~Add to Project')}...`}
+        placeholder={searchPlaceholder}
         onChange={onSearch}
         autoFocus={autoFocus}
         value={searchTerm}
@@ -41,7 +43,7 @@ const QuickSearchBar: React.FC<QuickSearchBarProps> = ({
         </InputGroupText>
       )}
       {itemsLoaded && showNoResults && (
-        <InputGroupText>-- {t('topology~No results')}</InputGroupText>
+        <InputGroupText>-- {t('console-shared~No results')}</InputGroupText>
       )}
     </InputGroup>
   );

frontend/packages/topology/src/components/quick-search/QuickSearchController.tsx → frontend/packages/console-shared/src/components/quick-search/QuickSearchController.tsx

@@ -8,6 +8,7 @@ type QuickSearchControllerProps = {
   namespace: string;
   viewContainer?: HTMLElement;
   quickSearchProviders: QuickSearchProviders;
+  searchPlaceholder: string;
   allItemsLoaded: boolean;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
@@ -16,6 +17,7 @@ type QuickSearchControllerProps = {
 const QuickSearchController: React.FC<QuickSearchControllerProps> = ({
   namespace,
   quickSearchProviders,
+  searchPlaceholder,
   viewContainer,
   allItemsLoaded,
   isOpen,
@@ -85,6 +87,7 @@ const QuickSearchController: React.FC<QuickSearchControllerProps> = ({
       isOpen={isOpen}
       closeModal={() => setIsOpen(false)}
       namespace={namespace}
+      searchPlaceholder={searchPlaceholder}
       allCatalogItemsLoaded={allItemsLoaded}
       searchCatalog={searchCatalog}
       viewContainer={viewContainer}

frontend/packages/topology/src/components/quick-search/QuickSearchDetails.tsx → frontend/packages/console-shared/src/components/quick-search/QuickSearchDetails.tsx

@@ -20,7 +20,7 @@ const QuickSearchDetails: React.FC<QuickSearchDetailsProps> = ({ selectedItem, c
       <Title headingLevel="h4">{selectedItem.name}</Title>
       {selectedItem.provider && (
         <span className="odc-quick-search-details__provider">
-          {t('topology~Provided by {{provider}}', { provider: selectedItem.provider })}
+          {t('console-shared~Provided by {{provider}}', { provider: selectedItem.provider })}
         </span>
       )}
       <Button

frontend/packages/topology/src/components/quick-search/QuickSearchList.tsx → frontend/packages/console-shared/src/components/quick-search/QuickSearchList.tsx

@@ -62,7 +62,7 @@ const QuickSearchList: React.FC<QuickSearchListProps> = ({
     <div className="odc-quick-search-list">
       <DataList
         className="odc-quick-search-list__list"
-        aria-label={t('topology~Quick search list')}
+        aria-label={t('console-shared~Quick search list')}
         selectedDataListItemId={selectedItemId}
         onSelectDataListItem={onSelectListItem}
         isCompact

frontend/packages/topology/src/components/quick-search/QuickSearchModal.tsx → frontend/packages/console-shared/src/components/quick-search/QuickSearchModal.tsx

@@ -10,6 +10,7 @@ interface QuickSearchModalProps {
   closeModal: () => void;
   allCatalogItemsLoaded: boolean;
   searchCatalog: (searchTerm: string) => QuickSearchData;
+  searchPlaceholder: string;
   viewContainer?: HTMLElement;
 }
 
@@ -18,6 +19,7 @@ const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
   namespace,
   closeModal,
   searchCatalog,
+  searchPlaceholder,
   allCatalogItemsLoaded,
   viewContainer,
 }) => {
@@ -26,7 +28,7 @@ const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
   return viewContainer ? (
     <Modal
       variant={ModalVariant.medium}
-      aria-label={t('topology~Quick search')}
+      aria-label={t('console-shared~Quick search')}
       isOpen={isOpen}
       showClose={false}
       position="top"
@@ -37,6 +39,7 @@ const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
       <QuickSearchModalBody
         allCatalogItemsLoaded={allCatalogItemsLoaded}
         searchCatalog={searchCatalog}
+        searchPlaceholder={searchPlaceholder}
         namespace={namespace}
         closeModal={closeModal}
       />

frontend/packages/topology/src/components/quick-search/QuickSearchModalBody.tsx → frontend/packages/console-shared/src/components/quick-search/QuickSearchModalBody.tsx

@@ -13,12 +13,12 @@ import QuickSearchContent from './QuickSearchContent';
 import { CatalogLinkData, QuickSearchData } from './utils/quick-search-types';
 import { handleCta } from './utils/quick-search-utils';
 
-import './QuickSearchButton.scss';
 import './QuickSearchModalBody.scss';
 
 interface QuickSearchModalBodyProps {
   allCatalogItemsLoaded: boolean;
   searchCatalog: (searchTerm: string) => QuickSearchData;
+  searchPlaceholder: string;
   namespace: string;
   closeModal: () => void;
 }
@@ -27,6 +27,7 @@ const QuickSearchModalBody: React.FC<QuickSearchModalBodyProps> = ({
   searchCatalog,
   namespace,
   closeModal,
+  searchPlaceholder,
   allCatalogItemsLoaded,
 }) => {
   const [catalogItems, setCatalogItems] = React.useState<CatalogItem[]>(null);
@@ -170,6 +171,7 @@ const QuickSearchModalBody: React.FC<QuickSearchModalBodyProps> = ({
     <div ref={ref} className="odc-quick-search-modal-body" style={{ height: getModalHeight() }}>
       <QuickSearchBar
         searchTerm={searchTerm}
+        searchPlaceholder={searchPlaceholder}
         onSearch={onSearch}
         showNoResults={catalogItems?.length === 0}
         itemsLoaded={allCatalogItemsLoaded}

frontend/packages/console-shared/src/components/quick-search/index.ts

@@ -0,0 +1,3 @@
+export { default as QuickSearchController } from './QuickSearchController';
+export * from './utils/quick-search-types';
+export * from './utils/quick-search-utils';

frontend/packages/console-shared/src/components/quick-search/utils/quick-search-utils.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { keywordCompare } from '@console/dev-console/src/components/catalog/utils/catalog-utils';
+import { CatalogItem } from '@console/dynamic-plugin-sdk';
+import { history, removeQueryArgument } from '@console/internal/components/utils';
+
+export const quickSearch = (items: CatalogItem[], query: string) => {
+  return keywordCompare(query, items);
+};
+
+export const handleCta = (
+  e: React.SyntheticEvent,
+  item: CatalogItem,
+  closeModal: () => void,
+  fireTelemetryEvent: (event: string, properties?: {}) => void,
+) => {
+  e.preventDefault();
+  const { href, callback } = item.cta;
+  if (callback) {
+    fireTelemetryEvent('Quick Search Used', {
+      id: item.uid,
+      type: item.type,
+      name: item.name,
+    });
+    closeModal();
+    callback();
+    removeQueryArgument('catalogSearch');
+  } else history.push(href);
+};

frontend/packages/topology/locales/en/topology.json

@@ -60,19 +60,14 @@
   "Shortcuts": "Shortcuts",
   "View shortcuts": "View shortcuts",
   "Drop file ({{fileTypes}}) here": "Drop file ({{fileTypes}}) here",
+  "Prerequisites": "Prerequisites",
+  "Quick Starts": "Quick Starts",
+  "Start": "Start",
   "View all developer catalog items ({{itemCount, number}})": "View all developer catalog items ({{itemCount, number}})",
   "View all quick starts ({{itemCount, number}})": "View all quick starts ({{itemCount, number}})",
   "View all samples ({{itemCount, number}})": "View all samples ({{itemCount, number}})",
-  "Quick search bar": "Quick search bar",
   "Add to Project": "Add to Project",
-  "No results": "No results",
   "Quick search button": "Quick search button",
-  "Provided by {{provider}}": "Provided by {{provider}}",
-  "Quick search list": "Quick search list",
-  "Quick search": "Quick search",
-  "Prerequisites": "Prerequisites",
-  "Quick Starts": "Quick Starts",
-  "Start": "Start",
   "Visual connector": "Visual connector",
   "Binding connector": "Binding connector",
   "Traffic connector": "Traffic connector",

frontend/packages/topology/src/components/page/TopologyView.tsx

@@ -52,7 +52,7 @@ import {
 } from '../../topology-types';
 import Topology from '../graph-view/Topology';
 import TopologyListView from '../list-view/TopologyListView';
-import QuickSearch from '../quick-search/QuickSearch';
+import TopologyQuickSearch from '../quick-search/TopologyQuickSearch';
 import { getSelectedEntityDetails } from '../side-bar/getSelectedEntityDetails';
 import TopologySideBar from '../side-bar/TopologySideBar';
 import TopologyEmptyState from './TopologyEmptyState';
@@ -362,7 +362,7 @@ export const ConnectedTopologyView: React.FC<ComponentProps> = ({
             {topologySideBarDetails}
           </TopologySideBar>
         </StackItem>
-        <QuickSearch
+        <TopologyQuickSearch
           namespace={namespace}
           viewContainer={viewContainer}
           isOpen={isQuickSearchOpen}

frontend/packages/topology/src/components/quick-search/QuickSearch.tsx → frontend/packages/topology/src/components/quick-search/TopologyQuickSearch.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { QuickStart } from '@patternfly/quickstarts';
+import { useTranslation } from 'react-i18next';
 import QuickStartsLoader from '@console/app/src/components/quick-starts/loader/QuickStartsLoader';
 import CatalogServiceProvider, {
   CatalogService,
 } from '@console/dev-console/src/components/catalog/service/CatalogServiceProvider';
-import QuickSearchController from './QuickSearchController';
-import { QuickSearchProviders } from './utils/quick-search-types';
-import { useTransformedQuickStarts } from './utils/quick-search-utils';
+import { QuickSearchController, QuickSearchProviders } from '@console/shared';
+import { useTransformedQuickStarts } from './topology-quick-search-utils';
 
 interface QuickSearchProps {
   namespace: string;
@@ -30,6 +30,8 @@ const Contents: React.FC<{
   isOpen,
   setIsOpen,
 }) => {
+  const { t } = useTranslation();
+
   const quickStartItems = useTransformedQuickStarts(quickStarts);
   const quickSearchProviders: QuickSearchProviders = [
     {
@@ -64,6 +66,7 @@ const Contents: React.FC<{
     <QuickSearchController
       quickSearchProviders={quickSearchProviders}
       allItemsLoaded={catalogService.loaded && quickStartsLoaded}
+      searchPlaceholder={`${t('topology~Add to Project')}...`}
       namespace={namespace}
       viewContainer={viewContainer}
       isOpen={isOpen}
@@ -72,7 +75,7 @@ const Contents: React.FC<{
   );
 };
 
-const QuickSearch: React.FC<QuickSearchProps> = ({
+const TopologyQuickSearch: React.FC<QuickSearchProps> = ({
   namespace,
   viewContainer,
   isOpen,
@@ -106,4 +109,4 @@ const QuickSearch: React.FC<QuickSearchProps> = ({
   );
 };
 
-export default React.memo(QuickSearch);
+export default React.memo(TopologyQuickSearch);

frontend/packages/topology/src/components/quick-search/TopologyQuickSearchButton.scss

@@ -0,0 +1,3 @@
+.odc-topology-quick-search-button {
+  padding: 0px;
+}

frontend/packages/topology/src/components/quick-search/QuickSearchButton.tsx → frontend/packages/topology/src/components/quick-search/TopologyQuickSearchButton.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { Tooltip, Button } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import QuickSearchIcon from './QuickSearchIcon';
-import './QuickSearchButton.scss';
+import QuickSearchIcon from '@console/shared/src/components/quick-search/QuickSearchIcon';
+import './TopologyQuickSearchButton.scss';
 
 interface QuickSearchButtonProps {
   onClick: () => void;
 }
 
-const QuickSearchButton: React.FC<QuickSearchButtonProps> = ({ onClick }) => {
+const TopologyQuickSearchButton: React.FC<QuickSearchButtonProps> = ({ onClick }) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip position="right" content={t('topology~Add to Project')}>
       <Button
-        className="odc-quick-search-button"
+        className="odc-topology-quick-search-button"
         variant="plain"
         onClick={(e) => {
           e.stopPropagation();
@@ -28,4 +28,4 @@ const QuickSearchButton: React.FC<QuickSearchButtonProps> = ({ onClick }) => {
   );
 };
 
-export default QuickSearchButton;
+export default TopologyQuickSearchButton;

frontend/packages/topology/src/components/quick-search/utils/quick-search-utils.tsx → frontend/packages/topology/src/components/quick-search/topology-quick-search-utils.tsx

@@ -2,13 +2,7 @@ import * as React from 'react';
 import { QuickStart, QuickStartContext, QuickStartContextValues } from '@patternfly/quickstarts';
 import { TextList, TextListItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { keywordCompare } from '@console/dev-console/src/components/catalog/utils/catalog-utils';
 import { CatalogItem } from '@console/dynamic-plugin-sdk';
-import { history, removeQueryArgument } from '@console/internal/components/utils';
-
-export const quickSearch = (items: CatalogItem[], query: string) => {
-  return keywordCompare(query, items);
-};
 
 export const useTransformedQuickStarts = (quickStarts: QuickStart[]): CatalogItem[] => {
   const { setActiveQuickStart } = React.useContext<QuickStartContextValues>(QuickStartContext);
@@ -50,23 +44,3 @@ export const useTransformedQuickStarts = (quickStarts: QuickStart[]): CatalogIte
     [t, quickStarts, setActiveQuickStart],
   );
 };
-
-export const handleCta = (
-  e: React.SyntheticEvent,
-  item: CatalogItem,
-  closeModal: () => void,
-  fireTelemetryEvent: (event: string, properties?: {}) => void,
-) => {
-  e.preventDefault();
-  const { href, callback } = item.cta;
-  if (callback) {
-    fireTelemetryEvent('Quick Search Used', {
-      id: item.uid,
-      type: item.type,
-      name: item.name,
-    });
-    closeModal();
-    callback();
-    removeQueryArgument('catalogSearch');
-  } else history.push(href);
-};

frontend/packages/topology/src/filters/TopologyFilterBar.tsx

@@ -20,7 +20,7 @@ import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s
 import { getActiveNamespace } from '@console/internal/reducers/ui';
 import { RootState } from '@console/internal/redux';
 import { useQueryParams } from '@console/shared';
-import QuickSearchButton from '../components/quick-search/QuickSearchButton';
+import TopologyQuickSearchButton from '../components/quick-search/TopologyQuickSearchButton';
 import { TopologyViewType } from '../topology-types';
 import { getNamespaceDashboardKialiLink } from '../utils/topology-utils';
 import {
@@ -78,7 +78,7 @@ const TopologyFilterBar: React.FC<TopologyFilterBarProps> = ({
     <Toolbar className="co-namespace-bar odc-topology-filter-bar">
       <ToolbarContent>
         <ToolbarItem>
-          <QuickSearchButton onClick={() => setIsQuickSearchOpen(true)} />
+          <TopologyQuickSearchButton onClick={() => setIsQuickSearchOpen(true)} />
         </ToolbarItem>
         <ToolbarGroup variant={ToolbarGroupVariant['filter-group']}>
           <ToolbarItem>