Add access review checks

openshift · Aug 10, 2021 · 1ac673f · 1ac673f
1 parent a7466b4
commit 1ac673f
Show file tree

Hide file tree

Showing 19 changed files with 215 additions and 146 deletions.
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts
@@ -92,7 +92,7 @@ export type CatalogItem<T extends any = any> = {
   cta?: {
     label: string;
     href?: string;
-    callback?: (props?: { [key: string]: string }) => void;
+    callback?: (props?: any) => void;
   };
   icon?: {
     url?: string;

diff --git a/frontend/packages/console-shared/src/components/quick-search/QuickSearchContent.tsx b/frontend/packages/console-shared/src/components/quick-search/QuickSearchContent.tsx
@@ -3,7 +3,7 @@ import { Split, SplitItem, Divider } from '@patternfly/react-core';
 import cx from 'classnames';
 import { CatalogType } from '@console/dev-console/src/components/catalog/utils/types';
 import { CatalogItem } from '@console/dynamic-plugin-sdk';
-import QuickSearchDetails, { QuickSearchDetailsProps } from './QuickSearchDetails';
+import QuickSearchDetails, { QuickSearchDetailsRendererProps } from './QuickSearchDetails';
 import QuickSearchList from './QuickSearchList';
 import './QuickSearchContent.scss';
 import { CatalogLinkData } from './utils/quick-search-types';
@@ -21,7 +21,7 @@ interface QuickSearchContentProps {
   viewAll?: CatalogLinkData[];
   closeModal: () => void;
   limitItemCount: number;
-  detailsRenderer?: (props: QuickSearchDetailsProps) => React.ReactNode;
+  detailsRenderer?: (props: QuickSearchDetailsRendererProps) => React.ReactNode;
 }
 
 const QuickSearchContent: React.FC<QuickSearchContentProps> = ({
@@ -59,6 +59,7 @@ const QuickSearchContent: React.FC<QuickSearchContentProps> = ({
       <Divider component="div" isVertical />
       <SplitItem className="odc-quick-search-content__details">
         <QuickSearchDetails
+          namespace={namespace}
           detailsRenderer={detailsRenderer}
           selectedItem={selectedItem}
           closeModal={closeModal}

diff --git a/frontend/packages/console-shared/src/components/quick-search/QuickSearchDetails.tsx b/frontend/packages/console-shared/src/components/quick-search/QuickSearchDetails.tsx
@@ -6,10 +6,13 @@ import './QuickSearchDetails.scss';
 import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
 import { handleCta } from './utils/quick-search-utils';
 
-export interface QuickSearchDetailsProps {
+export type QuickSearchDetailsRendererProps = {
+  namespace: string;
   selectedItem: CatalogItem;
   closeModal: () => void;
-  detailsRenderer?: (props: any) => React.ReactNode;
+};
+export interface QuickSearchDetailsProps extends QuickSearchDetailsRendererProps {
+  detailsRenderer: (props: QuickSearchDetailsRendererProps) => React.ReactNode;
 }
 
 const DefaultContent = ({ selectedItem, closeModal }) => {
@@ -39,12 +42,15 @@ const DefaultContent = ({ selectedItem, closeModal }) => {
   );
 };
 const QuickSearchDetails: React.FC<QuickSearchDetailsProps> = ({
+  namespace,
   selectedItem,
   closeModal,
   detailsRenderer = DefaultContent,
 }) => {
   return (
-    <div className="odc-quick-search-details">{detailsRenderer({ selectedItem, closeModal })}</div>
+    <div className="odc-quick-search-details">
+      {detailsRenderer({ namespace, selectedItem, closeModal })}
+    </div>
   );
 };
 

diff --git a/frontend/packages/console-shared/src/components/quick-search/QuickSearchList.tsx b/frontend/packages/console-shared/src/components/quick-search/QuickSearchList.tsx
@@ -96,7 +96,7 @@ const QuickSearchList: React.FC<QuickSearchListProps> = ({
                   className="odc-quick-search-list__item-content"
                   dataListCells={[
                     <DataListCell isIcon key={`${item.uid}-icon`}>
-                      {item?.icon?.node ? item.icon.node : getIcon(item)}
+                      {item?.icon?.node ?? getIcon(item)}
                     </DataListCell>,
                     <DataListCell
                       style={{ paddingTop: 'var(--pf-global--spacer--sm)' }}
@@ -111,7 +111,7 @@ const QuickSearchList: React.FC<QuickSearchListProps> = ({
                         </SplitItem>
                         <SplitItem>
                           {item?.attributes?.categories?.length > 0 ? (
-                            <Label color="blue">{item?.attributes?.categories[0]}</Label>
+                            <Label color="blue">{item.attributes.categories[0]}</Label>
                           ) : (
                             <TextContent>
                               <Text component={TextVariants.small}>{item.provider}</Text>

diff --git a/frontend/packages/console-shared/src/components/quick-search/QuickSearchModal.tsx b/frontend/packages/console-shared/src/components/quick-search/QuickSearchModal.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Modal, ModalVariant } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { QuickSearchDetailsProps } from './QuickSearchDetails';
+import { QuickSearchDetailsRendererProps } from './QuickSearchDetails';
 import QuickSearchModalBody from './QuickSearchModalBody';
 import { QuickSearchData } from './utils/quick-search-types';
 
@@ -15,7 +15,7 @@ interface QuickSearchModalProps {
   viewContainer?: HTMLElement;
   limitItemCount: number;
   icon?: React.ReactNode;
-  detailsRenderer?: (props: QuickSearchDetailsProps) => React.ReactNode;
+  detailsRenderer?: (props: QuickSearchDetailsRendererProps) => React.ReactNode;
 }
 
 const QuickSearchModal: React.FC<QuickSearchModalProps> = ({

diff --git a/frontend/packages/console-shared/src/components/quick-search/QuickSearchModalBody.tsx b/frontend/packages/console-shared/src/components/quick-search/QuickSearchModalBody.tsx
@@ -10,7 +10,7 @@ import {
 import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
 import QuickSearchBar from './QuickSearchBar';
 import QuickSearchContent from './QuickSearchContent';
-import { QuickSearchDetailsProps } from './QuickSearchDetails';
+import { QuickSearchDetailsRendererProps } from './QuickSearchDetails';
 import { CatalogLinkData, QuickSearchData } from './utils/quick-search-types';
 import { handleCta } from './utils/quick-search-utils';
 
@@ -24,7 +24,7 @@ interface QuickSearchModalBodyProps {
   closeModal: () => void;
   limitItemCount: number;
   icon?: React.ReactNode;
-  detailsRenderer?: (props: QuickSearchDetailsProps) => React.ReactNode;
+  detailsRenderer?: (props: QuickSearchDetailsRendererProps) => React.ReactNode;
 }
 
 const QuickSearchModalBody: React.FC<QuickSearchModalBodyProps> = ({

diff --git a/frontend/packages/dev-console/src/components/catalog/catalog-view/CatalogView.tsx b/frontend/packages/dev-console/src/components/catalog/catalog-view/CatalogView.tsx
@@ -263,7 +263,11 @@ const CatalogView: React.FC<CatalogViewProps> = ({
           onSearchKeywordChange={handleSearchKeywordChange}
         />
         {totalItems > 0 ? (
-          <CatalogGrid items={catalogItems} renderTile={renderTile} isGrouped={isGrouped} />
+          <CatalogGrid
+            items={catalogItems as CatalogItem[] | { [key: string]: CatalogItem[] }}
+            renderTile={renderTile}
+            isGrouped={isGrouped}
+          />
         ) : (
           <CatalogEmptyState onClear={clearFilters} />
         )}

diff --git a/frontend/packages/pipelines-plugin/locales/en/pipelines-plugin.json b/frontend/packages/pipelines-plugin/locales/en/pipelines-plugin.json
@@ -55,6 +55,7 @@
   "Finally tasks": "Finally tasks",
   "This Pipeline has no tasks to visualize.": "This Pipeline has no tasks to visualize.",
   "Finally task": "Finally task",
+  "Installing": "Installing",
   "Required": "Required",
   "Successfully updated the pipeline {{formName}}.": "Successfully updated the pipeline {{formName}}.",
   "Add Pipeline parameter": "Add Pipeline parameter",
@@ -254,14 +255,18 @@
   "Select a Project to view the list of Pipelines or <2>create a Project</2>.": "Select a Project to view the list of Pipelines or <2>create a Project</2>.",
   "Create Pipeline": "Create Pipeline",
   "by name": "by name",
+  "Install and Add": "Install and Add",
+  "Update and Add": "Update and Add",
   "View all tekton tasks ({{itemCount, number}})": "View all tekton tasks ({{itemCount, number}})",
+  "This version is not installed": "This version is not installed",
+  "Adding this task may take a few moments.": "Adding this task may take a few moments.",
+  "Upgrading this task may take a few moments.": "Upgrading this task may take a few moments.",
+  "Categories": "Categories",
+  "Tags": "Tags",
   "Repository": "Repository",
   "Branch": "Branch",
   "Commit id": "Commit id",
   "Event type": "Event type",
-  "This version is not installed": "This version is not installed",
-  "Adding this task may take a few minutes.": "Adding this task may take a few minutes.",
-  "Upgrading this task may take a few minutes.": "Upgrading this task may take a few minutes.",
   "No options matching your criteria": "No options matching your criteria",
   "{{resourceName}} results": "{{resourceName}} results",
   "Value": "Value",

diff --git a/...onents/catalog/hooks/useTaskCategories.ts → ...omponents/catalog/hooks/useApiResponse.ts b/...onents/catalog/hooks/useTaskCategories.ts → ...omponents/catalog/hooks/useApiResponse.ts
@@ -1,20 +1,22 @@
 import * as React from 'react';
 import { coFetch } from '@console/internal/co-fetch';
-import { TEKTON_HUB_API_ENDPOINT } from '../const';
 
-const useTaskCategories = () => {
-  const [tektonHubCategories, setTektonHubCategories] = React.useState<any>([]); // Tektonhub categories
+export type ApiResult<R extends any[]> = [R[], boolean, string];
+export type UseApiResponse = <R extends any = any>(url: string) => ApiResult<R[]>;
+
+const useApiResponse: UseApiResponse = (url: string) => {
+  const [resultData, setResult] = React.useState([]);
   const [loaded, setLoaded] = React.useState(false);
   const [loadedError, setLoadedError] = React.useState<string>();
 
   React.useEffect(() => {
     let mounted = true;
-    coFetch(`${TEKTON_HUB_API_ENDPOINT}/categories`)
+    coFetch(url)
       .then(async (res) => {
         const json = await res.json();
         if (mounted) {
           setLoaded(true);
-          setTektonHubCategories(json.data);
+          setResult(json.data);
         }
       })
       .catch((err) => {
@@ -24,9 +26,9 @@ const useTaskCategories = () => {
     return () => {
       mounted = false;
     };
-  }, []);
+  }, [url]);
 
-  return [tektonHubCategories, loaded, loadedError];
+  return [resultData, loaded, loadedError];
 };
 
-export default useTaskCategories;
+export default useApiResponse;
diff --git a/frontend/packages/pipelines-plugin/src/components/catalog/hooks/useTaskResources.ts b/frontend/packages/pipelines-plugin/src/components/catalog/hooks/useTaskResources.ts
diff --git a/...d/packages/pipelines-plugin/src/components/catalog/providers/useTekonHubTasksProvider.tsx b/...d/packages/pipelines-plugin/src/components/catalog/providers/useTekonHubTasksProvider.tsx
@@ -1,63 +1,58 @@
 import * as React from 'react';
 import i18next from 'i18next';
-import * as _ from 'lodash';
 import { CatalogItem, ExtensionHook } from '@console/dynamic-plugin-sdk';
 import { coFetch } from '@console/internal/co-fetch';
 import { ResourceLink } from '@console/internal/components/utils';
 import { TaskKind } from '../../../types';
+import { TektonHubCategory, TektonHubTask } from '../../../types/tektonHub';
 import { TektonTaskProviders } from '../../pipelines/const';
 import { TEKTON_HUB_API_ENDPOINT } from '../const';
-import useTaskCategories from '../hooks/useTaskCategories';
-import useTaskResources from '../hooks/useTaskResources';
+import useApiResponse from '../hooks/useApiResponse';
 
 const normalizeTektonHubTasks = async (
   tektonTasks: any[],
   tektonHubCategories: any[],
 ): Promise<CatalogItem<any>[]> => {
-  const tasks = _.reduce(
-    tektonTasks,
-    (acc, task) => {
-      const { id, name, creationTimestamp } = task;
-      const { description } = task.latestVersion;
-      const provider = TektonTaskProviders.community;
-      const tags = task.tags?.map((t) => t.name);
-      const categories = tektonHubCategories
-        .filter((c) => c.tags.find((t) => tags.includes(t.name)))
-        .map((ct) => ct.name);
-      acc.push(
-        coFetch(`${TEKTON_HUB_API_ENDPOINT}/resource/${id}/versions`)
-          .then(async (res) => {
-            const json = await res.json();
-            const versions = json.data?.versions ?? [];
-            const normalizedTektonTask: CatalogItem<TaskKind> = {
-              uid: id,
-              type: TektonTaskProviders.community,
-              name,
-              description,
-              provider,
-              tags,
-              creationTimestamp,
-              icon: {
-                node: <ResourceLink kind="Task" />,
-              },
-              attributes: { installed: '', versions, categories },
-              cta: {
-                label: i18next.t('pipelines-plugin~Add'),
-                callback: () => {},
-              },
-              data: task,
-            };
-            return normalizedTektonTask;
-          })
-          .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.log(err);
-          }),
-      );
-      return acc;
-    },
-    [],
-  );
+  const tasks = tektonTasks.reduce((acc, task) => {
+    const { id, name, creationTimestamp } = task;
+    const { description } = task.latestVersion;
+    const provider = TektonTaskProviders.community;
+    const tags = task.tags?.map((t) => t.name);
+    const categories = tektonHubCategories
+      .filter((c) => c.tags.find((t) => tags.includes(t.name)))
+      .map((ct) => ct.name);
+    acc.push(
+      coFetch(`${TEKTON_HUB_API_ENDPOINT}/resource/${id}/versions`)
+        .then(async (res) => {
+          const json = await res.json();
+          const versions = json.data?.versions ?? [];
+          const normalizedTektonTask: CatalogItem<TaskKind> = {
+            uid: id,
+            type: TektonTaskProviders.community,
+            name,
+            description,
+            provider,
+            tags,
+            creationTimestamp,
+            icon: {
+              node: <ResourceLink kind="Task" />,
+            },
+            attributes: { installed: '', versions, categories },
+            cta: {
+              label: i18next.t('pipelines-plugin~Add'),
+              callback: () => {},
+            },
+            data: task,
+          };
+          return normalizedTektonTask;
+        })
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.log(err);
+        }),
+    );
+    return acc;
+  }, []);
 
   const normalizedTektonTasks: CatalogItem<any>[] = await Promise.all(tasks);
   return normalizedTektonTasks;
@@ -70,8 +65,12 @@ const useTektonHubTasksProvider: ExtensionHook<CatalogItem[]> = (): [
 ] => {
   const [normalizedTasks, setNormalizedTasks] = React.useState<any>([]);
 
-  const [tektonHubCategories, categoryLoaded, categoryError] = useTaskCategories();
-  const [tektonHubTasks, tasksLoaded, tasksError] = useTaskResources();
+  const [tektonHubCategories, categoryLoaded, categoryError] = useApiResponse<TektonHubCategory>(
+    `${TEKTON_HUB_API_ENDPOINT}/categories`,
+  );
+  const [tektonHubTasks, tasksLoaded, tasksError] = useApiResponse<TektonHubTask>(
+    `${TEKTON_HUB_API_ENDPOINT}/resources`,
+  );
 
   React.useMemo(
     async () =>

diff --git a/.../src/components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationTask.tsx b/.../src/components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationTask.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Tooltip } from '@patternfly/react-core';
 import { createSvgIdUrl, useHover } from '@patternfly/react-topology';
 import * as cx from 'classnames';
+import i18next from 'i18next';
 import * as _ from 'lodash';
 import { Link } from 'react-router-dom';
 import {
@@ -190,15 +191,6 @@ const TaskComponent: React.FC<TaskProps> = ({
 
   let taskPill = (
     <g ref={hoverRef}>
-      {!!pipelineTask?.metadata?.installing && (
-        <g>
-          <InstallingNodeDecorator
-            x={0}
-            y={BUILDER_NODE_ADD_RADIUS / 4}
-            content={'pipelines-plugin~Installing'}
-          />
-        </g>
-      )}
       <SvgDropShadowFilter dy={1} id={FILTER_ID} />
       <rect
         filter={hover ? createSvgIdUrl(FILTER_ID) : ''}
@@ -210,6 +202,15 @@ const TaskComponent: React.FC<TaskProps> = ({
           'is-linked': enableLogLink,
         })}
       />
+      {pipelineTask?.metadata?.installing && (
+        <g>
+          <InstallingNodeDecorator
+            x={0}
+            y={BUILDER_NODE_ADD_RADIUS / 4}
+            content={i18next.t('pipelines-plugin~Installing')}
+          />
+        </g>
+      )}
       {visualName !== truncatedVisualName && disableVisualizationTooltip ? (
         <Tooltip content={visualName}>{renderVisualName}</Tooltip>
       ) : (