diff --git a/web/src/components/application-form/application-form-manual-v0/index.tsx b/web/src/components/application-form/application-form-manual-v0/index.tsx index b1e8294cb6..f7d70050ea 100644 --- a/web/src/components/application-form/application-form-manual-v0/index.tsx +++ b/web/src/components/application-form/application-form-manual-v0/index.tsx @@ -215,8 +215,8 @@ const ApplicationFormManualV0: FC = ({ 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 = ({ 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} /> = ({ 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 = ({ 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} /> @@ -275,7 +276,7 @@ const ApplicationFormManualV1: FC = ({ 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) diff --git a/web/src/components/application-form/application-form-v1/index.tsx b/web/src/components/application-form/application-form-v1/index.tsx index 926573783f..cf65785d14 100644 --- a/web/src/components/application-form/application-form-v1/index.tsx +++ b/web/src/components/application-form/application-form-v1/index.tsx @@ -147,8 +147,10 @@ const ApplicationFormSuggestionV1: FC = ({ [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 = ({ * 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 = ({ onSelectPiped(e.target.value as string); }} > - {pipeds.map((e) => ( + {pipedOptions.map((e) => ( {e.name} ({e.id}) diff --git a/web/src/components/form-select-input/index.tsx b/web/src/components/form-select-input/index.tsx index c1dc1c103e..f3fd140aa3 100644 --- a/web/src/components/form-select-input/index.tsx +++ b/web/src/components/form-select-input/index.tsx @@ -81,7 +81,11 @@ const FormSelectInput = ({ disabled={disabled} > {options.map((op) => ( - + {getOptionLabel(op)} ))}