From 0bdd3366404e0d4b4b92fc9783716f02e649f6ba Mon Sep 17 00:00:00 2001
From: Maxime Beauchamp <maximebeauchamp7@gmail.com>
Date: Mon, 6 Nov 2023 17:30:13 -0500
Subject: [PATCH] fix hydration bug

---
 .../src/components/sdl/AdvancedConfig.tsx     |  7 ++----
 .../src/components/sdl/GpuFormControl.tsx     |  2 +-
 .../sdl/SimpleServiceFormControl.tsx          |  6 ++---
 .../src/components/shared/ExpandMore.tsx      | 24 +++++++++++++++++--
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/deploy-web/src/components/sdl/AdvancedConfig.tsx b/deploy-web/src/components/sdl/AdvancedConfig.tsx
index 3d0cde631..6500b58e7 100644
--- a/deploy-web/src/components/sdl/AdvancedConfig.tsx
+++ b/deploy-web/src/components/sdl/AdvancedConfig.tsx
@@ -3,7 +3,6 @@ import { Control } from "react-hook-form";
 import { Box, Button, Collapse, Paper, Typography, useTheme } from "@mui/material";
 import { RentGpusFormValues, Service } from "@src/types";
 import { ExpandMore } from "../shared/ExpandMore";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { EnvFormModal } from "./EnvFormModal";
 import { CommandFormModal } from "./CommandFormModal";
 import { ExposeFormModal } from "./ExposeFormModal";
@@ -56,7 +55,7 @@ export const AdvancedConfig: React.FunctionComponent<Props> = ({ control, curren
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
-          padding: ".5rem 1rem",
+          padding: "1rem",
           borderBottom: expanded ? `1px solid ${theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200]}` : "none",
           textTransform: "none"
         }}
@@ -67,9 +66,7 @@ export const AdvancedConfig: React.FunctionComponent<Props> = ({ control, curren
           <Typography variant="body2">Advanced Configuration</Typography>
         </Box>
 
-        <ExpandMore expand={expanded} aria-expanded={expanded} aria-label="show more" sx={{ marginLeft: ".5rem" }}>
-          <ExpandMoreIcon />
-        </ExpandMore>
+        <ExpandMore expand={expanded} aria-expanded={expanded} aria-label="show more" sx={{ marginLeft: ".5rem" }} />
       </Button>
       <Collapse in={expanded}>
         <Box sx={{ padding: "1rem" }}>
diff --git a/deploy-web/src/components/sdl/GpuFormControl.tsx b/deploy-web/src/components/sdl/GpuFormControl.tsx
index 726410f96..edd07b749 100644
--- a/deploy-web/src/components/sdl/GpuFormControl.tsx
+++ b/deploy-web/src/components/sdl/GpuFormControl.tsx
@@ -162,7 +162,7 @@ export const GpuFormControl: React.FunctionComponent<Props> = ({ providerAttribu
             {providerAttributesSchema ? (
               <FormSelect
                 control={control}
-                label="GPU models"
+                label="GPU models (any if empty)"
                 optionName="hardware-gpu-model"
                 name={`services.${serviceIndex}.profile.gpuModels`}
                 providerAttributesSchema={providerAttributesSchema}
diff --git a/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx b/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
index f9dd04218..0c5d01ac2 100644
--- a/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
+++ b/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
@@ -15,7 +15,7 @@ import { makeStyles } from "tss-react/mui";
 import { Dispatch, SetStateAction, useState } from "react";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import DeleteIcon from "@mui/icons-material/Delete";
-import { ExpandMore } from "../shared/ExpandMore";
+import { ExpandMoreButton } from "../shared/ExpandMore";
 import { SdlBuilderFormValues, Service } from "@src/types";
 import { CommandFormModal } from "./CommandFormModal";
 import { EnvFormModal } from "./EnvFormModal";
@@ -218,9 +218,9 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
             </IconButton>
           )}
 
-          <ExpandMore expand={expanded} onClick={onExpandClick} aria-expanded={expanded} aria-label="show more" sx={{ marginLeft: ".5rem" }}>
+          <ExpandMoreButton expand={expanded} onClick={onExpandClick} aria-expanded={expanded} aria-label="show more" sx={{ marginLeft: ".5rem" }}>
             <ExpandMoreIcon />
-          </ExpandMore>
+          </ExpandMoreButton>
         </Box>
       </Box>
 
diff --git a/deploy-web/src/components/shared/ExpandMore.tsx b/deploy-web/src/components/shared/ExpandMore.tsx
index 2292bd762..b6e418d76 100644
--- a/deploy-web/src/components/shared/ExpandMore.tsx
+++ b/deploy-web/src/components/shared/ExpandMore.tsx
@@ -1,12 +1,32 @@
 import { IconButton, IconButtonProps, styled } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-interface ExpandMoreProps extends IconButtonProps {
+interface ExpandMoreButtonProps extends IconButtonProps {
+  expand: boolean;
+}
+
+export const ExpandMoreButton = styled((props: ExpandMoreButtonProps) => {
+  const { expand, children, ...other } = props;
+  return (
+    <IconButton {...other}>
+      <ExpandMoreIcon />
+    </IconButton>
+  );
+})(({ theme, expand }) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  marginLeft: "auto",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest
+  })
+}));
+
+interface ExpandMoreProps {
   expand: boolean;
 }
 
 export const ExpandMore = styled((props: ExpandMoreProps) => {
   const { expand, ...other } = props;
-  return <IconButton {...other} />;
+  return <ExpandMoreIcon {...other} />;
 })(({ theme, expand }) => ({
   transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
   marginLeft: "auto",