fix: Updated Account Settings and Infrastructure pages

chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx

@@ -45,8 +45,8 @@ export default function SettingsWrapper(props: SettingsWrapperProps): React.Reac
         </Container>
         <Layout.Horizontal style={{ flexGrow: 1 }} height={'100%'}>
           <Container
-            width={'30%'}
-            style={{ minWidth: 420, position: 'relative' }}
+            width={'20%'}
+            style={{ minWidth: 350, position: 'relative' }}
             height={'100%'}
             background={Color.PRIMARY_1}
             padding={{ top: 'xxlarge', right: 'medium', bottom: 'xxlarge', left: 'medium' }}

chaoscenter/web/src/controllers/Environments/EditEnvironment.tsx

@@ -8,13 +8,11 @@ import type { RefetchEnvironments } from './types';
 interface EditEnvironmentControllerProps {
   environmentID: string;
   handleClose: () => void;
-  isEditOpen: boolean;
 }
 
 export default function EditEnvironmentController({
   environmentID,
   handleClose,
-  isEditOpen,
   refetchEnvironments
 }: EditEnvironmentControllerProps & RefetchEnvironments): React.ReactElement {
   const { showError, showSuccess } = useToaster();
@@ -36,12 +34,11 @@ export default function EditEnvironmentController({
 
   return (
     <CreateEnvironment
+      closeModal={handleClose}
       loading={{
         getEnvironment: getEnvironmentLoading
       }}
-      isOpen={isEditOpen}
       editable={true}
-      setIsOpen={handleClose}
       environmentID={environmentID}
       mutation={{ updateEnvironment: editEnvironmentMutation }}
       existingEnvironment={environmentDetails?.getEnvironment}

chaoscenter/web/src/controllers/Environments/Environment.tsx

@@ -19,14 +19,11 @@ const EnvironmentController: React.FC = () => {
 
   const setPage = (newPage: number): void => updateSearchParams({ page: newPage.toString() });
   const setLimit = (newLimit: number): void => updateSearchParams({ limit: newLimit.toString() });
-  // const resetPage = (): void => {
-  //   page !== 0 && updateSearchParams({ page: '0' });
-  // };
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
   const {
     data: envData,
     loading: listEnvironmentLoading,
-    refetch: refetchEnvironments
+    refetch: refetchEnvironments,
+    error: listEnvironmentError
   } = listEnvironment({
     projectID: scope.projectID,
     environmentIDs: [],
@@ -73,9 +70,7 @@ const EnvironmentController: React.FC = () => {
 
   return (
     <EnvironmentListView
-      isModalOpen={isModalOpen}
-      setIsModalOpen={setIsModalOpen}
-      loading={{ listEnvironments: listEnvironmentLoading }}
+      loading={{ listEnvironments: listEnvironmentLoading || listEnvironmentError?.message !== undefined }}
       environmentTableData={environmentTableData}
       refetchEnvironments={refetchEnvironments}
       mutation={{

chaoscenter/web/src/controllers/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx

@@ -25,7 +25,7 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl
     data,
     loading: listChaosInfrastructureLoading,
     error: listChaosInfrastructureError,
-    refetch,
+    refetch: listInfrastructureRefetch,
     startPolling,
     stopPolling
   } = listChaosInfra({
@@ -56,7 +56,7 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl
   // Mutation is passed down, will be called on user click event
   const [deleteChaosInfrastructureMutation] = deleteKubernetesChaosInfra({
     onCompleted: () => {
-      refetch();
+      listInfrastructureRefetch();
       setPage(0);
       showSuccess(getString('deleteSuccess'));
     },
@@ -78,8 +78,6 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl
     );
   };
 
-  //TODO pass down refetch() to call it in done buttons
-
   return (
     <KubernetesChaosInfrastructureView
       chaosInfrastructures={InfrastructureData.length <= 0 && searchTerm == '' ? undefined : InfrastructureData}
@@ -91,6 +89,9 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl
         getEnvironmentError: getEnvironmentError,
         listChaosInfrastructureError: listChaosInfrastructureError
       }}
+      refetch={{
+        listChaosInfra: listInfrastructureRefetch
+      }}
       startPolling={startPolling}
       stopPolling={stopPolling}
       environmentID={environmentID}

chaoscenter/web/src/strings/strings.en.yaml

@@ -324,7 +324,12 @@ enterYourName: Enter your name
 enterYourPassword: Enter your password
 enterYourUsername: Enter your username
 environment: Environment
+environmentDescription: >-
+  An environment is the place where you will deploy your cluster for chaos
+  testing
 environmentError: It seems there was an error fetching the Environment Details.
+environmentNameIsRequired: Environment Name is a required field
+environmentType: Environment Type
 environments: Environments
 error: Error
 errorApplyChanges: Error in Applying the Changes. Please enter correct input values.

chaoscenter/web/src/strings/types.ts

@@ -275,7 +275,10 @@ export interface StringsMap {
   'enterYourPassword': unknown
   'enterYourUsername': unknown
   'environment': unknown
+  'environmentDescription': unknown
   'environmentError': unknown
+  'environmentNameIsRequired': unknown
+  'environmentType': unknown
   'environments': unknown
   'error': unknown
   'errorApplyChanges': unknown

chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonVariation, CardSelect, Container, Dialog, FormInput, Layout, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, CardSelect, Container, FormInput, Layout, Text } from '@harnessio/uicore';
 import { FontVariation, Color } from '@harnessio/design-system';
 import { Form, Formik } from 'formik';
 import React from 'react';
@@ -25,11 +25,10 @@ interface CreateEnvironmentData {
 }
 
 interface CreateEnvironmentProps {
-  isOpen: boolean;
   editable?: boolean;
   environmentID?: string;
   existingEnvironment?: Environment;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  closeModal: () => void;
   mutation: {
     createEnvironment?: MutationFunction<CreateEnvironmentResponse, CreateEnvironmentRequest>;
     updateEnvironment?: MutationFunction<string, UpdateEnvironmentRequest>;
@@ -40,13 +39,12 @@ interface CreateEnvironmentProps {
 }
 
 export default function CreateEnvironment({
-  isOpen,
   editable,
-  setIsOpen,
   environmentID,
   mutation,
   existingEnvironment,
-  loading
+  loading,
+  closeModal
 }: CreateEnvironmentProps): React.ReactElement {
   const { getString } = useStrings();
   const scope = getScope();
@@ -69,122 +67,106 @@ export default function CreateEnvironment({
   ];
 
   return (
-    <Dialog
-      isOpen={isOpen}
-      enforceFocus={false}
-      canEscapeKeyClose
-      canOutsideClickClose
-      onClose={
-        /* istanbul ignore next*/ () => {
-          setIsOpen(false);
-        }
-      }
-      isCloseButtonShown
-      className={css.dialogStylesEnv}
-    >
-      <Layout.Vertical height={'100%'} padding="small">
-        <Loader loading={loading?.getEnvironment}>
-          <Formik<CreateEnvironmentData>
-            initialValues={initialValues}
-            onSubmit={data => {
-              !editable
-                ? mutation.createEnvironment &&
-                  mutation
-                    .createEnvironment({
-                      variables: {
-                        projectID: scope.projectID,
-                        request: {
-                          environmentID: data.id,
-                          name: data.name,
-                          description: data.description,
-                          tags: data.tags,
-                          type: data.type
-                        }
-                      }
-                    })
-                    .then(() => setIsOpen(false))
-                : mutation.updateEnvironment &&
-                  environmentID &&
-                  mutation.updateEnvironment({
+    <Layout.Vertical height={'100%'} padding="small">
+      <Loader loading={loading?.getEnvironment}>
+        <Formik<CreateEnvironmentData>
+          initialValues={initialValues}
+          onSubmit={data => {
+            !editable
+              ? mutation.createEnvironment &&
+                mutation
+                  .createEnvironment({
                     variables: {
                       projectID: scope.projectID,
                       request: {
-                        environmentID: environmentID,
+                        environmentID: data.id,
                         name: data.name,
                         description: data.description,
                         tags: data.tags,
                         type: data.type
                       }
                     }
-                  });
-            }}
-            validationSchema={Yup.object().shape({
-              name: Yup.string().trim().required('Environment Name is a required field')
-            })}
-          >
-            {formikProps => {
-              return (
-                <Form style={{ height: '100%' }}>
-                  <Layout.Vertical height={'100%'}>
-                    <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'small' }}>
-                      {editable ? 'Edit Environment' : 'New Environment'}
-                    </Text>
-                    <Text color={Color.GREY_700} margin={{ bottom: 'large' }}>
-                      An environment is the place where you will deploy your cluster for chaos testing
-                    </Text>
-                    <div className={css.maxInputNameId}>
-                      <FormInput.InputWithIdentifier
-                        inputName="name"
-                        idName="id"
-                        isIdentifierEditable={editable ? false : true}
-                        inputLabel="Environment Name"
-                        inputGroupProps={{
-                          placeholder: 'Environment Name',
-                          className: css.maxWidthFormInput
-                        }}
-                      />
-                    </div>
-                    <DescriptionTags formikProps={formikProps} className={css.maxWidthFormInput} />
-                    {/* <FlexExpander /> */}
-
-                    <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'large' }}>
-                      Environment Type
-                    </Text>
-                    <CardSelect
-                      selected={environmentTypes.find(objective => objective._cardName === formikProps.values.type)}
-                      data={environmentTypes}
-                      onChange={key => {
-                        formikProps.setFieldValue('type', key._cardName);
+                  })
+                  .then(() => closeModal())
+              : mutation.updateEnvironment &&
+                environmentID &&
+                mutation.updateEnvironment({
+                  variables: {
+                    projectID: scope.projectID,
+                    request: {
+                      environmentID: environmentID,
+                      name: data.name,
+                      description: data.description,
+                      tags: data.tags,
+                      type: data.type
+                    }
+                  }
+                });
+          }}
+          validationSchema={Yup.object().shape({
+            name: Yup.string().trim().required(getString('environmentNameIsRequired'))
+          })}
+        >
+          {formikProps => {
+            return (
+              <Form style={{ height: '100%' }}>
+                <Layout.Vertical height={'100%'}>
+                  <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'small' }}>
+                    {editable ? 'Edit Environment' : 'New Environment'}
+                  </Text>
+                  <Text color={Color.GREY_700} margin={{ bottom: 'large' }}>
+                    {getString('environmentDescription')}
+                  </Text>
+                  <div className={css.maxInputNameId}>
+                    <FormInput.InputWithIdentifier
+                      inputName="name"
+                      idName="id"
+                      isIdentifierEditable={editable ? false : true}
+                      inputLabel="Environment Name"
+                      inputGroupProps={{
+                        placeholder: 'Environment Name',
+                        className: css.maxWidthFormInput
                       }}
-                      cornerSelected
-                      className={css.cardContainer}
-                      renderItem={item => (
-                        <Container className={css.card} flex={{ justifyContent: 'center', alignItems: 'center' }}>
-                          <Text font={{ variation: FontVariation.BODY, align: 'center' }}>{item.name}</Text>
-                        </Container>
-                      )}
                     />
-                    <Layout.Horizontal flex={{ justifyContent: 'flex-start' }} spacing={'medium'}>
-                      <Button
-                        disabled={false}
-                        onClick={() => setIsOpen(false)}
-                        variation={ButtonVariation.SECONDARY}
-                        text={getString('cancel')}
-                      />
-                      <Button
-                        type="submit"
-                        variation={ButtonVariation.PRIMARY}
-                        text={getString('save')}
-                        onClick={() => formikProps.handleSubmit()}
-                      />
-                    </Layout.Horizontal>
-                  </Layout.Vertical>
-                </Form>
-              );
-            }}
-          </Formik>
-        </Loader>
-      </Layout.Vertical>
-    </Dialog>
+                  </div>
+                  <DescriptionTags formikProps={formikProps} className={css.maxWidthFormInput} />
+                  <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'large' }}>
+                    {getString('environmentType')}
+                  </Text>
+                  <CardSelect
+                    selected={environmentTypes.find(objective => objective._cardName === formikProps.values.type)}
+                    data={environmentTypes}
+                    onChange={key => {
+                      formikProps.setFieldValue('type', key._cardName);
+                    }}
+                    cornerSelected
+                    className={css.cardContainer}
+                    renderItem={item => (
+                      <Container className={css.card} flex={{ justifyContent: 'center', alignItems: 'center' }}>
+                        <Text font={{ variation: FontVariation.BODY, align: 'center' }}>{item.name}</Text>
+                      </Container>
+                    )}
+                  />
+                  <Layout.Horizontal flex={{ justifyContent: 'flex-start' }} spacing={'medium'}>
+                    <Button
+                      disabled={false}
+                      onClick={() => closeModal()}
+                      variation={ButtonVariation.SECONDARY}
+                      text={getString('cancel')}
+                    />
+                    <Button
+                      type="submit"
+                      variation={ButtonVariation.PRIMARY}
+                      text={getString('save')}
+                      onClick={() => formikProps.handleSubmit()}
+                    />
+                  </Layout.Horizontal>
+                </Layout.Vertical>
+              </Form>
+            );
+          }}
+        </Formik>
+      </Loader>
+    </Layout.Vertical>
   );
 }