ENH - Improve default build selection workflow (#271)

* Improve label of default build in edit mode * Disable save button if the default environment is changed * Add review changes * Add review changes
conda-incubator · Aug 25, 2023 · f1c5885 · f1c5885
1 parent 57f9d71
commit f1c5885
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 9 deletions.
diff --git a/src/features/environmentDetails/components/EnvironmentDetails.tsx b/src/features/environmentDetails/components/EnvironmentDetails.tsx
@@ -68,6 +68,8 @@ export const EnvironmentDetails = ({
   );
   const [artifactType, setArtifactType] = useState<string[]>([]);
   const [showDialog, setShowDialog] = useState(false);
+  const [defaultEnvVersIsChanged, setDefaultEnvVersIsChanged] = useState(false);
+  const [specificationIsChanged, setSpecificationIsChanged] = useState(false);
   const [error, setError] = useState({
     message: "",
     visible: false
@@ -101,6 +103,14 @@ export const EnvironmentDetails = ({
     setDescriptionIsUpdated(true);
   };
 
+  const updateSpecificationIsChanged = (isChanged: boolean) => {
+    setSpecificationIsChanged(isChanged);
+  };
+
+  const updateDefaultEnvironmentVersion = (isChanged: boolean) => {
+    setDefaultEnvVersIsChanged(isChanged);
+  };
+
   const loadArtifacts = async () => {
     if (artifactType.includes("DOCKER_MANIFEST")) {
       return;
@@ -268,6 +278,8 @@ export const EnvironmentDetails = ({
           currentBuildId={selectedEnvironment?.current_build_id}
           selectedBuildId={currentBuildId}
           description={description}
+          specificationIsChanged={specificationIsChanged}
+          onDefaultEnvIsChanged={updateDefaultEnvironmentVersion}
           onUpdateDescription={updateDescription}
           onUpdateBuildId={updateBuild}
         />
@@ -277,6 +289,9 @@ export const EnvironmentDetails = ({
         {mode === "edit" && (
           <SpecificationEdit
             descriptionUpdated={descriptionIsUpdated}
+            defaultEnvVersIsChanged={defaultEnvVersIsChanged}
+            onSpecificationIsChanged={updateSpecificationIsChanged}
+            onDefaultEnvIsChanged={updateDefaultEnvironmentVersion}
             onUpdateEnvironment={updateEnvironment}
             onShowDialogAlert={showDialog => setShowDialog(showDialog)}
           />

diff --git a/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx b/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx
@@ -26,11 +26,17 @@ import { StyledButtonPrimary } from "../../../../styles";
 import { CondaSpecificationPip } from "../../../../common/models";
 interface ISpecificationEdit {
   descriptionUpdated: boolean;
+  defaultEnvVersIsChanged: boolean;
+  onSpecificationIsChanged: (specificationIsChanged: boolean) => void;
+  onDefaultEnvIsChanged: (defaultEnvVersIsChanged: boolean) => void;
   onUpdateEnvironment: (specification: any) => void;
   onShowDialogAlert: (showDialog: boolean) => void;
 }
 export const SpecificationEdit = ({
   descriptionUpdated,
+  defaultEnvVersIsChanged,
+  onSpecificationIsChanged,
+  onDefaultEnvIsChanged,
   onUpdateEnvironment,
   onShowDialogAlert
 }: ISpecificationEdit) => {
@@ -64,8 +70,14 @@ export const SpecificationEdit = ({
 
   const onUpdateChannels = useCallback((channels: string[]) => {
     dispatch(updateChannels(channels));
+    onDefaultEnvIsChanged(false);
   }, []);
 
+  const onUpdateDefaultEnvironment = (isChanged: boolean) => {
+    onDefaultEnvIsChanged(isChanged);
+    onSpecificationIsChanged(!isChanged);
+  };
+
   const onUpdateEditor = debounce(
     ({
       channels,
@@ -90,6 +102,8 @@ export const SpecificationEdit = ({
 
       if (isDifferentChannels || isDifferentPackages) {
         setEnvIsUpdated(true);
+        onUpdateDefaultEnvironment(false);
+        onSpecificationIsChanged(true);
       }
 
       setCode(code);
@@ -118,6 +132,7 @@ export const SpecificationEdit = ({
 
   const onCancelEdition = () => {
     setEnvIsUpdated(false);
+    onSpecificationIsChanged(false);
     dispatch(modeChanged(EnvironmentDetailsModes.READ));
     dispatch(updatePackages(initialPackages.current));
     dispatch(updateChannels(initialChannels.current));
@@ -133,7 +148,9 @@ export const SpecificationEdit = ({
     const isDifferentPackages =
       JSON.stringify(requestedPackages) !== stringifiedInitialPackages;
 
-    if (isDifferentChannels || isDifferentPackages) {
+    if (defaultEnvVersIsChanged) {
+      setEnvIsUpdated(false);
+    } else if (isDifferentChannels || isDifferentPackages) {
       setEnvIsUpdated(true);
     }
   }, [channels, requestedPackages, descriptionUpdated]);
@@ -153,7 +170,10 @@ export const SpecificationEdit = ({
         ) : (
           <>
             <Box sx={{ marginBottom: "30px" }}>
-              <RequestedPackagesEdit packageList={requestedPackages} />
+              <RequestedPackagesEdit
+                packageList={requestedPackages}
+                onDefaultEnvIsChanged={onUpdateDefaultEnvironment}
+              />
             </Box>
             <Box sx={{ marginBottom: "30px" }}>
               <Dependencies

diff --git a/src/features/metadata/components/EnvBuilds.tsx b/src/features/metadata/components/EnvBuilds.tsx
@@ -9,12 +9,14 @@ interface IData {
   currentBuildId: number;
   selectedBuildId: number;
   builds: IBuild[];
+  mode: "create" | "read-only" | "edit";
 }
 
 export const EnvBuilds = ({
   currentBuildId,
   selectedBuildId,
-  builds
+  builds,
+  mode
 }: IData) => {
   const envBuilds = builds.length ? buildMapper(builds, currentBuildId) : [];
   const currentBuild = envBuilds.find(build => build.id === selectedBuildId);
@@ -27,7 +29,7 @@ export const EnvBuilds = ({
           paddingBottom: "5px"
         }}
       >
-        Builds:
+        {mode === "edit" ? "Change active environment version:" : "Builds:"}
       </StyledMetadataItem>
       {currentBuild && (
         <>

diff --git a/src/features/metadata/components/EnvMetadata.tsx b/src/features/metadata/components/EnvMetadata.tsx
@@ -18,6 +18,9 @@ interface IEnvMetadataProps {
   mode: "create" | "read-only" | "edit";
   currentBuildId?: number | undefined;
   selectedBuildId?: number;
+  defaultEnvVersIsChanged?: boolean;
+  specificationIsChanged?: boolean;
+  onDefaultEnvIsChanged?: (defaultEnvVersIsChanged: boolean) => void;
   onUpdateDescription: (description: string) => void;
   onUpdateBuildId: (buildId: number) => void;
 }
@@ -27,13 +30,30 @@ export const EnvMetadata = ({
   description = "",
   currentBuildId,
   selectedBuildId,
+  specificationIsChanged,
+  onDefaultEnvIsChanged,
   onUpdateDescription,
   onUpdateBuildId
 }: IEnvMetadataProps) => {
   const { builds, newCurrentBuild } = useAppSelector(
     state => state.enviroments
   );
 
+  const defaultEnvironmentChanged = (newCurrentBuild: number) => {
+    onUpdateBuildId(newCurrentBuild);
+    if (onDefaultEnvIsChanged) {
+      onDefaultEnvIsChanged(true);
+    }
+  };
+
+  const specificationDidChange = () => {
+    if (specificationIsChanged) {
+      return specificationIsChanged;
+    } else {
+      return false;
+    }
+  };
+
   return (
     <BlockContainer title="Environment Metadata">
       <Description
@@ -56,6 +76,7 @@ export const EnvMetadata = ({
                 currentBuildId={currentBuildId}
                 selectedBuildId={selectedBuildId}
                 builds={builds}
+                mode={mode}
               />
             </div>
           )}
@@ -65,10 +86,11 @@ export const EnvMetadata = ({
           currentBuildId !== newCurrentBuild && (
             <StyledButtonPrimary
               variant="contained"
-              onClick={() => onUpdateBuildId(newCurrentBuild)}
+              onClick={() => defaultEnvironmentChanged(newCurrentBuild)}
               isalttype="true"
+              disabled={specificationDidChange()}
             >
-              Update Environment Build
+              Change environment version
             </StyledButtonPrimary>
           )}
       </div>

diff --git a/src/features/requestedPackages/components/RequestedPackagesEdit.tsx b/src/features/requestedPackages/components/RequestedPackagesEdit.tsx
@@ -27,17 +27,28 @@ export interface IRequestedPackagesEditProps {
    * @param packageList list of packages that we get from the API
    */
   packageList: (string | CondaSpecificationPip)[];
+  onDefaultEnvIsChanged?: (isChanged: boolean) => void;
 }
 
 export const RequestedPackagesEdit = ({
-  packageList
+  packageList,
+  onDefaultEnvIsChanged
 }: IRequestedPackagesEditProps) => {
   const dispatch = useAppDispatch();
   const [isAdding, setIsAdding] = useState(false);
   const { palette } = useTheme();
 
   const handleSubmit = (packageName: string) => {
     dispatch(packageAdded(packageName));
+    if (onDefaultEnvIsChanged) {
+      onUpdateDefaultEnvironment(false);
+    }
+  };
+
+  const onUpdateDefaultEnvironment = (isChanged: boolean) => {
+    if (onDefaultEnvIsChanged) {
+      onDefaultEnvIsChanged(isChanged);
+    }
   };
 
   const filteredPackageList = useMemo(
@@ -104,6 +115,7 @@ export const RequestedPackagesEdit = ({
               <RequestedPackagesTableRow
                 key={requestedPackage}
                 requestedPackage={requestedPackage}
+                onDefaultEnvIsChanged={onUpdateDefaultEnvironment}
               />
             ))}
           </TableBody>

diff --git a/src/features/requestedPackages/components/RequestedPackagesTableRow.tsx b/src/features/requestedPackages/components/RequestedPackagesTableRow.tsx
@@ -20,10 +20,12 @@ interface IRequestedPackagesTableRowProps {
    * @param requestedPackage requested package
    */
   requestedPackage: string;
+  onDefaultEnvIsChanged?: (isChanged: boolean) => void;
 }
 
 const BaseRequestedPackagesTableRow = ({
-  requestedPackage
+  requestedPackage,
+  onDefaultEnvIsChanged
 }: IRequestedPackagesTableRowProps) => {
   const dispatch = useAppDispatch();
   const { versionsWithoutConstraints, versionsWithConstraints } =
@@ -36,6 +38,12 @@ const BaseRequestedPackagesTableRow = ({
     version = versionsWithoutConstraints[name];
   }
 
+  const onUpdateDefaultEnvironment = (isChanged: boolean) => {
+    if (onDefaultEnvIsChanged) {
+      onDefaultEnvIsChanged(isChanged);
+    }
+  };
+
   const updateVersion = (value: string) => {
     let pkgConstraint = constraint === "latest" ? ">=" : constraint;
 
@@ -48,6 +56,7 @@ const BaseRequestedPackagesTableRow = ({
     dispatch(
       packageUpdated({ currentPackage: requestedPackage, updatedPackage })
     );
+    onUpdateDefaultEnvironment(false);
   };
 
   const updateConstraint = (value: string) => {
@@ -56,9 +65,13 @@ const BaseRequestedPackagesTableRow = ({
     dispatch(
       packageUpdated({ currentPackage: requestedPackage, updatedPackage })
     );
+    onUpdateDefaultEnvironment(false);
   };
 
-  const handleRemove = () => dispatch(packageRemoved(requestedPackage));
+  const handleRemove = () => {
+    dispatch(packageRemoved(requestedPackage));
+    onUpdateDefaultEnvironment(false);
+  };
 
   return (
     <TableRow>