Merge pull request #275 from zenml-io/UAT

Merge `UAT` --> `main`

Author: strickvl

src/constants/icons.ts

@@ -7,7 +7,9 @@ export enum iconColors {
   red = 'red',
   orange = 'orange',
   mustard = 'mustard',
+  butterflyBlue = 'butterflyBlue',
   green = 'green',
+  lightGreen = 'lightGreen',
 }
 
 export enum iconSizes {

src/redux/sagas/requestSaga.ts

@@ -23,7 +23,9 @@ const isUnauthenticatedError = (e: any, action: any) => {
 };
 
 function* logoutAndNotifyUserThatSessionExpired(): any {
+  localStorage.removeItem('persistSelectedStack');
   yield put(sessionActions.logout());
+
   yield put(
     showToasterAction({
       description: translate(''),

src/ui/_globalStyles.scss

@@ -19,6 +19,7 @@ $orangeColor: var(--orange);
 $darkerOrangeColor: var(--darkOrange);
 $ButterflyBlue:  var(--butterflyBlue);
 $mustardColor: var(--mustard);
+$lightGreenColor: var(--lightGreen);
 
 $imageFallbackBackgroundColor: var(--lightestGrey);
 

src/ui/components/Logout.tsx

@@ -8,6 +8,7 @@ export const Logout = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
+    localStorage.removeItem('persistSelectedStack');
     dispatch(sessionActions.logout());
   });
 

src/ui/components/buttons/index.module.scss

@@ -10,7 +10,8 @@
   transition: 200ms ease opacity;
   cursor: pointer;
   border: 0;
-  height: $buttonHeight;
+  // height: $buttonHeight;
+  height: 50px;
   width: max-content;
   transition: 0.2s ease-in all;
   padding: 0 3.2rem !important;
@@ -39,7 +40,7 @@
   transition: 200ms ease opacity;
   cursor: pointer;
   border: 0;
-  height: $buttonHeight;
+  height: 50px;
   width: max-content;
   transition: 0.2s ease-in all;
   padding: 0 3.2rem !important;
@@ -68,7 +69,8 @@
   border: 1px solid $blackColor;
   transition: 200ms ease opacity;
   cursor: pointer;
-  height: $buttonHeight;
+  // height: $buttonHeight;
+  height: 50px;
   width: max-content;
   transition: 0.2s ease-in all;
   padding: 0 3.2rem !important;

src/ui/components/circles/index.module.scss

@@ -60,3 +60,9 @@
 .mustard {
   background-color: $mustardColor;
 }
+.lightGreen {
+  background-color: $lightGreenColor;
+}
+.butterflyBlue {
+  background-color: $ButterflyBlue;
+}

src/ui/components/circles/index.tsx

@@ -14,7 +14,9 @@ type Colors =
   | 'grey'
   | 'lightestGrey'
   | 'orange'
-  | 'mustard';
+  | 'mustard'
+  | 'lightGreen'
+  | 'butterflyBlue';
 
 export const ColoredCircle: React.FC<{ color: Colors; size: Sizes }> = ({
   children,

src/ui/components/forms/index.tsx

@@ -164,7 +164,7 @@ export const CopyField = (
 
         {props.showTokField && (
           <LinkBox
-            style={{ position: 'absolute', right: '10px', top: '30px' }}
+            style={{ position: 'absolute', right: '10px', top: '40px' }}
             onClick={handleClick}
           >
             <icons.copy color={iconColors.grey} />
@@ -210,6 +210,10 @@ export const EditField = (
           InputComponent={
             <TextInput
               {...props}
+              style={{
+                backgroundColor: props.disabled && '#E9EAEC',
+                borderWidth: props.disabled && '0px',
+              }}
               defaultValue={props?.defaultValue}
               value={props.value}
               placeholder={props.placeholder}
@@ -218,7 +222,7 @@ export const EditField = (
         />
         {!props.disabled && (
           <Box style={{ position: 'absolute', right: '10px', top: '35px' }}>
-            <icons.pen color={iconColors.grey} />
+            <icons.pen color={iconColors.black} />
           </Box>
         )}
       </FlexBox>
@@ -248,6 +252,7 @@ export const EditFieldSettings = (
   return (
     <FlexBox.Column fullWidth>
       <FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
+        {console.log(disabled, 'disableddisabled')}
         <InputWithLabel
           name={props.name}
           label={props.label}
@@ -258,23 +263,26 @@ export const EditFieldSettings = (
               {...props}
               inputRef={inputRef}
               defaultValue={props?.defaultValue}
-              value={props.value}
+              value={disabled ? props?.defaultValue : props.value}
               placeholder={props.placeholder}
               disabled={disabled}
               autoFocus={!disabled}
-              onRemoveFocus={() => setDisabled(!disabled)}
-              // onFocus={(e: any) => e.currentTarget.select()}
+              onRemoveFocus={(e: any) => {
+                setTimeout(() => {
+                  if (disabled === false) setDisabled(true);
+                }, 200);
+              }}
             />
           }
         />
+        {/* {console.log(props?.defaultValue , props.value , 'disableddisabled')} */}
         {!props.disabled && (
           <Box
             onClick={() => {
               setDisabled(!disabled);
-
-              setTimeout(() => {
-                props.inputRef?.current?.focus();
-              }, 10);
+              // setTimeout(() => {
+              // props.inputRef?.current?.focus();
+              // }, 1000);
             }}
             style={{
               position: 'absolute',
@@ -283,8 +291,7 @@ export const EditFieldSettings = (
               cursor: 'pointer',
             }}
           >
-            {console.log(disabled, 'disableddisabled')}
-            <icons.pen color={iconColors.grey} />
+            <icons.pen color={disabled ? iconColors.black : iconColors.grey} />
           </Box>
         )}
       </FlexBox>