Don't show clusters and templates permission errors if viewing apps/sources (#1509)

foot · ahussein3 · web-flow · commit b2cecc533917 · 2022-09-14T15:49:32.000+02:00
* Don't show clusters and templates permission erros if viewing apps/sources

- Refactors away the Clusters and Templates contexts

* Clusters is always a list

* Review feedback, choose better prop name

Co-authored-by: Ahmed Magdy &lt;ahussein@outlook.com&gt;
diff --git a/ui-cra/src/components/Applications/__tests__/index.test.tsx b/ui-cra/src/components/Applications/__tests__/index.test.tsx
@@ -6,11 +6,9 @@ import { CoreClientContextProvider, theme } from '@weaveworks/weave-gitops';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-import ClustersProvider from '../../../contexts/Clusters/Provider';
 import EnterpriseClientProvider from '../../../contexts/EnterpriseClient/Provider';
 import NotificationsProvider from '../../../contexts/Notifications/Provider';
 import RequestContextProvider from '../../../contexts/Request';
-import TemplatesProvider from '../../../contexts/Templates/Provider';
 import { muiTheme } from '../../../muiTheme';
 import {
   CoreClientMock,
@@ -41,8 +39,6 @@ describe('Applications index test', () => {
       [CoreClientContextProvider, { api }],
       [MemoryRouter],
       [NotificationsProvider],
-      [TemplatesProvider],
-      [ClustersProvider],
     ]);
   });
   it('renders table rows', async () => {
diff --git a/ui-cra/src/components/Clusters/ClusterDashboard.tsx b/ui-cra/src/components/Clusters/ClusterDashboard.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ThemeProvider } from '@material-ui/core/styles';
-import useClusters from '../../contexts/Clusters';
+import useClusters from '../../hooks/clusters';
 import { PageTemplate } from '../Layout/PageTemplate';
 import { SectionHeader } from '../Layout/SectionHeader';
 import { useHistory, useRouteMatch } from 'react-router-dom';
diff --git a/ui-cra/src/components/Clusters/Create/index.tsx b/ui-cra/src/components/Clusters/Create/index.tsx
@@ -1,7 +1,7 @@
 import Grid from '@material-ui/core/Grid';
 import { useParams } from 'react-router-dom';
-import useClusters from '../../../contexts/Clusters';
-import useTemplates from '../../../contexts/Templates';
+import useClusters from '../../../hooks/clusters';
+import useTemplates from '../../../hooks/templates';
 import { ContentWrapper, Title } from '../../Layout/ContentWrapper';
 import { PageTemplate } from '../../Layout/PageTemplate';
 import { SectionHeader } from '../../Layout/SectionHeader';
diff --git a/ui-cra/src/components/Clusters/DashboardsList.tsx b/ui-cra/src/components/Clusters/DashboardsList.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
-import useClusters from './../../contexts/Clusters';
+import useClusters from '../../hooks/clusters';
 import { List, ListItem } from '@material-ui/core';
 import { GitopsClusterEnriched } from '../../types/custom';
 import { isAllowedLink } from '@weaveworks/weave-gitops';
diff --git a/ui-cra/src/components/Clusters/Delete.tsx b/ui-cra/src/components/Clusters/Delete.tsx
@@ -8,7 +8,7 @@ import {
 } from '@material-ui/core';
 import styled from 'styled-components';
 import { CloseIconButton } from '../../assets/img/close-icon-button';
-import useClusters from '../../contexts/Clusters';
+import useClusters from '../../hooks/clusters';
 import useNotifications from '../../contexts/Notifications';
 import { Input } from '../../utils/form';
 import { Loader } from '../Loader';
@@ -43,21 +43,21 @@ interface Props {
   formData: any;
   setFormData: Dispatch<React.SetStateAction<any>>;
   selectedCapiClusters: ClusterNamespacedName[];
-  setOpenDeletePR: Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
   prDefaults: PRDefaults;
 }
 
 export const DeleteClusterDialog: FC<Props> = ({
   formData,
   setFormData,
   selectedCapiClusters,
-  setOpenDeletePR,
+  onClose,
   prDefaults,
 }) => {
   const [showAuthDialog, setShowAuthDialog] = useState(false);
   const [enableCreatePR, setEnableCreatePR] = useState<boolean>(false);
 
-  const { deleteCreatedClusters, loading, setSelectedClusters } = useClusters();
+  const { deleteCreatedClusters, loading } = useClusters();
   const { setNotifications } = useNotifications();
 
   const handleChangeBranchName = useCallback(
@@ -140,10 +140,9 @@ export const DeleteClusterDialog: FC<Props> = ({
   const cleanUp = useCallback(() => {
     clearCallbackState();
     setShowAuthDialog(false);
-    setSelectedClusters([]);
     setFormData(prDefaults);
-    setOpenDeletePR(false);
-  }, [setSelectedClusters, setFormData, setOpenDeletePR, prDefaults]);
+    onClose();
+  }, [onClose, setFormData, prDefaults]);
 
   return (
     <ThemeProvider theme={localEEMuiTheme}>
diff --git a/ui-cra/src/components/Clusters/Edit/index.tsx b/ui-cra/src/components/Clusters/Edit/index.tsx
@@ -1,8 +1,8 @@
 import Grid from '@material-ui/core/Grid';
 import { FC } from 'react';
 import { Redirect, useParams } from 'react-router-dom';
-import useClusters from '../../../contexts/Clusters';
-import useTemplates from '../../../contexts/Templates';
+import useClusters from '../../../hooks/clusters';
+import useTemplates from '../../../hooks/templates';
 import { GitopsClusterEnriched } from '../../../types/custom';
 import { ContentWrapper, Title } from '../../Layout/ContentWrapper';
 import { PageTemplate } from '../../Layout/PageTemplate';
diff --git a/ui-cra/src/components/Clusters/Form/index.tsx b/ui-cra/src/components/Clusters/Form/index.tsx
@@ -26,7 +26,7 @@ import {
 import useNotifications from '../../../contexts/Notifications';
 import useProfiles from '../../../contexts/Profiles';
 import ProfilesProvider from '../../../contexts/Profiles/Provider';
-import useTemplates from '../../../contexts/Templates';
+import useTemplates from '../../../hooks/templates';
 import { useListConfig } from '../../../hooks/versions';
 import { localEEMuiTheme } from '../../../muiTheme';
 import {
diff --git a/ui-cra/src/components/Clusters/index.tsx b/ui-cra/src/components/Clusters/index.tsx
@@ -25,7 +25,7 @@ import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { ClusterNamespacedName } from '../../cluster-services/cluster_services.pb';
-import useClusters from '../../contexts/Clusters';
+import useClusters from '../../hooks/clusters';
 import useNotifications from '../../contexts/Notifications';
 import { useListConfig } from '../../hooks/versions';
 import { GitopsClusterEnriched, PRDefaults } from '../../types/custom';
@@ -197,11 +197,17 @@ interface FormData {
 }
 
 const MCCP: FC = () => {
-  const { clusters, isLoading, count, selectedClusters, setSelectedClusters } =
-    useClusters();
+  const { clusters, isLoading, count } = useClusters();
+  const [selectedClusters, setSelectedClusters] = useState<
+    ClusterNamespacedName[]
+  >([]);
   const { setNotifications } = useNotifications();
   const [openConnectInfo, setOpenConnectInfo] = useState<boolean>(false);
   const [openDeletePR, setOpenDeletePR] = useState<boolean>(false);
+  const handleClose = useCallback(() => {
+    setOpenDeletePR(false);
+    setSelectedClusters([]);
+  }, [setOpenDeletePR, setSelectedClusters]);
   const { data, repoLink } = useListConfig();
   const repositoryURL = data?.repositoryURL || '';
   const capiClusters = useMemo(
@@ -399,7 +405,7 @@ const MCCP: FC = () => {
                   formData={formData}
                   setFormData={setFormData}
                   selectedCapiClusters={selectedCapiClusters}
-                  setOpenDeletePR={setOpenDeletePR}
+                  onClose={handleClose}
                   prDefaults={PRdefaults}
                 />
               )}
diff --git a/ui-cra/src/components/PolicyViolations/ViolationDetails/index.tsx b/ui-cra/src/components/PolicyViolations/ViolationDetails/index.tsx
@@ -6,7 +6,7 @@ import { ContentWrapper } from '../../Layout/ContentWrapper';
 import { Alert } from '@material-ui/lab';
 import { LoadingPage } from '@weaveworks/weave-gitops';
 import ViolationDetails from './ViolationDetails';
-import useClusters from '../../../contexts/Clusters';
+import useClusters from '../../../hooks/clusters';
 import {
   useCountPolicyValidations,
   useGetPolicyValidationDetails,
diff --git a/ui-cra/src/components/PolicyViolations/index.tsx b/ui-cra/src/components/PolicyViolations/index.tsx
@@ -2,7 +2,7 @@ import { PageTemplate } from '../Layout/PageTemplate';
 import { SectionHeader } from '../Layout/SectionHeader';
 import { ContentWrapper } from '../Layout/ContentWrapper';
 import { FieldsType, PolicyViolationsTable } from './Table';
-import useClusters from './../../contexts/Clusters';
+import useClusters from '../../hooks/clusters';
 import { useListPolicyValidations } from '../../contexts/PolicyViolations';
 import { Alert } from '@material-ui/lab';
 import { LoadingPage } from '@weaveworks/weave-gitops';
diff --git a/ui-cra/src/components/ResponsiveDrawer.tsx b/ui-cra/src/components/ResponsiveDrawer.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
-import ClustersProvider from '../contexts/Clusters/Provider';
 import MCCP from './Clusters';
 import TemplatesDashboard from './Templates';
 import { Navigation } from './Navigation';
@@ -25,7 +24,6 @@ import {
   V2Routes,
 } from '@weaveworks/weave-gitops';
 import styled from 'styled-components';
-import TemplatesProvider from '../contexts/Templates/Provider';
 import NotificationsProvider from '../contexts/Notifications/Provider';
 import Compose from './ProvidersCompose';
 import Box from '@material-ui/core/Box';
@@ -191,9 +189,7 @@ const App = () => {
   };
 
   return (
-    <Compose
-      components={[NotificationsProvider, TemplatesProvider, ClustersProvider]}
-    >
+    <Compose components={[NotificationsProvider]}>
       <div className={classes.root}>
         <CssBaseline />
         <Box className={classes.menuButtonBox}>
diff --git a/ui-cra/src/components/Templates/index.tsx b/ui-cra/src/components/Templates/index.tsx
@@ -2,8 +2,8 @@ import React, { FC, useCallback, useState } from 'react';
 import { PageTemplate } from '../Layout/PageTemplate';
 import TemplateCard from './Card';
 import Grid from '@material-ui/core/Grid';
-import useClusters from '../../contexts/Clusters';
-import useTemplates from '../../contexts/Templates';
+import useClusters from '../../hooks/clusters';
+import useTemplates from '../../hooks/templates';
 import { SectionHeader } from '../Layout/SectionHeader';
 import { ContentWrapper } from '../Layout/ContentWrapper';
 import styled from 'styled-components';
diff --git a/ui-cra/src/contexts/Clusters/index.tsx b/ui-cra/src/contexts/Clusters/index.tsx
diff --git a/ui-cra/src/contexts/Templates/index.tsx b/ui-cra/src/contexts/Templates/index.tsx
diff --git a/ui-cra/src/hooks/clusters.tsx b/ui-cra/src/hooks/clusters.tsx
@@ -1,31 +1,52 @@
-import React, { FC, useCallback, useContext, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { request } from '../../utils/request';
-import { Clusters } from './index';
-import useNotifications from './../Notifications';
+import { request } from '../utils/request';
+import useNotifications from '../contexts/Notifications';
 import fileDownload from 'js-file-download';
-import { EnterpriseClientContext } from '../EnterpriseClient';
-import {
-  ClusterNamespacedName,
-  ListGitopsClustersResponse,
-} from '../../cluster-services/cluster_services.pb';
+import { EnterpriseClientContext } from '../contexts/EnterpriseClient';
+import { ListGitopsClustersResponse } from '../cluster-services/cluster_services.pb';
 import {
   GitopsClusterEnriched,
   DeleteClustersPRRequestEnriched,
-} from '../../types/custom';
+} from '../types/custom';
 
 const CLUSTERS_POLL_INTERVAL = 5000;
 
-const ClustersProvider: FC = ({ children }) => {
+const useClusters = () => {
   const [loading, setLoading] = useState<boolean>(false);
-  const [clusters, setClusters] = useState<GitopsClusterEnriched[]>([]);
-  const [count, setCount] = useState<number | null>(null);
-  const [selectedClusters, setSelectedClusters] = useState<
-    ClusterNamespacedName[]
-  >([]);
   const { notifications, setNotifications } = useNotifications();
   const { api } = useContext(EnterpriseClientContext);
 
+  const onError = (error: Error) => {
+    if (
+      error &&
+      notifications?.some(
+        notification => error.message === notification.message.text,
+      ) === false
+    ) {
+      setNotifications([
+        ...notifications,
+        { message: { text: error.message }, variant: 'danger' },
+      ]);
+    }
+  };
+
+  const { isLoading, data } = useQuery<ListGitopsClustersResponse, Error>(
+    'clusters',
+    () => api.ListGitopsClusters({}),
+    {
+      keepPreviousData: true,
+      refetchInterval: CLUSTERS_POLL_INTERVAL,
+      onError,
+    },
+  );
+
+  const clusters = useMemo(
+    () => data?.gitopsClusters || [],
+    [data],
+  ) as GitopsClusterEnriched[];
+  const count: number | null = data?.gitopsClusters?.length || null;
+
   const getCluster = (clusterName: string) =>
     clusters?.find(cluster => cluster.name === clusterName) || null;
 
@@ -80,55 +101,16 @@ const ClustersProvider: FC = ({ children }) => {
     },
     [setNotifications],
   );
-
-  const onError = (error: Error) => {
-    if (
-      error &&
-      notifications?.some(
-        notification => error.message === notification.message.text,
-      ) === false
-    ) {
-      setNotifications([
-        ...notifications,
-        { message: { text: error.message }, variant: 'danger' },
-      ]);
-    }
+  return {
+    clusters,
+    isLoading,
+    count,
+    loading,
+    deleteCreatedClusters,
+    getKubeconfig,
+    getDashboardAnnotations,
+    getCluster,
   };
-
-  const onSuccess = (data: ListGitopsClustersResponse) => {
-    setClusters(data.gitopsClusters as GitopsClusterEnriched[]);
-    setCount(data.total as number);
-  };
-
-  const { isLoading } = useQuery<ListGitopsClustersResponse, Error>(
-    'clusters',
-    () => api.ListGitopsClusters({}),
-    {
-      keepPreviousData: true,
-      refetchInterval: CLUSTERS_POLL_INTERVAL,
-      onSuccess,
-      onError,
-    },
-  );
-
-  return (
-    <Clusters.Provider
-      value={{
-        clusters,
-        isLoading,
-        count,
-        loading,
-        selectedClusters,
-        setSelectedClusters,
-        deleteCreatedClusters,
-        getKubeconfig,
-        getDashboardAnnotations,
-        getCluster,
-      }}
-    >
-      {children}
-    </Clusters.Provider>
-  );
 };
 
-export default ClustersProvider;
+export default useClusters;
diff --git a/ui-cra/src/hooks/templates.tsx b/ui-cra/src/hooks/templates.tsx
diff --git a/ui-cra/src/utils/test-utils.tsx b/ui-cra/src/utils/test-utils.tsx
