AMD-902 [frontend] feat: not show step alert when step value is empty…

… string
au-heartbeat · Apr 16, 2024 · 7525fea · 7525fea
1 parent becf6c8
commit 7525fea
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/.../src/containers/MetricsStep/DeploymentFrequencySettings/PipelineMetricSelection/index.tsx b/.../src/containers/MetricsStep/DeploymentFrequencySettings/PipelineMetricSelection/index.tsx
@@ -99,7 +99,7 @@ export const PipelineMetricSelection = ({
     isLoadingRef.current = isLoading;
   }, [isLoading, setLoadingCompletedNumber, totalPipelineNumber, shouldGetPipelineConfig]);
 
-  const handleGetPipelineData = (_pipelineName: string, flag = false) => {
+  const handleGetPipelineData = (_pipelineName: string) => {
     const { params, buildId, organizationId, pipelineType, token } = selectStepsParams(
       store.getState(),
       organization,
@@ -121,7 +121,7 @@ export const PipelineMetricSelection = ({
             pipelineCrews,
           }),
         );
-        res?.haveStep && dispatch(updatePipelineStep({ steps, id, type, branches, pipelineCrews, flag }));
+        res?.haveStep && dispatch(updatePipelineStep({ steps, id, type, branches, pipelineCrews }));
         dispatch(updateShouldGetPipelineConfig(false));
       }
       res && setIsShowNoStepWarning(!res.haveStep);

diff --git a/frontend/src/containers/MetricsStep/DeploymentFrequencySettings/SingleSelection/index.tsx b/frontend/src/containers/MetricsStep/DeploymentFrequencySettings/SingleSelection/index.tsx
@@ -17,7 +17,7 @@ interface Props {
   id: number;
   isError?: boolean;
   errorText?: string;
-  onGetSteps?: (pipelineName: string, flag: boolean) => void;
+  onGetSteps?: (pipelineName: string) => void;
   onUpDatePipeline: (id: number, label: string, value: string | []) => void;
 }
 
@@ -40,7 +40,7 @@ export const SingleSelection = ({
     if (onGetSteps) {
       onUpDatePipeline(id, 'Step', '');
       onUpDatePipeline(id, 'Branches', []);
-      onGetSteps(value, true);
+      onGetSteps(value);
       dispatch(initSinglePipelineListBranches(id));
     }
     onUpDatePipeline(id, label, value);

diff --git a/frontend/src/context/Metrics/metricsSlice.ts b/frontend/src/context/Metrics/metricsSlice.ts
@@ -18,6 +18,7 @@ export interface IPipelineConfig {
   pipelineName: string;
   step: string;
   branches: string[];
+  isStepSelected?: boolean;
 }
 
 export interface IReworkConfig {
@@ -30,6 +31,7 @@ export interface IPipelineWarningMessageConfig {
   organization: string | null;
   pipelineName: string | null;
   step: string | null;
+  isStepSelected?: boolean;
 }
 
 export interface ICycleTimeSetting {
@@ -483,7 +485,7 @@ export const metricsSlice = createSlice({
 
       const uniqueResponse = (res: IPipelineConfig[]) => {
         const itemsOmitId = uniqWith(
-          res.map((value) => omit(value, ['id'])),
+          res.map((value) => omit(value, ['id', 'isStepSelected'])),
           isEqual,
         );
         let removeEmpty = itemsOmitId;
@@ -506,21 +508,22 @@ export const metricsSlice = createSlice({
         const hasPipeline = pipelines.filter(({ id }) => id !== undefined).length;
         const res =
           pipelines.length && hasPipeline
-            ? pipelines.map(({ id, organization, pipelineName, step, branches }) => {
+            ? pipelines.map(({ id, organization, pipelineName, step, branches, isStepSelected }) => {
                 const matchedOrganization =
                   orgNames.find((i) => (i as string).toLowerCase() === organization.toLowerCase()) || '';
                 const matchedPipelineName = filteredPipelineNames(organization).includes(pipelineName)
                   ? pipelineName
                   : '';
                 return {
                   id,
+                  isStepSelected: isStepSelected ? isStepSelected : false,
                   organization: matchedOrganization,
                   pipelineName: matchedPipelineName,
                   step: matchedPipelineName ? step : '',
                   branches: matchedPipelineName ? branches : [],
                 };
               })
-            : [{ id: 0, organization: '', pipelineName: '', step: '', branches: [] }];
+            : [{ id: 0, organization: '', pipelineName: '', step: '', branches: [], isStepSelected: false }];
         return uniqueResponse(res);
       };
       const createPipelineWarning = ({ id, organization, pipelineName }: IPipelineConfig) => {
@@ -555,21 +558,27 @@ export const metricsSlice = createSlice({
       state.deploymentWarningMessage = getPipelinesWarningMessage(deploymentSettings);
     },
     updatePipelineStep: (state, action) => {
-      const { steps, id, branches, pipelineCrews, flag } = action.payload;
+      const { steps, id, branches, pipelineCrews } = action.payload;
       const selectedPipelineStep = state.deploymentFrequencySettings.find((pipeline) => pipeline.id === id)?.step ?? '';
 
       state.pipelineCrews = intersection(pipelineCrews, state.pipelineCrews);
-      const stepWarningMessage = (selectedStep: string) =>
-        steps.includes(selectedStep) || flag || selectedStep === '' ? null : MESSAGE.STEP_WARNING;
+      const stepWarningMessage = (selectedStep: string, isStepSelected = false) =>
+        steps.includes(selectedStep) || isStepSelected ? null : MESSAGE.STEP_WARNING;
 
-      const validStep = (selectedStep: string): string => (steps.includes(selectedStep) ? selectedStep : '');
+      const validStep = (pipeline: IPipelineConfig): string => {
+        const selectedStep = pipeline.step;
+        if (!selectedStep) {
+          pipeline.isStepSelected = true;
+        }
+        return steps.includes(selectedStep) ? selectedStep : '';
+      };
 
       const validBranches = (selectedBranches: string[]): string[] =>
         _.filter(branches, (branch) => selectedBranches.includes(branch));
 
       const getPipelineSettings = (pipelines: IPipelineConfig[]) => {
         return pipelines.map((pipeline) => {
-          const filterValidStep = validStep(pipeline.step);
+          const filterValidStep = validStep(pipeline);
           return pipeline.id === id
             ? {
                 ...pipeline,
@@ -580,19 +589,26 @@ export const metricsSlice = createSlice({
         });
       };
 
-      const getStepWarningMessage = (pipelines: IPipelineWarningMessageConfig[]) => {
-        return pipelines.map((pipeline) =>
-          pipeline?.id === id
+      const getStepWarningMessage = (
+        pipelinesWarning: IPipelineWarningMessageConfig[],
+        pipelinesValue: IPipelineConfig[],
+      ) => {
+        return pipelinesWarning.map((pipeline) => {
+          const matchedPipeline = pipelinesValue.filter((pipeline) => pipeline.id === id)[0];
+          return pipeline?.id === id
             ? {
                 ...pipeline,
-                step: stepWarningMessage(selectedPipelineStep),
+                step: stepWarningMessage(selectedPipelineStep, matchedPipeline.isStepSelected),
               }
-            : pipeline,
-        );
+            : pipeline;
+        });
       };
 
+      state.deploymentWarningMessage = getStepWarningMessage(
+        state.deploymentWarningMessage,
+        state.deploymentFrequencySettings,
+      );
       state.deploymentFrequencySettings = getPipelineSettings(state.deploymentFrequencySettings);
-      state.deploymentWarningMessage = getStepWarningMessage(state.deploymentWarningMessage);
     },
 
     deleteADeploymentFrequencySetting: (state, action) => {