Domain env bugs (#396)

* update storybook@latest * fix: loading state perpetually hanging during maagament provision * fix: use subDomainName if present * remove default selected and add back hover styles to meu item containing the add environment option. give user ability to select no environment.
konstructio · Dec 1, 2023 · 4e65fe9 · 4e65fe9
1 parent efc9a87
commit 4e65fe9
Show file tree

Hide file tree

Showing 5 changed files with 1,430 additions and 664 deletions.
diff --git a/components/clusterDetails/index.tsx b/components/clusterDetails/index.tsx
@@ -1,4 +1,10 @@
-import React, { ComponentPropsWithoutRef, FunctionComponent, useEffect, useState } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  FunctionComponent,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import moment from 'moment';
 
 import {
@@ -43,6 +49,7 @@ const ClusterDetails: FunctionComponent<ClusterDetailsProps> = ({
     cloudRegion,
     creationDate,
     domainName,
+    subDomainName,
     gitProvider,
     nodeCount,
     instanceSize,
@@ -58,6 +65,11 @@ const ClusterDetails: FunctionComponent<ClusterDetailsProps> = ({
     setTimeout(() => setAvailable(true), 10000);
   });
 
+  const fullDomainName = useMemo(
+    () => (subDomainName ? `${subDomainName}.${domainName}` : domainName),
+    [subDomainName, domainName],
+  );
+
   return (
     <Container {...rest}>
       <Column style={{ gap: '8px' }}>
@@ -72,7 +84,7 @@ const ClusterDetails: FunctionComponent<ClusterDetailsProps> = ({
         )}
         <Column style={{ gap: '4px' }}>
           <StatusIndicator available>
-            <ExternalLink href={`https://argocd.${domainName}/applications/clusters`} available>
+            <ExternalLink href={`https://argocd.${fullDomainName}/applications/clusters`} available>
               View your Argo CD clusters
             </ExternalLink>
           </StatusIndicator>

diff --git a/components/select/index.tsx b/components/select/index.tsx
@@ -10,7 +10,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '../typography';
 import { Required } from '../textField/textField.styled';
 import Tag, { TagColor } from '../tag';
-import { DOLPHIN, LIGHT_GREY, LINK_WATER, ROYAL_PURPLE } from '../../constants/colors';
+import { DOLPHIN, LIGHT_GREY, LINK_WATER, ROYAL_PURPLE, WHITE_SMOKE } from '../../constants/colors';
 import { StyledFormHelperText } from '../textArea/textArea.styled';
 import Row from '../row';
 import { ClusterEnvironment } from '../../types/provision';
@@ -99,14 +99,30 @@ const EnvironmentSelect: FunctionComponent<EnvironmentSelectProps> = ({
           }
         }}
       >
-        <MenuItem disableRipple onClick={onAddNewEnvironment}>
+        <MenuItem
+          disableRipple
+          onClick={onAddNewEnvironment}
+          sx={{
+            '&.MuiMenuItem-root.Mui-selected': {
+              'backgroundColor': 'white',
+              '&:hover': { backgroundColor: `${WHITE_SMOKE}` },
+            },
+          }}
+        >
           <Row style={{ gap: '4px', alignItems: 'center' }}>
             <AddIcon sx={{ height: 20, width: 20, color: ROYAL_PURPLE }} />
             <Typography variant="body3" sx={{ color: ROYAL_PURPLE }}>
               New environment
             </Typography>
           </Row>
         </MenuItem>
+        {!!options.length && (
+          <MenuItem value="" disableRipple>
+            <Typography variant="body3" sx={{ color: ROYAL_PURPLE, marginLeft: '3px' }}>
+              None
+            </Typography>
+          </MenuItem>
+        )}
         {options.map((option) => (
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           //@ts-ignore

diff --git a/package.json b/package.json
@@ -68,14 +68,14 @@
     "@faker-js/faker": "^7.5.0",
     "@mdx-js/react": "^2.2.1",
     "@next/eslint-plugin-next": "^13.0.4",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/addon-actions": "^7.6.2",
+    "@storybook/addon-essentials": "^7.6.2",
+    "@storybook/addon-interactions": "^7.6.2",
+    "@storybook/addon-links": "^7.6.2",
+    "@storybook/addon-mdx-gfm": "^7.6.2",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/nextjs": "^7.5.3",
-    "@storybook/react": "^7.5.3",
+    "@storybook/nextjs": "^7.6.2",
+    "@storybook/react": "^7.6.2",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
@@ -108,7 +108,7 @@
     "jest-environment-jsdom": "^29.2.2",
     "prettier": "^2.7.1",
     "process": "^0.11.10",
-    "storybook": "^7.5.3",
+    "storybook": "^7.6.2",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4"

diff --git a/redux/slices/api.slice.ts b/redux/slices/api.slice.ts
@@ -220,6 +220,7 @@ const apiSlice = createSlice({
         state.responseError = action.error.message;
       })
       .addCase(getCloudDomains.fulfilled, (state, { payload }: PayloadAction<Array<string>>) => {
+        state.loading = false;
         state.cloudDomains = sortBy(payload);
       })
       .addCase(getCloudRegions.pending, (state) => {