feat: Separates data into static,dynamic on stage,cdpipeline pages (#40)

Jira: EPMDEDP-12606
Related: #40
Change-Id: I66f45624e7c169cc45c97e73b165b4b88368e090

src/pages/edp-cdpipeline-details/components/CDPipelineApplicationsTable/index.tsx

@@ -1,12 +1,12 @@
 import { Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { Table } from '../../../../components/Table';
-import { useEnrichedApplicationsContext } from '../../providers/EnrichedApplications/hooks';
+import { useDynamicDataContext } from '../../providers/DynamicData/hooks';
 import { useColumns } from './hooks/useColumns';
 
 export const CDPipelineApplicationsTable = () => {
     const columns = useColumns();
-    const { enrichedApplications } = useEnrichedApplicationsContext();
+    const { enrichedApplications } = useDynamicDataContext();
 
     return (
         <Grid container spacing={1}>

src/pages/edp-cdpipeline-details/components/StageList/hooks/useColumns.tsx

@@ -20,7 +20,7 @@ import { GENERATE_URL_SERVICE } from '../../../../../services/url';
 import { capitalizeFirstLetter } from '../../../../../utils/format/capitalizeFirstLetter';
 import { rem } from '../../../../../utils/styling/rem';
 import { routeEDPStageDetails } from '../../../../edp-stage-details/route';
-import { useEnrichedApplicationsContext } from '../../../providers/EnrichedApplications/hooks';
+import { useDynamicDataContext } from '../../../providers/DynamicData/hooks';
 import { EDPCDPipelineRouteParams } from '../../../types';
 
 export const useColumns = (
@@ -30,7 +30,7 @@ export const useColumns = (
         useResourceActionListContext<EDPCDPipelineStageKubeObjectInterface>();
     const { name: CDPipelineName, namespace } = useParams<EDPCDPipelineRouteParams>();
     const { data: EDPComponentsURLS } = useEDPComponentsURLsQuery(namespace);
-    const { enrichedApplications } = useEnrichedApplicationsContext();
+    const { enrichedApplications } = useDynamicDataContext();
 
     const ciTool = enrichedApplications?.[0]?.application?.spec.ciTool;
 

src/pages/edp-cdpipeline-details/components/StageList/index.tsx

@@ -6,23 +6,18 @@ import { useDialogContext } from '../../../../providers/Dialog/hooks';
 import { FORM_MODES } from '../../../../types/forms';
 import { CREATE_EDIT_STAGE_DIALOG_NAME } from '../../../../widgets/CreateEditStage/constants';
 import { CreateEditStageDialogForwardedProps } from '../../../../widgets/CreateEditStage/types';
-import { useCDPipelineContext } from '../../providers/CDPipeline/hooks';
-import { useCDPipelineStagesContext } from '../../providers/CDPipelineStages/hooks';
-import { useEnrichedApplicationsContext } from '../../providers/EnrichedApplications/hooks';
+import { useDynamicDataContext } from '../../providers/DynamicData/hooks';
 import { TableHeaderActions } from '../TableHeaderActions';
 import { useColumns } from './hooks/useColumns';
 import { useStyles } from './styles';
 
 export const StageList = () => {
     const classes = useStyles();
     const columns = useColumns(classes);
-    const { stages } = useCDPipelineStagesContext();
-    const { CDPipeline } = useCDPipelineContext();
+    const { stages, CDPipeline, enrichedApplications } = useDynamicDataContext();
 
     const { setDialog } = useDialogContext();
 
-    const { enrichedApplications } = useEnrichedApplicationsContext();
-
     const createEditStageDialogForwardedProps: CreateEditStageDialogForwardedProps = React.useMemo(
         () => ({
             mode: FORM_MODES.CREATE,

src/pages/edp-cdpipeline-details/components/TableHeaderActions/index.tsx

@@ -6,13 +6,11 @@ import { useDialogContext } from '../../../../providers/Dialog/hooks';
 import { FORM_MODES } from '../../../../types/forms';
 import { CREATE_EDIT_STAGE_DIALOG_NAME } from '../../../../widgets/CreateEditStage/constants';
 import { CreateEditStageDialogForwardedProps } from '../../../../widgets/CreateEditStage/types';
-import { useCDPipelineContext } from '../../providers/CDPipeline/hooks';
-import { useEnrichedApplicationsContext } from '../../providers/EnrichedApplications/hooks';
+import { useDynamicDataContext } from '../../providers/DynamicData/hooks';
 import { TableHeaderActionsProps } from './types';
 
 export const TableHeaderActions = ({ CDPipelineStages }: TableHeaderActionsProps) => {
-    const { CDPipeline } = useCDPipelineContext();
-    const { enrichedApplications } = useEnrichedApplicationsContext();
+    const { CDPipeline, enrichedApplications } = useDynamicDataContext();
     const ciTool = enrichedApplications?.[0]?.application?.spec.ciTool;
     const { setDialog } = useDialogContext<CreateEditStageDialogForwardedProps>();
 

src/pages/edp-cdpipeline-details/page.tsx

@@ -3,9 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import ErrorBoundary from '../../components/ErrorBoundary';
 import { DialogContextProvider } from '../../providers/Dialog';
 import { ResourceActionListContextProvider } from '../../providers/ResourceActionList';
-import { CDPipelineContextProvider } from './providers/CDPipeline/provider';
-import { CDPipelineStagesContextProvider } from './providers/CDPipelineStages/provider';
-import { EnrichedApplicationsContextProvider } from './providers/EnrichedApplications/provider';
+import { DynamicDataContextProvider } from './providers/DynamicData/provider';
 import { PageView } from './view';
 
 export default function () {
@@ -23,15 +21,11 @@ export default function () {
         <QueryClientProvider client={queryClient}>
             <ErrorBoundary>
                 <DialogContextProvider>
-                    <CDPipelineContextProvider>
-                        <CDPipelineStagesContextProvider>
-                            <EnrichedApplicationsContextProvider>
-                                <ResourceActionListContextProvider>
-                                    <PageView />
-                                </ResourceActionListContextProvider>
-                            </EnrichedApplicationsContextProvider>
-                        </CDPipelineStagesContextProvider>
-                    </CDPipelineContextProvider>
+                    <ResourceActionListContextProvider>
+                        <DynamicDataContextProvider>
+                            <PageView />
+                        </DynamicDataContextProvider>
+                    </ResourceActionListContextProvider>
                 </DialogContextProvider>
             </ErrorBoundary>
         </QueryClientProvider>

src/pages/edp-cdpipeline-details/providers/DynamicData/context.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DynamicDataContextProviderValue } from './types';
+
+export const DynamicDataContext = React.createContext<DynamicDataContextProviderValue>({
+    stages: null,
+    CDPipeline: null,
+    enrichedApplications: null,
+});

src/pages/edp-cdpipeline-details/providers/DynamicData/hooks.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DynamicDataContext } from './context';
+
+export const useDynamicDataContext = () => React.useContext(DynamicDataContext);

src/pages/edp-cdpipeline-details/providers/DynamicData/provider.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useStreamCDPipeline } from '../../../../k8s/EDPCDPipeline/hooks/useStreamCDPipeline';
+import { useStreamStagesByCDPipelineName } from '../../../../k8s/EDPCDPipelineStage/hooks/useStreamStagesByCDPipelineName';
+import { useEnrichedApplicationsWithImageStreamsQuery } from '../../../../k8s/EDPCodebase/hooks/useEnrichedApplicationsWithImageStreamsQuery';
+import { EDPCDPipelineRouteParams } from '../../types';
+import { DynamicDataContext } from './context';
+
+export const DynamicDataContextProvider: React.FC = ({ children }) => {
+    const { namespace, name } = useParams<EDPCDPipelineRouteParams>();
+
+    const CDPipeline = useStreamCDPipeline({
+        namespace,
+        CDPipelineMetadataName: name,
+    });
+
+    const {
+        isLoading: isEnrichedApplicationsWithImageStreamsQueryLoading,
+        data: enrichedApplications,
+    } = useEnrichedApplicationsWithImageStreamsQuery({
+        props: {
+            CDPipelineData: CDPipeline,
+        },
+    });
+
+    const enrichedApplicationsValue = React.useMemo(
+        () => !isEnrichedApplicationsWithImageStreamsQueryLoading && enrichedApplications,
+        [enrichedApplications, isEnrichedApplicationsWithImageStreamsQueryLoading]
+    );
+
+    const stages = useStreamStagesByCDPipelineName({
+        namespace,
+        CDPipelineMetadataName: name,
+        select: React.useCallback(data => {
+            return data.sort((a, b) => a.spec.order - b.spec.order);
+        }, []),
+    });
+
+    const DataContextValue = React.useMemo(
+        () => ({
+            CDPipeline,
+            stages,
+            enrichedApplications: enrichedApplicationsValue,
+        }),
+        [CDPipeline, stages, enrichedApplicationsValue]
+    );
+
+    return (
+        <DynamicDataContext.Provider value={DataContextValue}>
+            {children}
+        </DynamicDataContext.Provider>
+    );
+};

src/pages/edp-cdpipeline-details/providers/DynamicData/types.ts

@@ -0,0 +1,9 @@
+import { EDPCDPipelineKubeObjectInterface } from '../../../../k8s/EDPCDPipeline/types';
+import { EDPCDPipelineStageKubeObjectInterface } from '../../../../k8s/EDPCDPipelineStage/types';
+import { EnrichedApplicationWithItsImageStreams } from '../../../../k8s/EDPCodebase/hooks/useEnrichedApplicationsWithImageStreamsQuery';
+
+export interface DynamicDataContextProviderValue {
+    CDPipeline: EDPCDPipelineKubeObjectInterface;
+    stages: EDPCDPipelineStageKubeObjectInterface[];
+    enrichedApplications: EnrichedApplicationWithItsImageStreams[];
+}

src/pages/edp-cdpipeline-details/view.tsx

@@ -16,18 +16,14 @@ import { CDPipelineActions } from './components/CDPipelineActions';
 import { CDPipelineApplicationsTable } from './components/CDPipelineApplicationsTable';
 import { CDPipelineMetadataTable } from './components/CDPipelineMetadataTable';
 import { StageList } from './components/StageList';
-import { useCDPipelineContext } from './providers/CDPipeline/hooks';
-import { useCDPipelineStagesContext } from './providers/CDPipelineStages/hooks';
-import { useEnrichedApplicationsContext } from './providers/EnrichedApplications/hooks';
+import { useDynamicDataContext } from './providers/DynamicData/hooks';
 import { EDPCDPipelineRouteParams } from './types';
 
 export const PageView = () => {
     const { name, namespace } = useParams<EDPCDPipelineRouteParams>();
 
-    const { CDPipeline } = useCDPipelineContext();
-    const { stages } = useCDPipelineStagesContext();
+    const { CDPipeline, stages, enrichedApplications } = useDynamicDataContext();
     const { data: EDPComponentsURLS } = useEDPComponentsURLsQuery(namespace);
-    const { enrichedApplications } = useEnrichedApplicationsContext();
 
     const ciTool = enrichedApplications?.[0]?.application?.spec.ciTool;
 

src/pages/edp-stage-details/components/Applications/hooks/useColumns.tsx

@@ -25,6 +25,7 @@ import { useEDPComponentsURLsQuery } from '../../../../../k8s/EDPComponent/hooks
 import { GENERATE_URL_SERVICE } from '../../../../../services/url';
 import { routeEDPComponentDetails } from '../../../../edp-component-details/route';
 import { useDataContext } from '../../../providers/Data/hooks';
+import { useDynamicDataContext } from '../../../providers/DynamicData/hooks';
 import { EDPStageDetailsRouteParams, EnrichedApplicationWithArgoApplication } from '../../../types';
 import { ImageStreamTagsSelect } from '../components/ImageStreamTagsSelect';
 import { ValuesOverrideCheckbox } from '../components/ValuesOverrideCheckbox';
@@ -40,7 +41,8 @@ export const useColumns = (
     const theme = useTheme();
     const { namespace, CDPipelineName } = useParams<EDPStageDetailsRouteParams>();
     const { data: EDPComponentsURLS } = useEDPComponentsURLsQuery(namespace);
-    const { stage, gitOpsCodebase } = useDataContext();
+    const { gitOpsCodebase } = useDataContext();
+    const { stage } = useDynamicDataContext();
     const _createArgoCDLink = React.useCallback(
         (argoApplication: ApplicationKubeObjectInterface) =>
             GENERATE_URL_SERVICE.createArgoCDApplicationLink(

src/pages/edp-stage-details/components/Applications/index.tsx

@@ -12,6 +12,7 @@ import { getDeployedVersion } from '../../../../k8s/Application/utils/getDeploye
 import { useGitServerListQuery } from '../../../../k8s/EDPGitServer/hooks/useGitServerListQuery';
 import { mapEvery } from '../../../../utils/loops/mapEvery';
 import { useDataContext } from '../../providers/Data/hooks';
+import { useDynamicDataContext } from '../../providers/DynamicData/hooks';
 import { EnrichedApplicationWithArgoApplication } from '../../types';
 import { useColumns } from './hooks/useColumns';
 import { useUpperColumns } from './hooks/useUpperColumns';
@@ -36,7 +37,8 @@ export const Applications = ({
     enrichedApplicationsWithArgoApplications,
     qualityGatePipelineIsRunning,
 }: ApplicationsProps) => {
-    const { CDPipeline, stage, gitOpsCodebase } = useDataContext();
+    const { CDPipeline, gitOpsCodebase } = useDataContext();
+    const { stage } = useDynamicDataContext();
     const { data: gitServers } = useGitServerListQuery({});
     const { getValues, setValue, resetField, trigger } = useFormContext();
     const [selected, setSelected] = React.useState<string[]>([]);

src/pages/edp-stage-details/components/CustomGates/index.tsx

@@ -10,7 +10,7 @@ import { usePipelineByTypeListQuery } from '../../../../k8s/Pipeline/hooks/usePi
 import { useCreateDeployPipelineRun } from '../../../../k8s/PipelineRun/hooks/useCreateDeployPipelineRun';
 import { FormSelect } from '../../../../providers/Form/components/FormSelect';
 import { parseTektonResourceStatus } from '../../../../utils/parseTektonResourceStatus';
-import { useDataContext } from '../../providers/Data/hooks';
+import { useDynamicDataContext } from '../../providers/DynamicData/hooks';
 import { EDPStageDetailsRouteParams } from '../../types';
 import { useColumns } from './hooks/useColumns';
 import { CustomGatesProps } from './types';
@@ -25,7 +25,7 @@ export const CustomGates = ({
 }: CustomGatesProps) => {
     const { namespace, CDPipelineName } = useParams<EDPStageDetailsRouteParams>();
     const columns = useColumns();
-    const { stage } = useDataContext();
+    const { stage } = useDynamicDataContext();
     const stageSpecName = stage?.spec.name;
 
     const {