Hide piped disabled, show only when edit application (#5590)

Signed-off-by: kypham <hongkyhvnh@gmail.com>

Author: hongky-1994

web/src/components/application-form/application-form-manual-v0/index.tsx

@@ -215,8 +215,8 @@ const ApplicationFormManualV0: FC<ApplicationFormProps> = ({
 
   const classes = useStyles();
   const ps = useAppSelector((state) => selectAllPipeds(state));
-  const pipeds = ps
-    .filter((piped) => !piped.disabled)
+  const pipedOptions = ps
+    .filter((piped) => !piped.disabled || piped.id === detailApp?.pipedId)
     .sort((a, b) => sortFunc(a.name, b.name));
 
   const selectedPiped = useAppSelector(selectPipedById(values.pipedId));
@@ -278,12 +278,13 @@ const ApplicationFormManualV0: FC<ApplicationFormProps> = ({
                 pipedId: value,
               });
             }}
-            options={pipeds.map((piped) => ({
+            options={pipedOptions.map((piped) => ({
               label: `${piped.name} (${piped.id})`,
               value: piped.id,
+              disabled: piped.disabled,
             }))}
             required
-            disabled={isSubmitting || pipeds.length === 0}
+            disabled={isSubmitting || pipedOptions.length === 0}
           />
           <FormSelectInput
             id="platformProvider"

web/src/components/application-form/application-form-manual-v1/index.tsx

@@ -202,8 +202,8 @@ const ApplicationFormManualV1: FC<ApplicationFormProps> = ({
 
   const classes = useStyles();
   const ps = useAppSelector((state) => selectAllPipeds(state));
-  const pipeds = ps
-    .filter((piped) => !piped.disabled)
+  const pipedOptions = ps
+    .filter((piped) => !piped.disabled || piped.id === detailApp?.pipedId)
     .sort((a, b) => sortFunc(a.name, b.name));
 
   const selectedPiped = useAppSelector(selectPipedById(values.pipedId));
@@ -259,12 +259,13 @@ const ApplicationFormManualV1: FC<ApplicationFormProps> = ({
                 pipedId: value,
               });
             }}
-            options={pipeds.map((piped) => ({
+            options={pipedOptions.map((piped) => ({
               label: `${piped.name} (${piped.id})`,
               value: piped.id,
+              disabled: piped.disabled,
             }))}
             required
-            disabled={isSubmitting || pipeds.length === 0}
+            disabled={isSubmitting || pipedOptions.length === 0}
           />
 
           <FormControl variant="outlined">
@@ -275,7 +276,7 @@ const ApplicationFormManualV1: FC<ApplicationFormProps> = ({
               value={values.deployTargets.map(
                 (item) => `${item.deployTarget} - ${item.pluginName}`
               )}
-              disabled={isSubmitting || pipeds.length === 0}
+              disabled={isSubmitting || pipedOptions.length === 0}
               onChange={(_e, value) => {
                 const selected = deployTargetOptions.filter((item) =>
                   value.includes(item.value)

web/src/components/application-form/application-form-v1/index.tsx

@@ -147,8 +147,10 @@ const ApplicationFormSuggestionV1: FC<Props> = ({
     [apps, selectedPipedId]
   );
 
-  const pipeds = useMemo(() => {
-    return ps.sort((a, b) => sortFunc(a.name, b.name));
+  const pipedOptions = useMemo(() => {
+    return ps
+      .filter((piped) => !piped.disabled)
+      .sort((a, b) => sortFunc(a.name, b.name));
   }, [ps]);
 
   /**
@@ -171,10 +173,10 @@ const ApplicationFormSuggestionV1: FC<Props> = ({
    * Init selectedPipedId if there is only one piped
    */
   useEffect(() => {
-    if (pipeds.length === 1 && !selectedApp) {
-      setSelectedPipedId(pipeds[0].id);
+    if (pipedOptions.length === 1 && !selectedApp) {
+      setSelectedPipedId(pipedOptions[0].id);
     }
-  }, [pipeds, selectedApp]);
+  }, [pipedOptions, selectedApp]);
 
   /**
    * Init selectedApp if there is only one app
@@ -249,7 +251,7 @@ const ApplicationFormSuggestionV1: FC<Props> = ({
                       onSelectPiped(e.target.value as string);
                     }}
                   >
-                    {pipeds.map((e) => (
+                    {pipedOptions.map((e) => (
                       <MenuItem value={e.id} key={`piped-${e.id}`}>
                         {e.name} ({e.id})
                       </MenuItem>

web/src/components/form-select-input/index.tsx

@@ -81,7 +81,11 @@ const FormSelectInput = <T extends BaseOption>({
         disabled={disabled}
       >
         {options.map((op) => (
-          <MenuItem value={String(op.value)} key={String(op.value)}>
+          <MenuItem
+            value={String(op.value)}
+            key={String(op.value)}
+            disabled={!!op?.disabled}
+          >
             {getOptionLabel(op)}
           </MenuItem>
         ))}