Merge pull request #160 from lokanandaprabhu/feature/SRVKP-6637

SRVKP-6637: Remove All options from project dropdown on overview page for user have no access to all projects
openshift-pipelines · Oct 24, 2024 · 91bb6ec · 91bb6ec
2 parents 14b0032 + ef99454
commit 91bb6ec
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 28 deletions.
diff --git a/src/components/pipelines-overview/NamespaceDropdown.tsx b/src/components/pipelines-overview/NamespaceDropdown.tsx
@@ -11,9 +11,13 @@ import { alphanumericCompare } from './utils';
 import { useTranslation } from 'react-i18next';
 
 import './PipelinesOverview.scss';
-import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  useFlag,
+  useK8sWatchResource,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { Project } from '../../types/openshift';
 import { ALL_NAMESPACES_KEY } from '../../consts';
+import { FLAGS } from '../../types';
 
 interface NameSpaceDropdownProps {
   selected: string;
@@ -26,6 +30,7 @@ const NameSpaceDropdown: React.FC<NameSpaceDropdownProps> = ({
 }) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const [isOpen, setValue] = React.useState(false);
+  const canListNS = useFlag(FLAGS.CAN_LIST_NS);
   const toggleIsOpen = React.useCallback(() => setValue((v) => !v), []);
   const setClosed = React.useCallback(() => setValue(false), []);
 
@@ -53,8 +58,9 @@ const NameSpaceDropdown: React.FC<NameSpaceDropdownProps> = ({
       items.push({ title: selected, key: selected }); // Add current namespace if it isn't included
     }
     items.sort((a, b) => alphanumericCompare(a.title, b.title));
-
-    items.unshift({ title: allNamespacesTitle, key: ALL_NAMESPACES_KEY });
+    if (canListNS) {
+      items.unshift({ title: allNamespacesTitle, key: ALL_NAMESPACES_KEY });
+    }
     return items;
   }, [projects, projectsLoaded]);
 

diff --git a/src/components/pipelines-overview/PipelinesOverviewPage.tsx b/src/components/pipelines-overview/PipelinesOverviewPage.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import PipelineRunsStatusCard from './PipelineRunsStatusCard';
 import { Flex, FlexItem } from '@patternfly/react-core';
+import PipelineRunsStatusCard from './PipelineRunsStatusCard';
+import {
+  useActiveNamespace,
+  useFlag,
+} from '@openshift-console/dynamic-plugin-sdk';
 import PipelinesRunsDurationCard from './PipelineRunsDurationCard';
 import PipelinesRunsTotalCard from './PipelineRunsTotalCard';
 import PipelinesRunsNumbersChart from './PipelineRunsNumbersChart';
@@ -11,19 +15,18 @@ import PipelineRunsListPage from './list-pages/PipelineRunsListPage';
 import TimeRangeDropdown from './TimeRangeDropdown';
 import RefreshDropdown from './RefreshDropdown';
 import { IntervalOptions, TimeRangeOptions, useQueryParams } from './utils';
-import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
+import { ALL_NAMESPACES_KEY } from '../../consts';
+import AllProjectsPage from '../projects-list/AllProjectsPage';
+import { FLAGS } from '../../types';
 
 const PipelinesOverviewPage: React.FC = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
+  const canListNS = useFlag(FLAGS.CAN_LIST_NS);
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
-  const [namespace, setNamespace] = React.useState(activeNamespace);
   const [timespan, setTimespan] = React.useState(parsePrometheusDuration('1d'));
   const [interval, setInterval] = React.useState(
     parsePrometheusDuration('30s'),
   );
-  React.useEffect(() => {
-    setActiveNamespace(namespace);
-  }, [namespace]);
 
   useQueryParams({
     key: 'refreshinterval',
@@ -45,6 +48,10 @@ const PipelinesOverviewPage: React.FC = () => {
     loadFormat: parsePrometheusDuration,
   });
 
+  if (!canListNS && activeNamespace === ALL_NAMESPACES_KEY) {
+    return <AllProjectsPage pageTitle={t('Overview')} />;
+  }
+
   return (
     <>
       <div className="co-m-nav-title">
@@ -54,7 +61,10 @@ const PipelinesOverviewPage: React.FC = () => {
       </div>
       <Flex className="project-dropdown-label__flex">
         <FlexItem>
-          <NameSpaceDropdown selected={namespace} setSelected={setNamespace} />
+          <NameSpaceDropdown
+            selected={activeNamespace}
+            setSelected={setActiveNamespace}
+          />
         </FlexItem>
         <FlexItem>
           <TimeRangeDropdown timespan={timespan} setTimespan={setTimespan} />
@@ -68,7 +78,7 @@ const PipelinesOverviewPage: React.FC = () => {
           timespan={timespan}
           domain={{ y: [0, 100] }}
           bordered={true}
-          namespace={namespace}
+          namespace={activeNamespace}
           interval={interval}
         />
 
@@ -79,7 +89,7 @@ const PipelinesOverviewPage: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelinesRunsDurationCard
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               bordered={true}
@@ -91,7 +101,7 @@ const PipelinesOverviewPage: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelinesRunsTotalCard
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               bordered={true}
@@ -103,7 +113,7 @@ const PipelinesOverviewPage: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelinesRunsNumbersChart
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               domain={{ y: [0, 500] }}
@@ -114,7 +124,7 @@ const PipelinesOverviewPage: React.FC = () => {
       </div>
       <div className="pipelines-metrics__background">
         <PipelineRunsListPage
-          namespace={namespace}
+          namespace={activeNamespace}
           timespan={timespan}
           interval={interval}
         />

diff --git a/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx b/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx
@@ -1,31 +1,34 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flex, FlexItem } from '@patternfly/react-core';
+import {
+  useActiveNamespace,
+  useFlag,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { formatPrometheusDuration, parsePrometheusDuration } from './dateTime';
 import NameSpaceDropdown from './NamespaceDropdown';
 import TimeRangeDropdown from './TimeRangeDropdown';
 import RefreshDropdown from './RefreshDropdown';
 import { IntervalOptions, TimeRangeOptionsK8s, useQueryParams } from './utils';
-import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
 import PipelineRunsStatusCardK8s from './PipelineRunsStatusCardK8s';
 import PipelineRunsNumbersChartK8s from './PipelineRunsNumbersChartK8s';
 import PipelineRunsTotalCardK8s from './PipelineRunsTotalCardK8s';
 import PipelineRunsDurationCardK8s from './PipelineRunsDurationCardK8s';
 import PipelineRunsListPageK8s from './list-pages/PipelineRunsListPageK8s';
 import { K8sDataLimitationAlert } from './K8sDataLimitationAlert';
+import { FLAGS } from '../../types';
+import { ALL_NAMESPACES_KEY } from '../../consts';
+import AllProjectsPage from '../projects-list/AllProjectsPage';
 import './PipelinesOverview.scss';
 
 const PipelinesOverviewPageK8s: React.FC = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
+  const canListNS = useFlag(FLAGS.CAN_LIST_NS);
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
-  const [namespace, setNamespace] = React.useState(activeNamespace);
   const [timespan, setTimespan] = React.useState(parsePrometheusDuration('1d'));
   const [interval, setInterval] = React.useState(
     parsePrometheusDuration('30s'),
   );
-  React.useEffect(() => {
-    setActiveNamespace(namespace);
-  }, [namespace]);
 
   useQueryParams({
     key: 'refreshinterval',
@@ -47,6 +50,10 @@ const PipelinesOverviewPageK8s: React.FC = () => {
     loadFormat: parsePrometheusDuration,
   });
 
+  if (!canListNS && activeNamespace === ALL_NAMESPACES_KEY) {
+    return <AllProjectsPage pageTitle={t('Overview')} />;
+  }
+
   return (
     <>
       <div className="co-m-nav-title">
@@ -59,7 +66,10 @@ const PipelinesOverviewPageK8s: React.FC = () => {
       </div>
       <Flex className="project-dropdown-label__flex">
         <FlexItem>
-          <NameSpaceDropdown selected={namespace} setSelected={setNamespace} />
+          <NameSpaceDropdown
+            selected={activeNamespace}
+            setSelected={setActiveNamespace}
+          />
         </FlexItem>
         <FlexItem>
           <TimeRangeDropdown timespan={timespan} setTimespan={setTimespan} />
@@ -73,7 +83,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
           timespan={timespan}
           domain={{ y: [0, 100] }}
           bordered={true}
-          namespace={namespace}
+          namespace={activeNamespace}
           interval={interval}
         />
 
@@ -84,7 +94,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelineRunsDurationCardK8s
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               bordered={true}
@@ -96,7 +106,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelineRunsTotalCardK8s
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               bordered={true}
@@ -108,7 +118,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelineRunsNumbersChartK8s
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               domain={{ y: [0, 500] }}
@@ -119,7 +129,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
       </div>
       <div className="pipelines-metrics__background">
         <PipelineRunsListPageK8s
-          namespace={namespace}
+          namespace={activeNamespace}
           timespan={timespan}
           interval={interval}
         />

diff --git a/src/components/projects-list/AllProjectsPage.tsx b/src/components/projects-list/AllProjectsPage.tsx
@@ -10,11 +10,15 @@ import { useTranslation } from 'react-i18next';
 import ProjectsList from './ProjectsList';
 import './AllProjectsPage.scss';
 
-const AllProjectsPage = () => {
+interface AllProjectsPageProps {
+  pageTitle?: string;
+}
+
+const AllProjectsPage: React.FC<AllProjectsPageProps> = ({ pageTitle }) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   return (
     <>
-      <ListPageHeader title={t('Pipelines')} />
+      <ListPageHeader title={pageTitle || t('Pipelines')} />
       <TextContent className="cp-all-projects-page-description">
         <Text component={TextVariants.p}>
           {t('Select a Project to view its details')}