chore: (litmus-portal) Final build bug fixes, refactoring and imporvements (#2029)

- refactored directory structure for frontend
- browse workflow table fixes and header notification fixes
- settings and project selection fixes
- project switching fixes, routing changes for settings and disabling buttons for release
- routes and breadcrumbs fixed
- tab switching improved with redux
Signed-off-by: arkajyotiMukherjee <arkajyoti.mukherjee@mayadata.io>

litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx

@@ -1,7 +1,7 @@
 /// <reference types="Cypress" />
-import React from 'react';
 import { mount } from 'cypress-react-unit-test';
-import LinearProgressBar from '../../src/components/Sections/ReturningHome/ProgressBar/LinearProgressBar';
+import React from 'react';
+import LinearProgressBar from '../../src/views/ReturningHome/ProgressBar/LinearProgressBar';
 
 describe('Linear Progressbar Testing', () => {
   it('Progressbar stroke for value 3', () => {

litmus-portal/frontend/cypress/component/passedVsFailed.spec.tsx

@@ -1,9 +1,8 @@
 /// <reference types="Cypress" />
 
-import React from 'react';
 import { mount } from 'cypress-react-unit-test';
-
-import PassedVsFailed from '../../src/components/Sections/ReturningHome/PassedVsFailed/index';
+import React from 'react';
+import PassedVsFailed from '../../src/views/ReturningHome/PassedVsFailed/index';
 
 // Test Suite - Passing props -> passed: 75, failed: 25
 describe('Passed Vs Failed: props -> passed: 75, failed: 25', () => {

litmus-portal/frontend/cypress/component/semiCircularProgressBar.spec.tsx

@@ -1,8 +1,8 @@
 /// <reference types="Cypress" />
 
-import React from 'react';
 import { mount } from 'cypress-react-unit-test';
-import SemiCircularProgressBar from '../../src/components/Sections/ReturningHome/ProgressBar/SemiCircularProgressBar';
+import React from 'react';
+import SemiCircularProgressBar from '../../src/views/ReturningHome/ProgressBar/SemiCircularProgressBar';
 
 // Test Suite -
 // Progress Bar props -> value = 50, 10, 100

litmus-portal/frontend/cypress/component/weightSlider.spec.tsx

@@ -1,7 +1,7 @@
 /// <reference types="Cypress" />
 import { mount } from 'cypress-react-unit-test';
 import React from 'react';
-import CustomSlider from '../../src/components/Sections/CreateWorkflow/WeightSlider';
+import CustomSlider from '../../src/views/CreateWorkflow/WeightSlider';
 
 describe('Testing Custom Slider with different values', () => {
   [10, 5, 2].map((i) => {

litmus-portal/frontend/src/components/AdjustedWeights/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import { Typography } from '@material-ui/core';
-import LinearProgressBar from '../Sections/ReturningHome/ProgressBar/LinearProgressBar';
-import useStyles from './styles';
+import React from 'react';
 import capitalize from '../../utils/capitalize';
+import LinearProgressBar from '../../views/ReturningHome/ProgressBar/LinearProgressBar';
+import useStyles from './styles';
 
 interface AdjustedWeightsProps {
   testName: string;

litmus-portal/frontend/src/components/BreadCrumbs/index.tsx

@@ -1,8 +1,7 @@
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import * as React from 'react';
-import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { history } from '../../redux/configureStore';
+import capitalize from '../../utils/capitalize';
 import useStyles from './styles';
 
 interface CustomBreadcrumbsProps {
@@ -10,38 +9,32 @@ interface CustomBreadcrumbsProps {
 }
 
 const CustomBreadcrumbs: React.FC<CustomBreadcrumbsProps> = ({ location }) => {
-  const path: string[] = location.split('/');
-
-  let intermediateRoutes: string = '/';
-
+  const pathname: string[] = location.split('/');
+  let intermediateRoutes = '/';
   const classes = useStyles();
 
-  useEffect(() => {}, [path]);
-
   return (
     <Breadcrumbs aria-label="breadcrumb">
-      {path.map((path: string) => {
+      {pathname.map((path) => {
         if (path) {
           intermediateRoutes += path;
-
+          // If Template/Workflow Name is clicked [Workflow / Workflow-name / Template]
+          // it would redirect to /workflows
+          if (pathname[2] === 'template' && path === pathname[3]) {
+            return <span>{path}</span>;
+          }
           const link = (
             <Link
               key={path}
               to={intermediateRoutes}
               className={classes.breadCrumb}
-              onClick={() => {
-                history.push(`/${path}`);
-              }}
             >
-              {path.charAt(0).toUpperCase() + path.slice(1)}
+              {capitalize(path)}
             </Link>
           );
-
           intermediateRoutes += '/';
-
           return link;
         }
-
         return '';
       })}
     </Breadcrumbs>

litmus-portal/frontend/src/components/Header/NotificationDropdown.tsx

@@ -1,24 +1,24 @@
 /* eslint-disable no-nested-ternary */
-import React, { useState, useRef } from 'react';
 import {
-  Popover,
-  IconButton,
   AppBar,
+  Badge,
+  Box,
+  IconButton,
   List,
   ListItem,
   ListItemText,
+  Popover,
   Typography,
-  Box,
-  Badge,
 } from '@material-ui/core';
 import NotificationsOutlinedIcon from '@material-ui/icons/NotificationsOutlined';
-import NotificationListItem from './NotificationListItem';
-import useStyles from './styles';
+import React, { useRef, useState } from 'react';
 import {
   Message,
-  NotificationsCallBackType,
   NotificationIds,
-} from '../../../models/header';
+  NotificationsCallBackType,
+} from '../../models/header';
+import NotificationListItem from './NotificationListItem';
+import useStyles from './styles';
 
 interface NotificationDropdownProps {
   messages: Message[];
@@ -61,7 +61,8 @@ const NotificationsDropdown: React.FC<NotificationDropdownProps> = ({
         color="inherit"
       >
         <Badge
-          badgeContent={count === '0' ? messages.length : count}
+          // badgeContent={count === '0' ? messages.length : count}
+          badgeContent={0}
           color="secondary"
         >
           <NotificationsOutlinedIcon />

litmus-portal/frontend/src/components/Header/NotificationListItem.tsx

@@ -1,17 +1,17 @@
+import {
+  IconButton,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+} from '@material-ui/core';
+import ClearIcon from '@material-ui/icons/Clear';
+import formatDistance from 'date-fns/formatDistance';
 import React, { useState } from 'react';
-import {
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  IconButton,
-} from '@material-ui/core';
-import formatDistance from 'date-fns/formatDistance';
-import ClearIcon from '@material-ui/icons/Clear';
 import {
   Message,
-  NotificationsCallBackType,
   NotificationIds,
-} from '../../../models/header';
+  NotificationsCallBackType,
+} from '../../models/header';
 import useStyles from './styles';
 
 interface NotificationListItemProps {

litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx

@@ -12,19 +12,20 @@ import {
 } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import config from '../../../config';
-import { GET_USER } from '../../../graphql';
+import config from '../../config';
+import { GET_USER } from '../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Member,
   Project,
-} from '../../../models/graphql/user';
-import { ProjectsCallBackType } from '../../../models/header';
-import useActions from '../../../redux/actions';
-import * as UserActions from '../../../redux/actions/user';
-import { RootState } from '../../../redux/reducers';
-import userAvatar from '../../../utils/user';
+} from '../../models/graphql/user';
+import { ProjectsCallBackType } from '../../models/header';
+import useActions from '../../redux/actions';
+import * as UserActions from '../../redux/actions/user';
+import { history } from '../../redux/configureStore';
+import { RootState } from '../../redux/reducers';
+import userAvatar from '../../utils/user';
 import ProjectListItem from './ProjectListItem';
 import useStyles from './styles';
 
@@ -62,11 +63,9 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
     { variables: { username } }
   );
   const projects = data?.getUser.projects ?? [];
-  const [switchableProjects, setSwitchableProjects] = useState<Project[]>(
-    projects
-  );
+  const [switchableProjects, setSwitchableProjects] = useState<Project[]>([]);
   const [loggedOut, doLogout] = useState(false);
-  const { userData } = useSelector((state: RootState) => state);
+  const userData = useSelector((state: RootState) => state.userData);
 
   const logOut = () => {
     doLogout(true);
@@ -88,8 +87,6 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
       });
   };
 
-  const editProfile = () => {};
-
   const CallbackFromProjectListItem = (selectedProjectIDFromList: string) => {
     CallbackToSetSelectedProjectIDOnProfileDropdown(selectedProjectIDFromList);
   };
@@ -98,6 +95,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
     const projectsAvailableForSwitching: Project[] = [];
     projects.forEach((project) => {
       const memberList: Member[] = project.members;
+
       memberList.forEach((member) => {
         if (member.user_name === username && member.invitation === 'Accepted') {
           projectsAvailableForSwitching.push(project);
@@ -105,10 +103,6 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
       });
     });
     setSwitchableProjects(projectsAvailableForSwitching);
-  }, []);
-
-  useEffect(() => {
-    setSwitchableProjects(projects);
   }, [data]);
 
   return (
@@ -157,14 +151,16 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
               {email}
             </Typography>
 
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={editProfile}
-              className={classes.buttonEditProfile}
-            >
-              Edit Profile
-            </Button>
+            {userData.userRole === 'Owner' && (
+              <Button
+                variant="outlined"
+                size="small"
+                className={classes.buttonEditProfile}
+                onClick={() => history.push('/settings')}
+              >
+                Edit Profile
+              </Button>
+            )}
 
             <Button
               disabled={loggedOut}

litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx

@@ -3,8 +3,8 @@ import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreTwoToneIcon from '@material-ui/icons/ExpandMoreTwoTone';
 import React, { useRef, useState } from 'react';
-import { ProjectsCallBackType } from '../../../models/header';
-import userAvatar from '../../../utils/user';
+import { ProjectsCallBackType } from '../../models/header';
+import userAvatar from '../../utils/user';
 import ProfileInfoDropdownItems from './ProfileDropdownItems';
 import useStyles from './styles';
 

litmus-portal/frontend/src/components/Header/ProjectListItem.tsx

@@ -10,8 +10,8 @@ import CheckCircleSharpIcon from '@material-ui/icons/CheckCircleSharp';
 import InsertDriveFileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import React, { useState } from 'react';
-import { Project } from '../../../models/graphql/user';
-import { ProjectsCallBackType } from '../../../models/header';
+import { Project } from '../../models/graphql/user';
+import { ProjectsCallBackType } from '../../models/header';
 import useStyles from './styles';
 
 interface ProjectListItemProps {

litmus-portal/frontend/src/components/Header/index.tsx

@@ -5,18 +5,18 @@ import Toolbar from '@material-ui/core/Toolbar';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import CustomBreadCrumbs from '../../../components/BreadCrumbs';
-import { GET_USER } from '../../../graphql';
+import { GET_USER } from '../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Member,
   Project,
-} from '../../../models/graphql/user';
-import { Message, NotificationIds } from '../../../models/header';
-import useActions from '../../../redux/actions';
-import * as UserActions from '../../../redux/actions/user';
-import { RootState } from '../../../redux/reducers';
+} from '../../models/graphql/user';
+import { Message, NotificationIds } from '../../models/header';
+import useActions from '../../redux/actions';
+import * as UserActions from '../../redux/actions/user';
+import { RootState } from '../../redux/reducers';
+import CustomBreadCrumbs from '../BreadCrumbs';
 import NotificationsDropdown from './NotificationDropdown';
 import ProfileDropdownSection from './ProfileDropdownSection';
 import useStyles from './styles';
@@ -53,17 +53,18 @@ const Header: React.FC = () => {
     projects.forEach((project) => {
       if (selectedProjectID === project.id) {
         const memberList: Member[] = project.members;
+
         memberList.forEach((member) => {
           if (member.user_name === data?.getUser.username) {
             user.updateUserDetails({
               selectedProjectID,
-              userRole: project.name,
-              selectedProjectName: member.role,
+              userRole: member.role,
+              selectedProjectName: project.name,
             });
             setSelectedProjectDetails({
               selectedProjectID,
-              selectedProjectName: project.name,
               selectedUserRole: member.role,
+              selectedProjectName: project.name,
             });
           }
         });

litmus-portal/frontend/src/components/QuickActionCard/index.tsx

@@ -1,56 +1,65 @@
 import { List, ListItem, Typography } from '@material-ui/core';
-import React from 'react';
-import { Link } from 'react-router-dom';
 import Card from '@material-ui/core/Card';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import useActions from '../../redux/actions';
+import * as TabActions from '../../redux/actions/tabs';
+import { RootState } from '../../redux/reducers';
 import useStyles from './style';
 
-interface QuickActionItemsProps {
-  children: React.ReactNode;
-}
-
-const QuickActionItems: React.FC<QuickActionItemsProps> = ({ children }) => {
+const QuickActionItems: React.FC = ({ children }) => {
   const classes = useStyles();
   return <ListItem className={classes.listItems}>{children}</ListItem>;
 };
 
 const QuickActionCard = () => {
   const classes = useStyles();
+  const userRole = useSelector((state: RootState) => state.userData.userRole);
+  const tabs = useActions(TabActions);
+
   return (
     <div className={classes.quickActionCard}>
       <Card elevation={0}>
         <Typography className={classes.mainHeader}>Quick Actions</Typography>
         <List>
-          <QuickActionItems>
-            <>
-              <img src="icons/cluster.png" alt="cluster" />
-              <Link to="/" className={classes.listItem}>
-                Connect a new cluster
-              </Link>
-            </>
-          </QuickActionItems>
-          <QuickActionItems>
-            <>
+          {/* <QuickActionItems>
+            <img src="icons/cluster.png" alt="cluster" />
+            <Link to="/" className={classes.listItem}>
+              Connect a new cluster
+            </Link>
+          </QuickActionItems> */}
+          {userRole === 'Owner' && (
+            <QuickActionItems>
               <img src="icons/team.png" alt="team" />
-              <Link to="/" className={classes.listItem}>
+              <Link
+                to="/settings"
+                className={classes.listItem}
+                onClick={() => tabs.changeSettingsTabs(0)}
+              >
                 Invite a team member
               </Link>
-            </>
+            </QuickActionItems>
+          )}
+          <QuickActionItems>
+            <img src="icons/survey.png" alt="survey" />
+            <a
+              href="https://forms.gle/qMuVphRyEWCFqjD56"
+              className={classes.listItem}
+              target="_"
+            >
+              Take a quick survey
+            </a>
           </QuickActionItems>
           <QuickActionItems>
-            <>
-              <img src="icons/survey.png" alt="survey" />
-              <Link to="/" className={classes.listItem}>
-                Take a quick survey
-              </Link>
-            </>
-          </QuickActionItems>
-          <QuickActionItems>
-            <>
-              <img src="icons/docs.png" alt="docs" />
-              <Link to="/" className={classes.listItem}>
-                Read Litmus docs
-              </Link>
-            </>
+            <img src="icons/docs.png" alt="docs" />
+            <a
+              href="https://docs.litmuschaos.io/docs/getstarted/"
+              className={classes.listItem}
+              target="_"
+            >
+              Read Litmus docs
+            </a>
           </QuickActionItems>
         </List>
       </Card>

litmus-portal/frontend/src/components/SideBar/index.tsx

@@ -5,13 +5,14 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { history } from '../../../redux/configureStore';
+import { history } from '../../redux/configureStore';
+import { RootState } from '../../redux/reducers';
 import useStyles from './styles';
 
 interface CustomisedListItemProps {
   handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  children: JSX.Element;
   label: string;
 }
 
@@ -29,8 +30,9 @@ const CustomisedListItem: React.FC<CustomisedListItemProps> = ({
   );
 };
 
-const SideBar = () => {
+const SideBar: React.FC = () => {
   const classes = useStyles();
+  const userRole = useSelector((state: RootState) => state.userData.userRole);
 
   return (
     <Drawer
@@ -73,7 +75,7 @@ const SideBar = () => {
         >
           <img src="/icons/workflows.png" alt="workflow" />
         </CustomisedListItem>
-        <CustomisedListItem
+        {/* <CustomisedListItem
           key="hub"
           handleClick={() => {
             history.push('/404');
@@ -81,16 +83,7 @@ const SideBar = () => {
           label="My Hub"
         >
           <img src="/icons/hub.png" alt="hub" />
-        </CustomisedListItem>
-        <CustomisedListItem
-          key="settings"
-          handleClick={() => {
-            history.push('/settings');
-          }}
-          label="Settings"
-        >
-          <img src="/icons/setting.png" alt="settings" />
-        </CustomisedListItem>
+        </CustomisedListItem> */}
         <CustomisedListItem
           key="community"
           handleClick={() => {
@@ -100,6 +93,17 @@ const SideBar = () => {
         >
           <img src="/icons/community.png" alt="community" />
         </CustomisedListItem>
+        {userRole === 'Owner' && (
+          <CustomisedListItem
+            key="settings"
+            handleClick={() => {
+              history.push('/settings');
+            }}
+            label="Settings"
+          >
+            <img src="/icons/setting.png" alt="settings" />
+          </CustomisedListItem>
+        )}
       </List>
     </Drawer>
   );

litmus-portal/frontend/src/components/WorkflowStepper/index.tsx

@@ -20,14 +20,14 @@ import * as WorkflowActions from '../../redux/actions/workflow';
 import { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
 import parsed from '../../utils/yamlUtils';
+import ChooseWorkflow from '../../views/CreateWorkflow/ChooseWorkflow/index';
+import ReliablityScore from '../../views/CreateWorkflow/ReliabilityScore';
+import ScheduleWorkflow from '../../views/CreateWorkflow/ScheduleWorkflow';
+import TuneWorkflow from '../../views/CreateWorkflow/TuneWorkflow/index';
+import VerifyCommit from '../../views/CreateWorkflow/VerifyCommit';
+import ChooseAWorkflowCluster from '../../views/CreateWorkflow/WorkflowCluster';
 import ButtonFilled from '../Button/ButtonFilled';
 import ButtonOutline from '../Button/ButtonOutline';
-import ChooseWorkflow from '../Sections/CreateWorkflow/ChooseWorkflow/index';
-import ReliablityScore from '../Sections/CreateWorkflow/ReliabilityScore';
-import ScheduleWorkflow from '../Sections/CreateWorkflow/ScheduleWorkflow';
-import TuneWorkflow from '../Sections/CreateWorkflow/TuneWorkflow/index';
-import VerifyCommit from '../Sections/CreateWorkflow/VerifyCommit';
-import ChooseAWorkflowCluster from '../Sections/CreateWorkflow/WorkflowCluster';
 import QontoConnector from './quontoConnector';
 import useStyles from './styles';
 import useQontoStepIconStyles from './useQontoStepIconStyles';

litmus-portal/frontend/src/containers/app/App.tsx

@@ -16,20 +16,20 @@ const CreateWorkflow = lazy(() => import('../../pages/CreateWorkflow'));
 const LoginPage = lazy(() => import('../../pages/LoginPage'));
 const WorkflowDetails = lazy(() => import('../../pages/WorkflowDetails'));
 const BrowseTemplate = lazy(() =>
-  import('../../components/Sections/ChaosWorkflows/BrowseTemplate')
+  import('../../views/ChaosWorkflows/BrowseTemplate')
 );
 const HomePage = lazy(() => import('../../pages/HomePage'));
 const Community = lazy(() => import('../../pages/Community'));
 const Settings = lazy(() => import('../../pages/Settings'));
 const SchedulePage = lazy(() => import('../../pages/SchedulePage'));
 interface RoutesProps {
-  userData: string;
+  userData: UserData;
   isProjectAvailable: boolean;
 }
 
 const Routes: React.FC<RoutesProps> = ({ userData, isProjectAvailable }) => {
   const classes = useStyles();
-  if (userData === '') {
+  if (userData.token === '') {
     return (
       <div className={classes.content}>
         <Switch>
@@ -58,28 +58,32 @@ const Routes: React.FC<RoutesProps> = ({ userData, isProjectAvailable }) => {
         <Route exact path="/login" component={LoginPage} />
         <Route exact path="/workflows" component={Workflows} />
         <Route exact path="/create-workflow" component={CreateWorkflow} />
+
+        {/* Redirects */}
+        <Redirect exact path="/workflows/details" to="/workflows" />
+        <Redirect exact path="/workflows/schedule" to="/workflows" />
+        <Redirect exact path="/workflows/template" to="/workflows" />
         <Route
           exact
-          path="/workflows/:workflowName"
+          path="/workflows/details/:workflowRunId"
           component={WorkflowDetails}
         />
         <Route
           exact
-          path="/workflows/:workflowName/details"
-          component={WorkflowDetails}
-        />
-        <Route
-          exact
-          path="/workflows/:scheduleId/schedule"
+          path="/workflows/schedule/:scheduleId"
           component={SchedulePage}
         />
         <Route
           exact
-          path="/workflows/:templateName/template"
+          path="/workflows/template/:templateName"
           component={BrowseTemplate}
         />
         <Route exact path="/community" component={Community} />
-        <Route exact path="/settings" component={Settings} />
+        {userData.userRole === 'Owner' ? (
+          <Route exact path="/settings" component={Settings} />
+        ) : (
+          <Redirect to="/" />
+        )}
         <Route exact path="/404" component={ErrorPage} />
         <Redirect to="/404" />
       </Switch>
@@ -90,10 +94,11 @@ const Routes: React.FC<RoutesProps> = ({ userData, isProjectAvailable }) => {
 function App() {
   const classes = useStyles();
   const analyticsAction = useActions(AnalyticsActions);
-  const userData: UserData = useSelector((state: RootState) => state.userData);
+  const userData = useSelector((state: RootState) => state.userData);
   useEffect(() => {
     if (userData.token !== '') analyticsAction.loadCommunityAnalytics();
   }, [userData.token]);
+
   return (
     <Suspense fallback={<Loader />}>
       <Router history={history}>
@@ -101,7 +106,7 @@ function App() {
           <div className={classes.appFrame}>
             {/* <Routes /> */}
             <Routes
-              userData={userData.token}
+              userData={userData}
               isProjectAvailable={!!userData.selectedProjectID}
             />
           </div>

litmus-portal/frontend/src/containers/layouts/Scaffold/index.tsx

@@ -1,14 +1,10 @@
 import CssBaseline from '@material-ui/core/CssBaseline';
 import React from 'react';
-import Header from '../Header';
-import SideBar from '../SideBar';
+import Header from '../../../components/Header';
+import SideBar from '../../../components/SideBar';
 import useStyles from './styles';
 
-interface ScaffoldProps {
-  children: React.ReactNode;
-}
-
-const Scaffold: React.FC<ScaffoldProps> = ({ children }) => {
+const Scaffold: React.FC = ({ children }) => {
   const classes = useStyles();
 
   return (

litmus-portal/frontend/src/models/graphql/invite.ts

@@ -12,3 +12,10 @@ export interface MemberInviteNew {
     role: string;
   };
 }
+
+export interface UserInvite {
+  id: string;
+  name: string;
+  username: string;
+  email: string;
+}

litmus-portal/frontend/src/models/redux/tabs.ts

@@ -0,0 +1,18 @@
+export interface TabState {
+  workflows: number;
+  settings: number;
+}
+
+export enum TabActions {
+  CHANGE_WORKFLOWS_TAB = 'CHANGE_WORKFLOWS_TAB',
+  CHANGE_SETTINGS_TAB = 'CHANGE_SETTINGS_TAB',
+}
+
+interface TabActionType<T, P> {
+  type: T;
+  payload: P;
+}
+
+export type TabAction =
+  | TabActionType<typeof TabActions.CHANGE_WORKFLOWS_TAB, number>
+  | TabActionType<typeof TabActions.CHANGE_SETTINGS_TAB, number>;

litmus-portal/frontend/src/pages/Community/index.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper'; // Temporary -> Should be replaced with Chart
+import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
-import { Link } from 'react-router-dom';
+import Paper from '@material-ui/core/Paper'; // Temporary -> Should be replaced with Chart
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import InfoFilledWrap from '../../components/InfoFilled/index';
-import Scaffold from '../../containers/layouts/Scaffold/index';
-import useStyles from './styles';
 import QuickActionCard from '../../components/QuickActionCard';
-import GeoMap from '../../components/Sections/Community/GeoMap/index';
-import CommunityAnalyticsPlot from '../../components/Sections/Community/CommunityTimeSeriesPlot';
+import Scaffold from '../../containers/layouts/Scaffold/index';
+import CommunityAnalyticsPlot from '../../views/Community/CommunityTimeSeriesPlot';
+import GeoMap from '../../views/Community/GeoMap/index';
+import useStyles from './styles';
 
 // Reusable Header Component
 const Header2: React.FC = ({ children }) => {

litmus-portal/frontend/src/pages/HomePage/index.tsx

@@ -4,7 +4,7 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { Link, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import InfoFilledWrap from '../../components/InfoFilled';
 import Loader from '../../components/Loader';
 import QuickActionCard from '../../components/QuickActionCard';
@@ -18,24 +18,21 @@ import {
   Project,
 } from '../../models/graphql/user';
 import useActions from '../../redux/actions';
+import * as TabActions from '../../redux/actions/tabs';
 import * as UserActions from '../../redux/actions/user';
+import { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
 import useStyles from './style';
 
 const CreateWorkflowCard = () => {
   const { t } = useTranslation();
   const classes = useStyles();
-  const history = useHistory();
-  const routeChange = () => {
-    history.push('/create-workflow');
-  };
+
   return (
     <Card
       elevation={3}
       className={classes.createWorkflowCard}
-      onClick={() => {
-        routeChange();
-      }}
+      onClick={() => history.push('/create-workflow')}
       data-cy="createWorkflow"
     >
       <CardActionArea>
@@ -57,6 +54,7 @@ const HomePage = () => {
   const classes = useStyles();
   const { t } = useTranslation();
   const user = useActions(UserActions);
+  const tabs = useActions(TabActions);
 
   // Query to get user details
   const { data, loading } = useQuery<
@@ -109,7 +107,7 @@ const HomePage = () => {
             <div className={classes.root}>
               <Typography className={classes.userName}>
                 {t('home.heading')}
-                <strong>{name}</strong>
+                <strong>{` ${name}`}</strong>
               </Typography>
               <div className={classes.headingDiv}>
                 <div className={classes.mainDiv}>
@@ -126,6 +124,10 @@ const HomePage = () => {
                     <Button
                       variant="contained"
                       className={classes.predefinedBtn}
+                      onClick={() => {
+                        tabs.changeWorkflowsTabs(2);
+                        history.push('/workflows');
+                      }}
                     >
                       <Typography variant="subtitle1">
                         {t('home.button1')}

litmus-portal/frontend/src/pages/Settings/index.tsx

@@ -1,11 +1,13 @@
 import { Box, Paper, Tab, Tabs, Typography } from '@material-ui/core';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import AccountSettings from '../../components/Sections/Settings/AccountsTab/AccountSettings';
-import TeammingTab from '../../components/Sections/Settings/TeammingTab';
-import UserManagement from '../../components/Sections/Settings/UserManagementTab/UserManagement';
+import Center from '../../containers/layouts/Center';
 import Scaffold from '../../containers/layouts/Scaffold';
+import useActions from '../../redux/actions';
+import * as TabActions from '../../redux/actions/tabs';
 import { RootState } from '../../redux/reducers';
+import TeammingTab from '../../views/Settings/TeammingTab';
+import UserManagement from '../../views/Settings/UserManagementTab/UserManagement';
 import useStyles from './styles';
 
 interface TabPanelProps {
@@ -40,48 +42,57 @@ function tabProps(index: any) {
 }
 
 const Settings: React.FC = () => {
-  const [activeTab, setActiveTab] = React.useState(0);
   const classes = useStyles();
-  const handleChange = (event: React.ChangeEvent<{}>, actTab: number) => {
-    setActiveTab(actTab);
+
+  const settingsTabValue = useSelector(
+    (state: RootState) => state.tabNumber.settings
+  );
+  const userData = useSelector((state: RootState) => state.userData);
+  const tabs = useActions(TabActions);
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    tabs.changeSettingsTabs(newValue);
   };
 
-  const { userData } = useSelector((state: RootState) => state);
   return (
     <Scaffold>
-      <div>
-        <Typography className={classes.Head}>Settings </Typography>
-        <Paper className={classes.root} elevation={0}>
-          <Tabs
-            className={classes.tab}
-            value={activeTab}
-            onChange={handleChange}
-            indicatorColor="secondary"
-            textColor="secondary"
-          >
-            <Tab label="My Account" {...tabProps(0)} />
-            <Tab label="Team" {...tabProps(1)} />
-            {userData.username === 'admin' ? (
-              <Tab label="User Management" {...tabProps(2)} />
-            ) : (
-              <></>
-            )}
-          </Tabs>
-        </Paper>
-        <TabPanel value={activeTab} index={0}>
-          <AccountSettings />
+      <Typography className={classes.Head}>Settings </Typography>
+      <Paper className={classes.root} elevation={0}>
+        <Tabs
+          className={classes.tab}
+          value={settingsTabValue}
+          onChange={handleChange}
+          indicatorColor="secondary"
+          textColor="secondary"
+        >
+          <Tab label="Team" {...tabProps(0)} />
+          {userData.username === 'admin' ? (
+            <Tab label="User Management" {...tabProps(1)} />
+          ) : (
+            <></>
+          )}
+          <Tab label="My Account" {...tabProps(2)} />
+        </Tabs>
+      </Paper>
+
+      <TabPanel value={settingsTabValue} index={0}>
+        <TeammingTab />
+      </TabPanel>
+      {userData.username === 'admin' ? (
+        <TabPanel value={settingsTabValue} index={1}>
+          <UserManagement />
         </TabPanel>
-        <TabPanel value={activeTab} index={1}>
-          <TeammingTab />
-        </TabPanel>
-        {userData.username === 'admin' ? (
-          <TabPanel value={activeTab} index={2}>
-            <UserManagement />
-          </TabPanel>
-        ) : (
-          <></>
-        )}
-      </div>
+      ) : (
+        <></>
+      )}
+      <TabPanel value={settingsTabValue} index={2}>
+        {/* <AccountSettings /> */}
+        <Center>
+          <Typography variant="h3" align="center">
+            My Account Page comming soon
+          </Typography>
+        </Center>
+      </TabPanel>
     </Scaffold>
   );
 };

litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx

@@ -4,8 +4,6 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import Loader from '../../components/Loader';
-import ArgoWorkflow from '../../components/Sections/WorkflowDetails/ArgoWorkflow';
-import WorkflowInfo from '../../components/Sections/WorkflowDetails/WorkflowInfo';
 import Scaffold from '../../containers/layouts/Scaffold';
 import { WORKFLOW_DETAILS, WORKFLOW_EVENTS } from '../../graphql';
 import {
@@ -15,13 +13,15 @@ import {
   WorkflowSubscription,
 } from '../../models/graphql/workflowData';
 import { RootState } from '../../redux/reducers';
+import ArgoWorkflow from '../../views/WorkflowDetails/ArgoWorkflow';
+import WorkflowInfo from '../../views/WorkflowDetails/WorkflowInfo';
 import useStyles from './styles';
 
 const WorkflowDetails: React.FC = () => {
   const classes = useStyles();
   const { pathname } = useLocation();
   // Getting the workflow nome from the pathname
-  const workflowRunId = pathname.split('/')[2];
+  const workflowRunId = pathname.split('/')[3];
 
   // get ProjectID
   const selectedProjectID = useSelector(

litmus-portal/frontend/src/pages/Workflows/index.tsx

@@ -1,21 +1,28 @@
 import { AppBar, Typography } from '@material-ui/core';
 import Tabs from '@material-ui/core/Tabs';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import ButtonFilled from '../../components/Button/ButtonFilled';
-import BrowseSchedule from '../../components/Sections/ChaosWorkflows/BrowseSchedule';
-import BrowseWorkflow from '../../components/Sections/ChaosWorkflows/BrowseWorkflow';
-import Templates from '../../components/Sections/ChaosWorkflows/Templates';
 import { StyledTab, TabPanel } from '../../components/Tabs';
+import Center from '../../containers/layouts/Center';
 import Scaffold from '../../containers/layouts/Scaffold';
+import useActions from '../../redux/actions';
+import * as TabActions from '../../redux/actions/tabs';
 import { history } from '../../redux/configureStore';
+import { RootState } from '../../redux/reducers';
+import BrowseWorkflow from '../../views/ChaosWorkflows/BrowseWorkflow';
+import Templates from '../../views/ChaosWorkflows/Templates';
 import useStyles from './styles';
 
 const Workflows = () => {
   const classes = useStyles();
-  const [value, setValue] = React.useState(0);
+  const workflowTabValue = useSelector(
+    (state: RootState) => state.tabNumber.workflows
+  );
+  const tabs = useActions(TabActions);
 
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
-    setValue(newValue);
+    tabs.changeWorkflowsTabs(newValue);
   };
 
   return (
@@ -35,7 +42,7 @@ const Workflows = () => {
       </section>
       <AppBar position="static" color="default" className={classes.appBar}>
         <Tabs
-          value={value}
+          value={workflowTabValue}
           onChange={handleChange}
           indicatorColor="secondary"
           textColor="secondary"
@@ -47,17 +54,26 @@ const Workflows = () => {
           <StyledTab label="Analytics" />
         </Tabs>
       </AppBar>
-      <TabPanel value={value} index={0}>
+      <TabPanel value={workflowTabValue} index={0}>
         <BrowseWorkflow />
       </TabPanel>
-      <TabPanel value={value} index={1}>
-        <BrowseSchedule />
+      <TabPanel value={workflowTabValue} index={1}>
+        {/* <BrowseSchedule /> */}
+        <Center>
+          <Typography variant="h3" align="center">
+            Schedule comming soon
+          </Typography>
+        </Center>
       </TabPanel>
-      <TabPanel value={value} index={2}>
+      <TabPanel value={workflowTabValue} index={2}>
         <Templates />
       </TabPanel>
-      <TabPanel value={value} index={3}>
-        Analytics comming soon
+      <TabPanel value={workflowTabValue} index={3}>
+        <Center>
+          <Typography variant="h3" align="center">
+            Analytics comming soon
+          </Typography>
+        </Center>
       </TabPanel>
     </Scaffold>
   );

litmus-portal/frontend/src/redux/actions/tabs.ts

@@ -0,0 +1,15 @@
+import { TabAction, TabActions } from '../../models/redux/tabs';
+
+export function changeWorkflowsTabs(tabNumber: number): TabAction {
+  return {
+    type: TabActions.CHANGE_WORKFLOWS_TAB,
+    payload: tabNumber,
+  };
+}
+
+export function changeSettingsTabs(tabNumber: number): TabAction {
+  return {
+    type: TabActions.CHANGE_SETTINGS_TAB,
+    payload: tabNumber,
+  };
+}

litmus-portal/frontend/src/redux/reducers/index.ts

@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux';
 import { Node } from '../../models/graphql/workflowData';
 import { CommunityData } from '../../models/redux/analytics';
+import { TabState } from '../../models/redux/tabs';
 import { UserData } from '../../models/redux/user';
 import { WorkflowData } from '../../models/redux/workflow';
 import * as analyticsReducer from './analytics';
 import * as nodeSelectionReducer from './nodeSelection';
+import * as tabsReducer from './tabs';
 import * as userReducer from './user';
 import * as workflowReducer from './workflow';
 
@@ -13,6 +15,7 @@ export interface RootState {
   userData: UserData;
   workflowData: WorkflowData;
   selectedNode: Node;
+  tabNumber: TabState;
 }
 
 export default () =>
@@ -21,4 +24,5 @@ export default () =>
     ...userReducer,
     ...workflowReducer,
     ...nodeSelectionReducer,
+    ...tabsReducer,
   });

litmus-portal/frontend/src/redux/reducers/tabs.ts

@@ -0,0 +1,25 @@
+/* eslint-disable import/prefer-default-export */
+import { TabAction, TabActions, TabState } from '../../models/redux/tabs';
+import createReducer from './createReducer';
+
+const initialState: TabState = {
+  workflows: 0,
+  settings: 0,
+};
+
+export const tabNumber = createReducer<TabState>(initialState, {
+  [TabActions.CHANGE_WORKFLOWS_TAB](state: TabState, action: TabAction) {
+    return {
+      ...state,
+      workflows: action.payload,
+    };
+  },
+  [TabActions.CHANGE_SETTINGS_TAB](state: TabState, action: TabAction) {
+    return {
+      ...state,
+      settings: action.payload,
+    };
+  },
+});
+
+export default tabNumber;

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx

@@ -12,8 +12,8 @@ import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import moment from 'moment';
 import React from 'react';
-import { WorkflowRun } from '../../../../models/graphql/workflowData';
-import { history } from '../../../../redux/configureStore';
+import { WorkflowRun } from '../../../models/graphql/workflowData';
+import { history } from '../../../redux/configureStore';
 import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
 import useStyles from './styles';
 
@@ -77,7 +77,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
   ];
   return (
     <>
-      <TableCell align="center" className={classes.workflowNameData}>
+      <TableCell className={classes.workflowNameData}>
         <Typography>
           <strong>{data.workflow_name}</strong>
         </Typography>
@@ -170,7 +170,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
           <MenuItem
             value="Workflow"
             onClick={() =>
-              history.push(`/workflows/${data.workflow_run_id}/schedule`)
+              history.push(`/workflows/schedule/${data.workflow_run_id}`)
             }
           >
             <div className={classes.expDiv}>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx

@@ -21,21 +21,21 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import SearchIcon from '@material-ui/icons/Search';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { WORKFLOW_DETAILS } from '../../../../graphql';
+import Loader from '../../../components/Loader';
+import { WORKFLOW_DETAILS } from '../../../graphql';
 import {
   ExecutionData,
   Workflow,
   WorkflowDataVars,
   WorkflowRun,
-} from '../../../../models/graphql/workflowData';
-import { RootState } from '../../../../redux/reducers';
+} from '../../../models/graphql/workflowData';
+import { RootState } from '../../../redux/reducers';
 import {
   sortAlphaAsc,
   sortAlphaDesc,
   sortNumAsc,
   sortNumDesc,
-} from '../../../../utils/sort';
-import Loader from '../../../Loader';
+} from '../../../utils/sort';
 import useStyles from './styles';
 import TableData from './TableData';
 
@@ -159,8 +159,8 @@ const BrowseSchedule = () => {
               className={classes.selectText}
             >
               <MenuItem value="All">All</MenuItem>
-              <MenuItem value="Predefined">Cluset pre-defined</MenuItem>
-              <MenuItem value="Kubernetes">Kubernetes Cluster</MenuItem>
+              <MenuItem value="Internal">Internal</MenuItem>
+              <MenuItem value="External">External</MenuItem>
             </Select>
           </FormControl>
         </div>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts

@@ -75,6 +75,7 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(1.25),
   },
   workflowNameData: {
+    maxWidth: '15.625rem',
     borderRight: `1px solid ${theme.palette.customColors.black(0.1)}`,
   },
   regularity: {

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Typography } from '@material-ui/core';
-import AdjustedWeight from '../../../AdjustedWeights';
+import React from 'react';
+import AdjustedWeight from '../../../components/AdjustedWeights';
 import useStyles from './styles';
 
 interface ExperimentDetailsProps {

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { Typography } from '@material-ui/core';
+import React from 'react';
+import capitalize from '../../../utils/capitalize';
 import useStyles from './styles';
-import capitalize from '../../../../utils/capitalize';
 
 interface HeadProps {
   image?: string;

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx

@@ -1,11 +1,11 @@
 import { Divider, Typography } from '@material-ui/core';
 import React from 'react';
-import Scaffold from '../../../../containers/layouts/Scaffold';
-import { preDefinedWorkflowData } from '../../../../models/predefinedWorkflow';
-import { LocationState } from '../../../../models/routerModel';
-import { history } from '../../../../redux/configureStore';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutlined from '../../../Button/ButtonOutline';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutlined from '../../../components/Button/ButtonOutline';
+import Scaffold from '../../../containers/layouts/Scaffold';
+import { preDefinedWorkflowData } from '../../../models/predefinedWorkflow';
+import { LocationState } from '../../../models/routerModel';
+import { history } from '../../../redux/configureStore';
 import ExperimentDetails from './ExperimentDetails';
 import Head from './Head';
 import Recommendation from './Recommendation';

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx

@@ -1,23 +1,23 @@
-import React, { useState } from 'react';
 import {
-  InputBase,
-  InputAdornment,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  Typography,
-  IconButton,
-  Popover,
   Button,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputBase,
+  InputLabel,
+  MenuItem,
+  Popover,
+  Select,
+  Typography,
 } from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import SearchIcon from '@material-ui/icons/Search';
+import React, { useState } from 'react';
 import { DateRangePicker } from 'react-date-range';
-import useStyles from './styles';
 import 'react-date-range/dist/styles.css'; // main css file
 import 'react-date-range/dist/theme/default.css'; // theme css file
+import useStyles from './styles';
 
 interface HeaderSectionProps {
   searchValue: string;
@@ -130,8 +130,8 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
             className={classes.selectText}
           >
             <MenuItem value="All">All</MenuItem>
-            <MenuItem value="Predefined">Cluset pre-defined</MenuItem>
-            <MenuItem value="Kubernetes">Kubernetes Cluster</MenuItem>
+            <MenuItem value="Internal">Internal</MenuItem>
+            <MenuItem value="External">External</MenuItem>
           </Select>
         </FormControl>
 

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx

@@ -10,9 +10,9 @@ import React from 'react';
 import {
   ExecutionData,
   WorkflowRun,
-} from '../../../../models/graphql/workflowData';
-import { history } from '../../../../redux/configureStore';
-import timeDifferenceForDate from '../../../../utils/datesModifier';
+} from '../../../models/graphql/workflowData';
+import { history } from '../../../redux/configureStore';
+import timeDifferenceForDate from '../../../utils/datesModifier';
 import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
 import CustomStatus from '../CustomStatus/Status';
 import useStyles from './styles';
@@ -102,17 +102,17 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
           <MenuItem
             value="Workflow"
             onClick={() =>
-              history.push(`/workflows/${data.workflow_run_id}/details`)
+              history.push(`/workflows/details/${data.workflow_run_id}`)
             }
           >
             Show the workflow
           </MenuItem>
           <MenuItem value="Analysis" onClick={handleMenu}>
-            Show the analysis
+            Show the analytics
           </MenuItem>
-          <MenuItem value="Scheduler" onClick={handleMenu}>
+          {/* <MenuItem value="Scheduler" onClick={handleMenu}>
             Show the scheduler
-          </MenuItem>
+          </MenuItem> */}
         </Menu>
       </TableCell>
     </>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx

@@ -15,21 +15,21 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import moment from 'moment';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { WORKFLOW_DETAILS, WORKFLOW_EVENTS } from '../../../../graphql';
+import { WORKFLOW_DETAILS, WORKFLOW_EVENTS } from '../../../graphql';
 import {
   ExecutionData,
   Workflow,
   WorkflowDataVars,
   WorkflowRun,
   WorkflowSubscription,
-} from '../../../../models/graphql/workflowData';
-import { RootState } from '../../../../redux/reducers';
+} from '../../../models/graphql/workflowData';
+import { RootState } from '../../../redux/reducers';
 import {
   sortAlphaAsc,
   sortAlphaDesc,
   sortNumAsc,
   sortNumDesc,
-} from '../../../../utils/sort';
+} from '../../../utils/sort';
 import HeaderSection from './HeaderSection';
 import useStyles from './styles';
 import TableData from './TableData';
@@ -156,7 +156,7 @@ const BrowseWorkflow = () => {
     .filter((dataRow) =>
       filters.cluster === 'All'
         ? true
-        : dataRow.cluster_name.toLowerCase().includes(filters.cluster)
+        : dataRow.cluster_name.includes(filters.cluster)
     )
     .filter((dataRow) => {
       return dateRange.fromDate && dateRange.toDate === undefined

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts

@@ -87,6 +87,7 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(5.625),
   },
   workflowNameData: {
+    maxWidth: '15.625rem',
     borderRight: `1px solid ${theme.palette.customColors.black(0.1)}`,
   },
   targetCluster: {

litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { history } from '../../../../redux/configureStore';
-import parsed from '../../../../utils/yamlUtils';
-import PredifinedWorkflows from '../../../PredifinedWorkflows';
-import workflowData from '../../../PredifinedWorkflows/data';
+import PredifinedWorkflows from '../../../components/PredifinedWorkflows';
+import workflowData from '../../../components/PredifinedWorkflows/data';
+import { history } from '../../../redux/configureStore';
+import parsed from '../../../utils/yamlUtils';
 import useStyles from './styles';
 
 const Templates = () => {
@@ -24,7 +24,7 @@ const Templates = () => {
             testWeights.push(10);
           });
           history.push({
-            pathname: `/workflows/${workflowData[index].title}/template`,
+            pathname: `/workflows/template/${workflowData[index].title}`,
             state: {
               workflowData: workflowData[index],
               testNames,

litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/index.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable no-empty-pattern */
 /* eslint-disable no-return-assign */
 /* eslint-disable no-param-reassign */
-import React, { useEffect } from 'react';
+import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
 import Plotly from 'plotly.js';
+import { string } from 'prop-types';
+import React, { useEffect } from 'react';
 import createPlotlyComponent from 'react-plotly.js/factory';
 import { useSelector } from 'react-redux';
-import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
-import { string } from 'prop-types';
-import { RootState } from '../../../../redux/reducers';
+import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
 
 const Plot = createPlotlyComponent(Plotly);

litmus-portal/frontend/src/views/Community/GeoMap/CityMap.tsx

@@ -7,7 +7,7 @@ import {
   Marker,
   ZoomableGroup,
 } from 'react-simple-maps';
-import { RootState } from '../../../../redux/reducers';
+import { RootState } from '../../../redux/reducers';
 import datageo from './geo.json';
 
 const geoUrl = datageo;

litmus-portal/frontend/src/views/Community/GeoMap/CountryMap.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Chart from 'react-google-charts';
 import { useSelector } from 'react-redux';
-import { RootState } from '../../../../redux/reducers';
+import { RootState } from '../../../redux/reducers';
 
 /* Country geo Map is used for location of users with Country and 
 respective count of users wise to present it on map */

litmus-portal/frontend/src/views/Community/GeoMap/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import BinarySwitch from '../../../Button/BinarySwitch';
+import BinarySwitch from '../../../components/Button/BinarySwitch';
 import CityMap from './CityMap';
 import CountryMap from './CountryMap';
 

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from 'react';
 import { Typography } from '@material-ui/core';
 import Divider from '@material-ui/core/Divider';
+import React, { useEffect, useState } from 'react';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../components/Button/ButtonOutline';
+import PredifinedWorkflows from '../../../components/PredifinedWorkflows';
+import workflowsList from '../../../components/PredifinedWorkflows/data';
+import Unimodal from '../../../containers/layouts/Unimodal';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
 import useStyles, { CssTextField } from './styles';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import PredifinedWorkflows from '../../../PredifinedWorkflows';
-import workflowsList from '../../../PredifinedWorkflows/data';
-import Unimodal from '../../../../containers/layouts/Unimodal';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutline from '../../../Button/ButtonOutline';
 // import { getWkfRunCount } from "../../utils";
 
 const ChooseWorkflow: React.FC = () => {

litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx

@@ -6,11 +6,11 @@ import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import React from 'react';
+import InfoTooltip from '../../../components/InfoTooltip';
+import Center from '../../../containers/layouts/Center';
 import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
 import ToggleComponent from '../ToggleComponent';
 import useStyles from './styles';
-import InfoTooltip from '../../../InfoTooltip';
-import Center from '../../../../containers/layouts/Center';
 
 function createData(
   name: string,

litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/index.tsx

@@ -1,18 +1,18 @@
 import { Typography } from '@material-ui/core';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import Center from '../../../../containers/layouts/Center';
-import Unimodal from '../../../../containers/layouts/Unimodal';
-import { experimentMap, WorkflowData } from '../../../../models/redux/workflow';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { RootState } from '../../../../redux/reducers';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutline from '../../../Button/ButtonOutline';
-import InfoTooltip from '../../../InfoTooltip';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../components/Button/ButtonOutline';
+import Center from '../../../containers/layouts/Center';
+import Unimodal from '../../../containers/layouts/Unimodal';
+import { experimentMap, WorkflowData } from '../../../models/redux/workflow';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { RootState } from '../../../redux/reducers';
 import WeightSlider from '../WeightSlider';
 import ResultTable from './ResultTable';
 import useStyles from './styles';
+// import InfoTooltip from '../../../components/InfoTooltip';
 
 const ReliablityScore = () => {
   const classes = useStyles();
@@ -99,9 +99,9 @@ const ReliablityScore = () => {
                   </Typography>
                 </div>
               </ButtonOutline>
-              <div className={classes.toolTipDiv}>
+              {/* <div className={classes.toolTipDiv}>
                 <InfoTooltip value="Text Default" />
-              </div>
+                </div> */}
               <Unimodal
                 isOpen={open}
                 handleClose={() => setOpen(false)}

litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/index.tsx

@@ -8,8 +8,8 @@ import {
   Typography,
 } from '@material-ui/core';
 import React from 'react';
-import CustomDate from '../../../DateTime/CustomDate/index';
-import CustomTime from '../../../DateTime/CustomTime/index';
+import CustomDate from '../../../components/DateTime/CustomDate/index';
+import CustomTime from '../../../components/DateTime/CustomTime/index';
 import SetTime from './SetTime/index';
 import useStyles from './styles';
 

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx

@@ -3,12 +3,12 @@ import Divider from '@material-ui/core/Divider';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import YAML from 'yaml';
-import { WorkflowData } from '../../../../models/redux/workflow';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { RootState } from '../../../../redux/reducers';
-import Loader from '../../../Loader';
-import YamlEditor from '../../../YamlEditor/Editor';
+import Loader from '../../../components/Loader';
+import YamlEditor from '../../../components/YamlEditor/Editor';
+import { WorkflowData } from '../../../models/redux/workflow';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
 
 const TuneWorkflow: React.FC = () => {

litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx

@@ -1,22 +1,22 @@
 import { Divider, Typography } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import Unimodal from '../../../../containers/layouts/Unimodal';
-import { experimentMap, WorkflowData } from '../../../../models/redux/workflow';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { RootState } from '../../../../redux/reducers';
-import AdjustedWeights from '../../../AdjustedWeights';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutline from '../../../Button/ButtonOutline/index';
-import CustomText from '../../../CustomText';
-import CustomDate from '../../../DateTime/CustomDate';
-import CustomTime from '../../../DateTime/CustomTime';
-import YamlEditor from '../../../YamlEditor/Editor';
+import AdjustedWeights from '../../../components/AdjustedWeights';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../components/Button/ButtonOutline/index';
+import CustomText from '../../../components/CustomText';
+import CustomDate from '../../../components/DateTime/CustomDate';
+import CustomTime from '../../../components/DateTime/CustomTime';
+import YamlEditor from '../../../components/YamlEditor/Editor';
 import {
   AceValidations,
   parseYamlValidations,
-} from '../../../YamlEditor/Validations';
+} from '../../../components/YamlEditor/Validations';
+import Unimodal from '../../../containers/layouts/Unimodal';
+import { experimentMap, WorkflowData } from '../../../models/redux/workflow';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
 
 interface VerifyCommitProps {

litmus-portal/frontend/src/views/CreateWorkflow/WorkflowCluster/index.tsx

@@ -3,18 +3,18 @@ import {
   FormControl,
   FormControlLabel,
   RadioGroup,
-  Typography,
   Snackbar,
+  Typography,
 } from '@material-ui/core';
 import Radio from '@material-ui/core/Radio';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { GET_CLUSTER } from '../../../../graphql';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { RootState } from '../../../../redux/reducers';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutLine from '../../../Button/ButtonOutline';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutLine from '../../../components/Button/ButtonOutline';
+import { GET_CLUSTER } from '../../../graphql';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
 
 /*

litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx

@@ -1,11 +1,11 @@
 import { Button, Divider, Typography } from '@material-ui/core';
 import React, { useRef } from 'react';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
+import InputField from '../../../../components/InputField';
+import Unimodal from '../../../../containers/layouts/Unimodal';
 import {
   validateConfirmPassword,
   validateStartEmptySpacing,
-} from '../../../../../utils/validate';
-import InputField from '../../../../InputField';
+} from '../../../../utils/validate';
 import PersonalDetails from '../PersonalDetails';
 import useStyles from './styles';
 

litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx

@@ -2,13 +2,13 @@ import { useQuery } from '@apollo/client';
 import { Button, Typography } from '@material-ui/core';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
-import { GET_USER } from '../../../../../graphql';
+import Unimodal from '../../../../containers/layouts/Unimodal';
+import { GET_USER } from '../../../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
-} from '../../../../../models/graphql/user';
-import { RootState } from '../../../../../redux/reducers';
+} from '../../../../models/graphql/user';
+import { RootState } from '../../../../redux/reducers';
 import UserDetails from '../../UserManagementTab/CreateUser/UserDetails';
 import useStyles from './styles';
 

litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx

@@ -9,20 +9,20 @@ import {
 } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../../../components/Button/ButtonOutline';
 import {
   ACCEPT_INVITE,
   DECLINE_INVITE,
   GET_USER,
-} from '../../../../../../graphql';
-import { MemberInvitation } from '../../../../../../models/graphql/invite';
+} from '../../../../../graphql';
+import { MemberInvitation } from '../../../../../models/graphql/invite';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
-} from '../../../../../../models/graphql/user';
-import { RootState } from '../../../../../../redux/reducers';
-import userAvatar from '../../../../../../utils/user';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
-import ButtonOutline from '../../../../../Button/ButtonOutline';
+} from '../../../../../models/graphql/user';
+import { RootState } from '../../../../../redux/reducers';
+import userAvatar from '../../../../../utils/user';
 import useStyles from './styles';
 
 interface ReceivedInvitation {
@@ -46,11 +46,7 @@ const ReceivedInvitations: React.FC = () => {
   // mutation to accept the invitation
   const [acceptInvite] = useMutation<MemberInvitation>(ACCEPT_INVITE, {
     onCompleted: () => {
-      setRows(
-        rows.filter(function (row) {
-          return row.username !== acceptDecline;
-        })
-      );
+      setRows(rows.filter((row) => row.username !== acceptDecline));
     },
     onError: () => {},
     refetchQueries: [{ query: GET_USER, variables: { username } }],
@@ -59,11 +55,7 @@ const ReceivedInvitations: React.FC = () => {
   // mutation to decline the invitation
   const [declineInvite] = useMutation<MemberInvitation>(DECLINE_INVITE, {
     onCompleted: () => {
-      setRows(
-        rows.filter(function (row) {
-          return row.username !== acceptDecline;
-        })
-      );
+      setRows(rows.filter((row) => row.username !== acceptDecline));
     },
     onError: () => {},
     refetchQueries: [{ query: GET_USER, variables: { username } }],
@@ -78,7 +70,7 @@ const ReceivedInvitations: React.FC = () => {
   useEffect(() => {
     if (data?.getUser.username === username) {
       const projectList = data?.getUser.projects;
-      let users: ReceivedInvitation[] = [];
+      const users: ReceivedInvitation[] = [];
 
       let flag = 0;
 
@@ -95,7 +87,7 @@ const ReceivedInvitations: React.FC = () => {
         if (flag === 1) {
           project.members.forEach((member) => {
             if (member.user_name !== username && member.role === 'Owner') {
-              users = users.concat(rows, {
+              users.push({
                 username: member.user_name,
                 role: member.role,
                 projectName: project.name,

litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/SentInvitations/index.tsx

@@ -9,15 +9,15 @@ import {
 } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { GET_USER } from '../../../../../../graphql';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import { GET_USER } from '../../../../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Member,
-} from '../../../../../../models/graphql/user';
-import { RootState } from '../../../../../../redux/reducers';
-import userAvatar from '../../../../../../utils/user';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
+} from '../../../../../models/graphql/user';
+import { RootState } from '../../../../../redux/reducers';
+import userAvatar from '../../../../../utils/user';
 import useStyles from './styles';
 
 const SentInvitations: React.FC = () => {
@@ -34,7 +34,7 @@ const SentInvitations: React.FC = () => {
   );
 
   let memberList: Member[];
-  let users: Member[] = [];
+  const users: Member[] = [];
   useEffect(() => {
     if (data?.getUser.username === userData.username) {
       const projectList = data?.getUser.projects;
@@ -47,12 +47,12 @@ const SentInvitations: React.FC = () => {
 
       memberList.forEach((member) => {
         if (member.invitation === 'Pending') {
-          users = users.concat(rows, member);
+          users.push(member);
         }
         setRows(users);
       });
     }
-  }, [data]);
+  }, [data, userData.selectedProjectID]);
 
   return (
     <div>

litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Paper, Tab, Tabs, Typography } from '@material-ui/core';
 import React from 'react';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
-import ButtonOutline from '../../../../Button/ButtonOutline';
+import ButtonOutline from '../../../../components/Button/ButtonOutline';
+import Unimodal from '../../../../containers/layouts/Unimodal';
 import ReceivedInvitations from './ReceivedInvitations';
 import SentInvitations from './SentInvitations';
 import useStyles from './styles';

litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/TableData.tsx

@@ -8,13 +8,14 @@ import {
   Typography,
 } from '@material-ui/core';
 import React, { useState } from 'react';
-import userAvatar from '../../../../../../utils/user';
+import { UserInvite } from '../../../../../models/graphql/invite';
+import userAvatar from '../../../../../utils/user';
 import useStyles from './styles';
 
 interface TableDataProps {
-  row: any;
+  row: UserInvite;
   labelId: string;
-  handleCheck: (event: React.MouseEvent<unknown>, name: any) => void;
+  handleCheck: (event: React.MouseEvent<unknown>, row: UserInvite) => void;
   isItemSelected: boolean;
   sendInvite: (username: string, role: string) => void;
 }

litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/index.tsx

@@ -11,26 +11,22 @@ import {
 } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { ALL_USERS, GET_USER, SEND_INVITE } from '../../../../../../graphql';
-import { MemberInviteNew } from '../../../../../../models/graphql/invite';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import Loader from '../../../../../components/Loader';
+import { ALL_USERS, GET_USER, SEND_INVITE } from '../../../../../graphql';
+import {
+  MemberInviteNew,
+  UserInvite,
+} from '../../../../../models/graphql/invite';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Project,
-} from '../../../../../../models/graphql/user';
-import { RootState } from '../../../../../../redux/reducers';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
-import Loader from '../../../../../Loader';
+} from '../../../../../models/graphql/user';
+import { RootState } from '../../../../../redux/reducers';
 import useStyles from './styles';
 import TableData from './TableData';
 
-interface UserInvite {
-  id: string;
-  name: string;
-  username: string;
-  email: string;
-}
-
 interface FilterOptions {
   search: string;
 }

litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
-import ButtonFilled from '../../../../Button/ButtonFilled';
+import ButtonFilled from '../../../../components/Button/ButtonFilled';
+import Unimodal from '../../../../containers/layouts/Unimodal';
 import Invite from './Invite';
 import useStyles from './styles';
 

litmus-portal/frontend/src/views/Settings/TeammingTab/index.tsx

@@ -26,14 +26,14 @@ import SearchIcon from '@material-ui/icons/Search';
 import moment from 'moment';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { GET_USER } from '../../../../graphql';
+import { GET_USER } from '../../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Member,
-} from '../../../../models/graphql/user';
-import { RootState } from '../../../../redux/reducers';
-import userAvatar from '../../../../utils/user';
+} from '../../../models/graphql/user';
+import { RootState } from '../../../redux/reducers';
+import userAvatar from '../../../utils/user';
 import DelUser from '../UserManagementTab/EditUser/DelUser';
 import Invitation from './Invitation';
 import InviteNew from './InviteNew';
@@ -91,7 +91,7 @@ const TeammingTab: React.FC = () => {
 
   // logic for displaying the team members of the user
   let memberList: Member[] = [];
-  let users: Member[] = [];
+  const users: Member[] = [];
   useEffect(() => {
     if (data?.getUser.username === userData.username) {
       const projectList = data?.getUser.projects;
@@ -107,13 +107,13 @@ const TeammingTab: React.FC = () => {
           member.invitation === 'Accepted' &&
           member.user_name !== userData.username
         ) {
-          users = users.concat(rows, member);
+          users.push(member);
         }
 
         setRows(users);
       });
     }
-  }, [data]);
+  }, [data, userData.selectedProjectID]);
 
   // for data filtering based on user role
   const filteredData =

litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/index.tsx

@@ -1,10 +1,10 @@
 import { Typography } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import config from '../../../../../../config';
-import Unimodal from '../../../../../../containers/layouts/Unimodal';
-import { RootState } from '../../../../../../redux/reducers';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import config from '../../../../../config';
+import Unimodal from '../../../../../containers/layouts/Unimodal';
+import { RootState } from '../../../../../redux/reducers';
 import useStyles from './styles';
 
 // Props for NewUserModal component

litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx

@@ -1,11 +1,11 @@
 import { Avatar, Typography } from '@material-ui/core';
 import React from 'react';
-import userAvatar from '../../../../../../utils/user';
+import InputField from '../../../../../components/InputField';
+import userAvatar from '../../../../../utils/user';
 import {
   validateEmail,
   validateStartEmptySpacing,
-} from '../../../../../../utils/validate';
-import InputField from '../../../../../InputField';
+} from '../../../../../utils/validate';
 import useStyles from './styles';
 
 interface PersonalDetailsProps {

litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/index.tsx

@@ -1,10 +1,10 @@
 import { Divider, IconButton, Typography } from '@material-ui/core';
 import React from 'react';
+import InputField from '../../../../components/InputField';
 import {
   validateLength,
   validateStartEmptySpacing,
-} from '../../../../../utils/validate';
-import InputField from '../../../../InputField';
+} from '../../../../utils/validate';
 import NewUserModal from './NewUserModal';
 import useStyles from './styles';
 import UserDetails from './UserDetails';