fix: Updated faults searching logic and added expandable nav link

Signed-off-by: Hrishav <[email protected]>

chaoscenter/web/src/components/NavExpandable/NavExpandable.module.scss

@@ -0,0 +1,26 @@
+.main {
+  z-index: 1;
+}
+
+.text {
+  margin: var(--spacing-small) var(--spacing-small) var(--spacing-xsmall) var(--spacing-medium) !important;
+  padding: var(--spacing-small) var(--spacing-medium) !important;
+  color: var(--white) !important;
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 1px !important;
+  cursor: pointer;
+
+  span[class*='bp3-icon'] {
+    color: inherit !important;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.border {
+  margin: var(--spacing-small) var(--spacing-xlarge) var(--spacing-xsmall) var(--spacing-xxlarge) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}

chaoscenter/web/src/components/NavExpandable/NavExpandable.module.scss.d.ts

@@ -0,0 +1,11 @@
+declare namespace NavExpandableModuleScssNamespace {
+  export interface INavExpandableModuleScss {
+    border: string;
+    main: string;
+    text: string;
+  }
+}
+
+declare const NavExpandableModuleScssModule: NavExpandableModuleScssNamespace.INavExpandableModuleScss;
+
+export = NavExpandableModuleScssModule;

chaoscenter/web/src/components/NavExpandable/NavExpandable.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import cx from 'classnames';
+import { useLocation, matchPath } from 'react-router-dom';
+import { Layout, Text } from '@harnessio/uicore';
+import type { IconName } from '@harnessio/icons';
+import css from './NavExpandable.module.scss';
+
+interface NavExpandableProps {
+  title: string;
+  route: string;
+  className?: string;
+  withoutBorder?: boolean;
+  defaultExpanded?: boolean;
+}
+
+const NavExpandable: React.FC<React.PropsWithChildren<NavExpandableProps>> = ({
+  title,
+  route,
+  children,
+  className,
+  withoutBorder = false,
+  defaultExpanded = false
+}) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(defaultExpanded);
+  const { pathname } = useLocation();
+  const isSelected = matchPath(pathname, route);
+  const timerRef = React.useRef<number | null>(null);
+
+  const handleMouseEvent = (val: boolean): void => {
+    if (defaultExpanded) {
+      return;
+    }
+    if (timerRef.current) window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      setIsExpanded(val);
+    }, 300);
+  };
+
+  let rightIcon: IconName | undefined;
+  if (!defaultExpanded) {
+    rightIcon = isSelected || isExpanded ? 'chevron-up' : 'chevron-down';
+  }
+
+  return (
+    <div>
+      {!withoutBorder && <div className={css.border} />}
+      <Layout.Vertical
+        className={cx(className, css.main)}
+        onMouseEnter={() => handleMouseEvent(true)}
+        onMouseLeave={() => handleMouseEvent(false)}
+      >
+        <Text
+          rightIcon={rightIcon}
+          className={css.text}
+          font="xsmall"
+          flex={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
+        >
+          {title}
+        </Text>
+        {isSelected || isExpanded ? children : null}
+      </Layout.Vertical>
+    </div>
+  );
+};
+
+export default NavExpandable;

chaoscenter/web/src/components/NavExpandable/index.ts

@@ -0,0 +1,3 @@
+import NavExpandable from './NavExpandable';
+
+export default NavExpandable;

chaoscenter/web/src/components/SideNav/SideNav.tsx

@@ -8,6 +8,7 @@ import { Classes, Position, PopoverInteractionKind } from '@blueprintjs/core';
 import { useRouteWithBaseUrl } from '@hooks';
 import { useStrings } from '@strings';
 import ProjectSelectorController from '@controllers/ProjectSelector';
+import NavExpandable from '@components/NavExpandable';
 import css from './SideNav.module.scss';
 
 interface SidebarLinkProps extends NavLinkProps {
@@ -96,7 +97,9 @@ export default function SideNav(): ReactElement {
           <SidebarLink label={'Chaos Experiments'} to={paths.toExperiments()} />
           <SidebarLink label={'ChaosHubs'} to={paths.toChaosHubs()} />
           <SidebarLink label={'Environments'} to={paths.toEnvironments()} />
-          <SidebarLink label={'Members'} to={paths.toProjectMembers()} />
+          <NavExpandable title="Project Setup" route={paths.toProjectSetup()}>
+            <SidebarLink label={'Members'} to={paths.toProjectMembers()} />
+          </NavExpandable>
         </Layout.Vertical>
       </div>
       <Container className={css.bottomContainer}>

chaoscenter/web/src/components/YAMLBuilder/YAMLBuilderConstants.ts

@@ -1,10 +1,3 @@
-/*
- * Copyright 2021 Harness Inc. All rights reserved.
- * Use of this source code is governed by the PolyForm Shield 1.0.0 license
- * that can be found in the licenses directory at the root of this repository, also available at
- * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
- */
-
 export const EDITOR_BASE_DARK_THEME = 'vs-dark';
 export const EDITOR_BASE_LIGHT_THEME = 'vs';
 /* Dark theme colors */

chaoscenter/web/src/controllers/ExperimentCreationChaosFaults/ExperimentCreationChaosFaults.tsx

@@ -32,14 +32,23 @@ export default function ExperimentCreationChaosFaultsController({
     fetchPolicy: 'cache-first'
   });
 
-  const filteredCharts = chaosCharts?.filter(chart => {
-    const deepCopyChart = cloneDeep(chart);
-    deepCopyChart.spec.faults = chart.spec.faults.filter(fault =>
-      replaceHyphen(fault.name).includes(replaceSpace(replaceHyphen(searchParam)).toLocaleLowerCase())
-    );
-
-    if (deepCopyChart.spec.faults.length > 0) return deepCopyChart;
-  });
+  const filteredCharts = React.useMemo(() => {
+    const deepCopyOfCharts = cloneDeep(chaosCharts);
+    const updatedSearchTerm = replaceHyphen(replaceSpace(searchParam)).toLowerCase();
+    const filteredChartsWithFilteredExperiments = deepCopyOfCharts?.map(chart => {
+      const filteredExperiments = chart.spec.faults.filter(fault => {
+        return replaceHyphen(replaceSpace(fault.name)).toLowerCase().includes(updatedSearchTerm);
+      });
+      return {
+        ...chart,
+        spec: {
+          ...chart.spec,
+          faults: filteredExperiments
+        }
+      };
+    });
+    return filteredChartsWithFilteredExperiments;
+  }, [searchParam, chaosCharts]);
 
   return (
     <ExperimentCreationChaosFaultsView

chaoscenter/web/src/routes/RouteDefinitions.ts

@@ -23,42 +23,42 @@ export interface UseRouteDefinitionsProps {
   toChaosInfrastructures(params: { environmentID: string }): string;
   toKubernetesChaosInfrastructures(params: { environmentID: string }): string;
   toKubernetesChaosInfrastructureDetails(params: { chaosInfrastructureID: string; environmentID: string }): string;
-  // Project scoped
-  toProjectMembers(): string;
-  // Account Scoped Routes
   toAccountSettingsOverview(): string;
+  toProjectSetup(): string;
+  toProjectMembers(): string;
 }
 
 export const paths: UseRouteDefinitionsProps = {
   toRoot: () => '/',
   toLogin: () => '/login',
   toDashboard: () => '/dashboard',
   toExperiments: () => '/experiments',
-  // chaos studio routes
+  // Chaos Studio Routes
   toNewExperiment: ({ experimentKey }) => `/experiments/new/${experimentKey}/chaos-studio`,
   toCloneExperiment: ({ experimentKey }) => `/experiments/clone/${experimentKey}/chaos-studio`,
   toEditExperiment: ({ experimentKey }) => `/experiments/${experimentKey}/chaos-studio`,
-  // experiment details route
+  // Experiment Details Route
   toExperimentRunHistory: ({ experimentID }) => `/experiments/${experimentID}/runs`,
   toExperimentRunDetails: ({ experimentID, runID }) => `/experiments/${experimentID}/runs/${runID}`,
   toExperimentRunDetailsViaNotifyID: ({ experimentID, notifyID }) =>
     `/experiments/${experimentID}/notifyID/${notifyID}`,
-  // chaoshub routes
+  // Chaoshub Routes
   toChaosHubs: () => '/chaos-hubs',
   toChaosHub: ({ hubID }) => `/chaos-hubs/${hubID}`,
   toPredefinedExperiment: ({ hubID, experimentName }) => `/chaos-hubs/${hubID}/experiment/${experimentName}`,
   toChaosFault: ({ hubID, faultName }) => `/chaos-hubs/${hubID}/fault/${faultName}`,
-  // chaos probe routes
+  // Chaos Probe Routes
   toChaosProbes: () => '/probes',
   toChaosProbe: ({ probeID }) => `/probes/${probeID}`,
   toEnvironments: () => '/environments',
-  // chaos infrastructures routes
+  // Chaos Infrastructures Routes
   toChaosInfrastructures: ({ environmentID }) => `/environments/${environmentID}`,
   toKubernetesChaosInfrastructures: ({ environmentID }) => `/environments/${environmentID}/kubernetes`,
   toKubernetesChaosInfrastructureDetails: ({ chaosInfrastructureID, environmentID }) =>
     `/environments/${environmentID}/kubernetes/${chaosInfrastructureID}`,
   // Account Scoped Routes
   toAccountSettingsOverview: () => '/settings/overview',
-  // user route
-  toProjectMembers: () => '/members'
+  // Project Setup Routes
+  toProjectSetup: () => '/setup',
+  toProjectMembers: () => '/setup/members'
 };

chaoscenter/web/src/routes/RouteDestinations.tsx

@@ -109,6 +109,7 @@ export function RoutesWithAuthentication(): React.ReactElement {
         component={KubernetesChaosInfrastructureDetailsController}
       />
       {/* Project */}
+      <Redirect exact from={projectMatchPaths.toProjectSetup()} to={projectRenderPaths.toProjectMembers()} />
       <Route exact path={projectMatchPaths.toProjectMembers()} component={ProjectMembersView} />
     </Switch>
   );