chore: [CHAOS-3808]: Resilience probe modal toggle reseting to default bugfix

chaoscenter/graphql/server/pkg/database/mongodb/probe/schema.go

@@ -181,7 +181,7 @@ func (probe *Probe) GetOutputProbe() *model.Probe {
 				Method:               &model.Method{},
 			}
 
-			if probeResponse.KubernetesHTTPProperties.InsecureSkipVerify != nil {
+			if probe.KubernetesHTTPProperties.InsecureSkipVerify != nil {
 				probeResponse.KubernetesHTTPProperties.InsecureSkipVerify = probe.KubernetesHTTPProperties.InsecureSkipVerify
 			}
 

chaoscenter/web/src/controllers/AddProbeModalWizard/AddProbeModalWizard.tsx

@@ -30,7 +30,7 @@ export default function AddProbeModalWizardController({
     { loading: addKubernetesHTTPProbeMutationLoading, error: addKubernetesHTTPProbeMutationError }
   ] = addKubernetesHTTPProbe({
     onCompleted: () => {
-      refetchProbes();
+      refetchProbes?.();
     },
     onError: err => showError(err.message)
   });
@@ -40,22 +40,22 @@ export default function AddProbeModalWizardController({
     { loading: addKubernetesCMDProbeMutationLoading, error: addKubernetesCMDProbeMutationError }
   ] = addKubernetesCMDProbe({
     onCompleted: () => {
-      refetchProbes();
+      refetchProbes?.();
     },
     onError: err => showError(err.message)
   });
 
   const [addK8SProbeMutation, { loading: addK8SProbeMutationLoading, error: addK8SProbeMutationError }] = addK8SProbe({
     onCompleted: () => {
-      refetchProbes();
+      refetchProbes?.();
     },
     onError: err => showError(err.message)
   });
 
   const [addPROMProbeMutation, { loading: addPROMProbeMutationLoading, error: addPROMProbeMutationError }] =
     addPROMProbe({
       onCompleted: () => {
-        refetchProbes();
+        refetchProbes?.();
       },
       onError: err => showError(err.message)
     });

chaoscenter/web/src/controllers/ChaosProbes/types.ts

@@ -9,5 +9,5 @@ export interface ChaosProbesTableProps {
 }
 
 export interface RefetchProbes {
-  refetchProbes: GqlAPIQueryResponse<ListProbeResponse, ListProbeRequest>['refetch'];
+  refetchProbes?: GqlAPIQueryResponse<ListProbeResponse, ListProbeRequest>['refetch'];
 }

chaoscenter/web/src/controllers/UpdateProbeModalWizard/UpdateProbeModalWizard.tsx

@@ -5,6 +5,7 @@ import type { RefetchProbes } from '@controllers/ChaosProbes';
 import AddProbeModalWizardView from '@views/AddProbeModalWizard';
 import type { InfrastructureType } from '@api/entities';
 import { getScope } from '@utils';
+import Loader from '@components/Loader';
 
 interface UpdateHubModalWizardControllerProps extends RefetchProbes {
   hideDarkModal: () => void;
@@ -29,7 +30,7 @@ export default function UpdateProbeModalWizardController({
   const [updateProbeMutation, { loading: updateProbeLoading, error }] = updateProbe({
     onCompleted: data => {
       showSuccess(data.updateProbe);
-      refetchProbes();
+      refetchProbes?.();
     },
     onError: err => showError(err.message)
   });
@@ -45,15 +46,17 @@ export default function UpdateProbeModalWizardController({
   const loading = updateProbeLoading || getProbeLoading;
 
   return (
-    <AddProbeModalWizardView
-      mutation={{ updateProbeMutation }}
-      probeData={probeData?.getProbe}
-      loading={loading}
-      validateName={validateUniqueProbeQuery}
-      error={error}
-      isEdit={true}
-      infrastructureType={infrastructureType}
-      hideDarkModal={hideDarkModal}
-    />
+    <Loader loading={loading}>
+      <AddProbeModalWizardView
+        mutation={{ updateProbeMutation }}
+        probeData={probeData?.getProbe}
+        loading={loading}
+        validateName={validateUniqueProbeQuery}
+        error={error}
+        isEdit={true}
+        infrastructureType={infrastructureType}
+        hideDarkModal={hideDarkModal}
+      />
+    </Loader>
   );
 }

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

@@ -761,6 +761,7 @@ previous: Previous
 private: Private
 probeAddedSuccessfully: Probe added successfully, please apply changes before closing
 probeConfiguration: Probe Configuration
+probeDeletedSuccessfully: Probe Deleted Successfully
 probeDetails: Probe Details
 probeExecutionPreview: PROBE EXECUTION PREVIEW
 probeInFault: Probe in fault
@@ -886,6 +887,10 @@ registryType: Registry Type
 remove: Remove
 removeMember: Remove Member
 removeMemberConfirmation: Are you sure you want to remove {{username}}?
+removeProbeDesc: >-
+  This action will remove the probe from the manifest. Are you sure you want to
+  continue?
+removeProbeHeading: Remove this probe?
 repoBranchPlaceholder: Enter repository branch
 repoURLPlaceholder: Enter repository URL
 repository: Repository

chaoscenter/web/src/strings/types.ts

@@ -635,6 +635,7 @@ export interface StringsMap {
   'private': unknown
   'probeAddedSuccessfully': unknown
   'probeConfiguration': unknown
+  'probeDeletedSuccessfully': unknown
   'probeDetails': unknown
   'probeExecutionPreview': unknown
   'probeInFault': unknown
@@ -736,6 +737,8 @@ export interface StringsMap {
   'remove': unknown
   'removeMember': unknown
   'removeMemberConfirmation': PrimitiveObject<'username'>
+  'removeProbeDesc': unknown
+  'removeProbeHeading': unknown
   'repoBranchPlaceholder': unknown
   'repoURLPlaceholder': unknown
   'repository': unknown

chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.module.scss

@@ -21,7 +21,9 @@
   }
 
   .probeDetailsInnerContainer {
-    height: 60vh;
+    padding: 6px;
+    height: 516px;
+    margin-bottom: 1rem;
     overflow: auto !important;
   }
 }

chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.tsx

@@ -20,7 +20,7 @@ import { noop, omit } from 'lodash-es';
 import { Divider } from '@blueprintjs/core';
 import { parse } from 'yaml';
 import { Icon } from '@harnessio/icons';
-import { getIcon, getScope } from '@utils';
+import { cleanApolloResponse, getIcon, getScope } from '@utils';
 import { useStrings } from '@strings';
 import NameDescriptionTags from '@components/NameIdDescriptionTags';
 import type {
@@ -309,19 +309,15 @@ const TunePropertiesStep: React.FC<StepProps<StepData>> = props => {
       interval: Yup.string()
         .matches(unitsRegex, 'Probe interval should contain values in ns, us, ms, m, s or h only')
         .required(getString(`probeValidation.interval`)),
-      attempt: Yup.number(),
-      probePollingInterval: Yup.string().matches(
-        unitsRegex,
-        'Probe polling interval should contain values in ns, us, ms, m, s or h only'
-      ),
-      initialDelay: Yup.string().matches(
-        unitsRegex,
-        'Probe evaluation timeout should contain values in ns, us, ms, m, s or h only'
-      ),
-      evaluationTimeout: Yup.string().matches(
-        unitsRegex,
-        'Probe evaluation timeout should contain values in ns, us, ms, m, s or h only'
-      )
+      probePollingInterval: Yup.string()
+        .matches(unitsRegex, 'Probe polling interval should contain values in ns, us, ms, m, s or h only')
+        .nullable(),
+      initialDelay: Yup.string()
+        .matches(unitsRegex, 'Probe evaluation timeout should contain values in ns, us, ms, m, s or h only')
+        .nullable(),
+      evaluationTimeout: Yup.string()
+        .matches(unitsRegex, 'Probe evaluation timeout should contain values in ns, us, ms, m, s or h only')
+        .nullable()
     };
 
     if (props.formData.infrastructureType === InfrastructureType.KUBERNETES) {
@@ -359,7 +355,7 @@ const TunePropertiesStep: React.FC<StepProps<StepData>> = props => {
         {formikProps => {
           return (
             <Form style={{ height: '100%' }}>
-              <Layout.Vertical height={'100%'}>
+              <Layout.Vertical height={516} style={{ overflow: 'auto' }}>
                 <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'large' }}>
                   {getString(`properties`)}
                 </Text>
@@ -442,8 +438,10 @@ const TuneDetailsStep: React.FC<
   // TODO: Add monaco editor for source probe in CMD
   const cmdComparatorType = React.useRef<string>('int');
   const promComparatorType = React.useRef<string>('int');
-  const source = React.useRef<string>('');
-  const [isSourceSelected, setIsSourceSelected] = React.useState<boolean>(false);
+  const source = React.useRef<string>(props.formData.kubernetesCMDProperties?.source ?? '');
+  const [isSourceSelected, setIsSourceSelected] = React.useState<boolean>(
+    props.formData.kubernetesCMDProperties?.source ? true : false
+  );
   const { error, loading, mutation, isEdit, hideDarkModal } = props;
 
   const preventDefault = (e: React.DragEvent<HTMLDivElement>) => {
@@ -925,7 +923,15 @@ const TuneDetailsStep: React.FC<
               />
             </Layout.Horizontal>
 
-            <Switch label="Source" checked={isSourceSelected} onChange={() => setIsSourceSelected(prev => !prev)} />
+            <Switch
+              label="Source"
+              checked={isSourceSelected}
+              onChange={event => {
+                setIsSourceSelected(prev => !prev);
+                (event.target as HTMLInputElement).checked &&
+                  window.setTimeout(() => document.getElementById('sourceContainer')?.scrollIntoView(false), 100);
+              }}
+            />
             <Text
               font={{ variation: FontVariation.FORM_INPUT_TEXT }}
               padding={{ top: 'medium', bottom: 'medium' }}
@@ -934,7 +940,7 @@ const TuneDetailsStep: React.FC<
               {getString('sourceModeDesction')}
             </Text>
             {isSourceSelected && (
-              <Container height={200}>
+              <Container id="sourceContainer" height={200}>
                 <div
                   className={css.yamlBuilder}
                   onDragEnter={preventDefault}
@@ -1168,21 +1174,7 @@ export default function AddProbeModalWizardView({
 
   React.useMemo(() => {
     if (mutation.updateProbeMutation && probeDataWithTypename) {
-      /**
-       * Will remove deeply nested __typename fields efficiently from the payload
-       * Apollo Github Issue: https://github.com/apollographql/apollo-feature-requests/issues/6
-       * */
-      const probeData: Probe = JSON.parse(
-        JSON.stringify(probeDataWithTypename, (name, val) => {
-          if (name === '__typename') {
-            delete val[name];
-          } else if (val === null) {
-            return undefined;
-          } else {
-            return val;
-          }
-        })
-      );
+      const probeData = cleanApolloResponse(probeDataWithTypename) as Probe;
 
       initialValues = {
         name: probeData.name,

chaoscenter/web/src/views/ChaosProbes/ChaosProbeTable.tsx

@@ -9,16 +9,24 @@ import { getIcon, timeDifferenceForDate } from '@utils';
 import { useStrings } from '@strings';
 import { useRouteWithBaseUrl } from '@hooks';
 import CopyButton from '@components/CopyButton';
-import type { Probe } from '@api/entities';
+import type { InfrastructureType, Probe } from '@api/entities';
 import type { ChaosProbesTableProps, RefetchProbes } from '@controllers/ChaosProbes';
 import { ProbeTabs } from '@models';
 import { MenuCell } from './ChaosProbesTableMenu';
+import { UpdateProbeModal } from './UpdateProbeModal';
 import css from './ChaosProbes.module.scss';
 
+export interface EditProbeData {
+  name: string;
+  infrastructureType: InfrastructureType;
+}
+
 const ChaosProbeTable = ({ content, refetchProbes }: ChaosProbesTableProps & RefetchProbes): React.ReactElement => {
   const { getString } = useStrings();
   const history = useHistory();
   const paths = useRouteWithBaseUrl();
+  const [editProbe, setEditProbe] = React.useState<EditProbeData | undefined>();
+
   const columns: Column<Partial<Probe>>[] = React.useMemo(() => {
     return [
       {
@@ -116,27 +124,40 @@ const ChaosProbeTable = ({ content, refetchProbes }: ChaosProbesTableProps & Ref
       {
         Header: '',
         id: 'threeDotMenu',
-        Cell: ({ row }: { row: Row<Probe> }) => <MenuCell row={row} refetchProbes={refetchProbes} />,
+        Cell: ({ row }: { row: Row<Probe> }) => (
+          <MenuCell row={row} refetchProbes={refetchProbes} setEditProbe={setEditProbe} />
+        ),
         disableSortBy: true
       }
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <TableV2<Partial<Probe>>
-      className={css.table}
-      columns={columns}
-      data={content}
-      sortable
-      onRowClick={rowDetails =>
-        rowDetails.name &&
-        history.push({
-          pathname: paths.toChaosProbe({ probeName: rowDetails.name }),
-          search: `probeName=${rowDetails.name}&tab=${ProbeTabs.EXECUTION_RESULTS}&infrastructureType=${rowDetails.infrastructureType}`
-        })
-      }
-    />
+    <>
+      <TableV2<Partial<Probe>>
+        className={css.table}
+        columns={columns}
+        data={content}
+        sortable
+        onRowClick={rowDetails =>
+          rowDetails.name &&
+          history.push({
+            pathname: paths.toChaosProbe({ probeName: rowDetails.name }),
+            search: `probeName=${rowDetails.name}&tab=${ProbeTabs.EXECUTION_RESULTS}&infrastructureType=${rowDetails.infrastructureType}`
+          })
+        }
+      />
+      {editProbe && (
+        <UpdateProbeModal
+          refetchProbes={refetchProbes}
+          isOpen={!!editProbe.name}
+          hideDarkModal={() => setEditProbe(undefined)}
+          probeName={editProbe.name}
+          infrastructureType={editProbe.infrastructureType}
+        />
+      )}
+    </>
   );
 };
 

chaoscenter/web/src/views/ChaosProbes/ChaosProbesTableMenu.tsx

@@ -18,18 +18,22 @@ import type { Probe } from '@api/entities';
 import type { RefetchProbes } from '@controllers/ChaosProbes';
 import RbacMenuItem from '@components/RbacMenuItem';
 import { PermissionGroup } from '@models';
-import { UpdateProbeModal } from './UpdateProbeModal';
+import type { EditProbeData } from './ChaosProbeTable';
 
 interface MenuCellProps extends RefetchProbes {
   row: Row<Probe>;
+  setEditProbe: React.Dispatch<React.SetStateAction<EditProbeData | undefined>>;
 }
 
-export const MenuCell = ({ row: { original: data }, refetchProbes }: MenuCellProps): React.ReactElement => {
+export const MenuCell = ({
+  row: { original: data },
+  refetchProbes,
+  setEditProbe
+}: MenuCellProps): React.ReactElement => {
   const scope = getScope();
   const { getString } = useStrings();
   const { showError } = useToaster();
 
-  const { isOpen: isOpenUpdateProbeModal, open: openUpdateProbeModal, close: closeUpdateProbeModal } = useToggleOpen();
   const {
     isOpen: isOpenDeleteProbeDialog,
     open: openDeleteProbeDialog,
@@ -66,22 +70,15 @@ export const MenuCell = ({ row: { original: data }, refetchProbes }: MenuCellPro
 
   return (
     <Layout.Horizontal style={{ justifyContent: 'flex-end' }} onClick={killEvent}>
-      <UpdateProbeModal
-        refetchProbes={refetchProbes}
-        isOpen={isOpenUpdateProbeModal}
-        hideDarkModal={closeUpdateProbeModal}
-        probeName={data.name}
-        infrastructureType={data.infrastructureType}
-      />
       <Popover className={Classes.DARK} position={Position.LEFT}>
         <Button variation={ButtonVariation.ICON} icon="Options" />
         <Menu style={{ backgroundColor: 'unset' }}>
           {/* <!-- edit probe button --> */}
           <ParentComponentErrorWrapper>
             <RbacMenuItem
-              icon={'Edit'}
+              icon="Edit"
               text={getString('editProbe')}
-              onClick={openUpdateProbeModal}
+              onClick={() => setEditProbe({ name: data.name, infrastructureType: data.infrastructureType })}
               permission={PermissionGroup.EDITOR || PermissionGroup.OWNER}
             />
           </ParentComponentErrorWrapper>

chaoscenter/web/src/views/ChaosProbes/UpdateProbeModal.tsx

@@ -23,7 +23,7 @@ export const UpdateProbeModal = ({
     isCloseButtonShown: true,
     style: {
       width: 1000,
-      minHeight: 600,
+      height: 620,
       borderLeft: 0,
       paddingBottom: 0,
       position: 'relative',