From 786407b971c31010c2df422c3399872b45b9f994 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Mon, 21 Aug 2023 10:46:40 -0600
Subject: [PATCH 1/6] feature(frontend): Adding a way to customize Tracetest
 header

---
 web/src/BaseApp.tsx                           |  9 +++-
 web/src/components/Header/Header.styled.tsx   | 11 ++++-
 web/src/components/Header/Header.tsx          |  8 +---
 web/src/components/Header/index.ts            |  5 +++
 web/src/components/Layout/Layout.tsx          | 19 +++++----
 .../Layout/__tests__/Layout.test.tsx          |  6 +--
 .../NoTracingPopover.styled.ts                |  2 +-
 web/src/components/Router/Router.tsx          | 41 +++++++++++--------
 .../RunDetailLayout/HeaderRight.tsx           |  2 +
 web/src/components/TestHeader/TestHeader.tsx  |  2 +
 .../TestSuiteHeader/TestSuiteHeader.tsx       |  2 +
 .../TestSuiteRunLayout/TestSuiteRunLayout.tsx | 11 ++---
 .../AutomatedTestRun/AutomatedTestRun.tsx     | 13 +++---
 web/src/pages/Home/Home.styled.tsx            |  3 ++
 web/src/pages/Home/Home.tsx                   | 21 ++++------
 web/src/pages/Home/TestsList.tsx              |  2 +
 web/src/pages/RunDetail/RunDetail.tsx         | 25 +++++------
 web/src/pages/Settings/Settings.tsx           | 17 ++++----
 web/src/pages/Test/Test.tsx                   |  9 ++--
 web/src/pages/TestSuite/TestSuite.tsx         |  9 ++--
 .../pages/TestSuites/TestSuites.styled.tsx    |  3 ++
 web/src/pages/TestSuites/TestSuites.tsx       | 21 ++++------
 web/src/pages/TestSuites/TestSuitesList.tsx   |  2 +
 web/src/pages/VariableSet/VariableSet.tsx     |  7 +---
 24 files changed, 128 insertions(+), 122 deletions(-)

diff --git a/web/src/BaseApp.tsx b/web/src/BaseApp.tsx
index f7340fe151..1d0d7412c3 100644
--- a/web/src/BaseApp.tsx
+++ b/web/src/BaseApp.tsx
@@ -1,9 +1,14 @@
 import Router from 'components/Router';
 import SettingsValuesProvider from 'providers/SettingsValues';
+import {TCustomHeader} from 'components/Layout/Layout';
 
-const BaseApp = () => (
+interface IProps {
+  customHeader?: TCustomHeader;
+}
+
+const BaseApp = ({customHeader}: IProps) => (
   <SettingsValuesProvider>
-    <Router />
+    <Router customHeader={customHeader} />
   </SettingsValuesProvider>
 );
 
diff --git a/web/src/components/Header/Header.styled.tsx b/web/src/components/Header/Header.styled.tsx
index 91a135cea0..2120909f41 100644
--- a/web/src/components/Header/Header.styled.tsx
+++ b/web/src/components/Header/Header.styled.tsx
@@ -12,6 +12,7 @@ export const Header = styled(Layout.Header)`
   line-height: 48px;
   padding: 0;
   padding-left: 24px;
+  padding-right: 24px;
 
   .ant-dropdown-trigger {
     display: block;
@@ -29,13 +30,12 @@ export const Header = styled(Layout.Header)`
 
 export const Logo = styled.img`
   height: 24px;
-  margin-right: 24px;
+  margin-right: 12px;
 `;
 
 export const QuestionIcon = styled(QuestionCircleOutlined)`
   color: ${({theme}) => theme.color.primary};
   font-size: ${({theme}) => theme.size.lg};
-  margin: 0 24px;
 `;
 
 export const AppVersion = styled(Typography.Text)`
@@ -44,3 +44,10 @@ export const AppVersion = styled(Typography.Text)`
     font-size: ${({theme}) => theme.size.sm};
   }
 `;
+
+export const MenuContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  flex-direction: row;
+  align-items: center;
+`;
diff --git a/web/src/components/Header/Header.tsx b/web/src/components/Header/Header.tsx
index ded0ad305a..dae5ad9c8a 100644
--- a/web/src/components/Header/Header.tsx
+++ b/web/src/components/Header/Header.tsx
@@ -1,7 +1,4 @@
-import {Space} from 'antd';
-
 import Logo from 'assets/Logo.svg';
-import VariableSetSelector from 'components/VariableSetSelector';
 import Link from 'components/Link';
 import NoTracingPopover from 'components/NoTracingPopover';
 import * as S from './Header.styled';
@@ -22,11 +19,10 @@ const Header = ({hasLogo = false, isNoTracingMode}: IProps) => (
       )}
     </div>
 
-    <Space>
+    <S.MenuContainer>
       {isNoTracingMode && <NoTracingPopover />}
-      <VariableSetSelector />
       <HelpMenu />
-    </Space>
+    </S.MenuContainer>
   </S.Header>
 );
 
diff --git a/web/src/components/Header/index.ts b/web/src/components/Header/index.ts
index 3e9dde4818..18e5eff1dd 100644
--- a/web/src/components/Header/index.ts
+++ b/web/src/components/Header/index.ts
@@ -1,2 +1,7 @@
+import HelpMenu from './HelpMenu';
+import * as HeaderStyled from './Header.styled';
+
 // eslint-disable-next-line no-restricted-exports
 export {default} from './Header';
+
+export {HelpMenu, HeaderStyled};
diff --git a/web/src/components/Layout/Layout.tsx b/web/src/components/Layout/Layout.tsx
index 812b4b60e7..6a7c0822a1 100644
--- a/web/src/components/Layout/Layout.tsx
+++ b/web/src/components/Layout/Layout.tsx
@@ -1,7 +1,6 @@
-import {ClusterOutlined, GlobalOutlined, SettingOutlined} from '@ant-design/icons';
+import {AppstoreAddOutlined, ClusterOutlined, GlobalOutlined, SettingOutlined} from '@ant-design/icons';
 import {Menu} from 'antd';
-import React from 'react';
-import {useLocation} from 'react-router-dom';
+import {Outlet, useLocation} from 'react-router-dom';
 
 import logoAsset from 'assets/logo-white.svg';
 import FileViewerModalProvider from 'components/FileViewerModal/FileViewerModal.provider';
@@ -16,8 +15,10 @@ import NotificationProvider from 'providers/Notification/Notification.provider';
 import {ConfigMode} from 'types/DataStore.types';
 import * as S from './Layout.styled';
 
+export type TCustomHeader = typeof Header;
+
 interface IProps {
-  children?: React.ReactNode;
+  customHeader?: TCustomHeader;
   hasMenu?: boolean;
 }
 
@@ -30,7 +31,7 @@ const menuItems = [
   },
   {
     key: '1',
-    icon: <ClusterOutlined />,
+    icon: <AppstoreAddOutlined />,
     label: <Link to="/testsuites">Test Suites</Link>,
     path: '/testsuites',
   },
@@ -51,7 +52,7 @@ const footerMenuItems = [
   },
 ];
 
-const Layout = ({children, hasMenu = false}: IProps) => {
+const Layout = ({hasMenu = false, customHeader: CustomHeader = Header}: IProps) => {
   useRouterSync();
   const {dataStoreConfig, isLoading} = useSettingsValues();
   const pathname = useLocation().pathname;
@@ -99,8 +100,10 @@ const Layout = ({children, hasMenu = false}: IProps) => {
                 )}
 
                 <S.Layout>
-                  <Header hasLogo={!hasMenu} isNoTracingMode={isNoTracingMode && !isLoading} />
-                  <S.Content $hasMenu={hasMenu}>{children}</S.Content>
+                  <CustomHeader hasLogo={!hasMenu} isNoTracingMode={isNoTracingMode && !isLoading} />
+                  <S.Content $hasMenu={hasMenu}>
+                    <Outlet />
+                  </S.Content>
                 </S.Layout>
               </S.Layout>
             </VariableSetProvider>
diff --git a/web/src/components/Layout/__tests__/Layout.test.tsx b/web/src/components/Layout/__tests__/Layout.test.tsx
index bba02f557e..291bb50ac4 100644
--- a/web/src/components/Layout/__tests__/Layout.test.tsx
+++ b/web/src/components/Layout/__tests__/Layout.test.tsx
@@ -2,11 +2,7 @@ import {render} from 'test-utils';
 import Layout from '../Layout';
 
 it('Layout', async () => {
-  const {getByText, getByTestId} = render(
-    <Layout>
-      <h2>This</h2>
-    </Layout>
-  );
+  const {getByText, getByTestId} = render(<Layout />);
 
   expect(getByTestId('menu-link')).toBeInTheDocument();
   expect(getByText('This')).toBeTruthy();
diff --git a/web/src/components/NoTracingPopover/NoTracingPopover.styled.ts b/web/src/components/NoTracingPopover/NoTracingPopover.styled.ts
index 24ee49b2e2..2ac3483df4 100644
--- a/web/src/components/NoTracingPopover/NoTracingPopover.styled.ts
+++ b/web/src/components/NoTracingPopover/NoTracingPopover.styled.ts
@@ -58,7 +58,7 @@ export const Trigger = styled.div`
   gap: 6px;
   align-items: center;
   cursor: pointer;
-  margin-right: 24px;
+  margin-right: 8px;
   border-radius: 12px;
   padding: 4px 7px;
   background: ${({theme}) => theme.color.backgroundDark};
diff --git a/web/src/components/Router/Router.tsx b/web/src/components/Router/Router.tsx
index 9e04dfe197..18d7723d83 100644
--- a/web/src/components/Router/Router.tsx
+++ b/web/src/components/Router/Router.tsx
@@ -10,25 +10,32 @@ import TestSuite from 'pages/TestSuite';
 import TestSuiteRunOverview from 'pages/TestSuiteRunOverview';
 import TestSuiteRunAutomate from 'pages/TestSuiteRunAutomate';
 import AutomatedTestRun from 'pages/AutomatedTestRun';
+import Layout, {TCustomHeader} from 'components/Layout/Layout';
 
-const Router = () => (
-  <Routes>
-    <Route path="/" element={<Home />} />
-    <Route path="/testsuites" element={<TestSuites />} />
-
-    <Route path="/variablesets" element={<VariableSet />} />
-
-    <Route path="/settings" element={<Settings />} />
+interface IProps {
+  customHeader?: TCustomHeader;
+}
 
-    <Route path="/test/:testId" element={<Test />} />
-    <Route path="/test/:testId/run/:runId" element={<RunDetail />} />
-    <Route path="/test/:testId/run/:runId/:mode" element={<RunDetail />} />
-    <Route path="/test/:testId/run" element={<AutomatedTestRun />} />
-
-    <Route path="/testsuite/:testSuiteId" element={<TestSuite />} />
-    <Route path="/testsuite/:testSuiteId/run/:runId" element={<TestSuiteRunOverview />} />
-    <Route path="/testsuite/:testSuiteId/run/:runId/overview" element={<TestSuiteRunOverview />} />
-    <Route path="/testsuite/:testSuiteId/run/:runId/automate" element={<TestSuiteRunAutomate />} />
+const Router = ({customHeader}: IProps) => (
+  <Routes>
+    <Route element={<Layout hasMenu customHeader={customHeader} />}>
+      <Route path="/" element={<Home />} />
+      <Route path="/testsuites" element={<TestSuites />} />
+      <Route path="/variablesets" element={<VariableSet />} />
+      <Route path="/settings" element={<Settings />} />
+    </Route>
+
+    <Route element={<Layout customHeader={customHeader} />}>
+      <Route path="/test/:testId" element={<Test />} />
+      <Route path="/test/:testId/run/:runId" element={<RunDetail />} />
+      <Route path="/test/:testId/run/:runId/:mode" element={<RunDetail />} />
+      <Route path="/test/:testId/run" element={<AutomatedTestRun />} />
+
+      <Route path="/testsuite/:testSuiteId" element={<TestSuite />} />
+      <Route path="/testsuite/:testSuiteId/run/:runId" element={<TestSuiteRunOverview />} />
+      <Route path="/testsuite/:testSuiteId/run/:runId/overview" element={<TestSuiteRunOverview />} />
+      <Route path="/testsuite/:testSuiteId/run/:runId/automate" element={<TestSuiteRunAutomate />} />
+    </Route>
 
     <Route path="*" element={<Navigate to="/" />} />
   </Routes>
diff --git a/web/src/components/RunDetailLayout/HeaderRight.tsx b/web/src/components/RunDetailLayout/HeaderRight.tsx
index ceeb9c3bbb..a533c16d34 100644
--- a/web/src/components/RunDetailLayout/HeaderRight.tsx
+++ b/web/src/components/RunDetailLayout/HeaderRight.tsx
@@ -12,6 +12,7 @@ import {useTestOutput} from 'providers/TestOutput/TestOutput.provider';
 import * as S from './RunDetailLayout.styled';
 import EventLogPopover from '../EventLogPopover/EventLogPopover';
 import RunStatusIcon from '../RunStatusIcon/RunStatusIcon';
+import VariableSetSelector from '../VariableSetSelector/VariableSetSelector';
 
 interface IProps {
   testId: string;
@@ -55,6 +56,7 @@ const HeaderRight = ({testId}: IProps) => {
       {(isRunStateSucceeded(state) || isRunStateStopped(state)) && (
         <RunStatusIcon state={state} requiredGatesResult={requiredGatesResult} />
       )}
+      <VariableSetSelector />
       {!isDraftMode && state && isRunStateFinished(state) && (
         <Button data-cy="run-test-button" ghost onClick={() => onRun()} type="primary">
           Run Test
diff --git a/web/src/components/TestHeader/TestHeader.tsx b/web/src/components/TestHeader/TestHeader.tsx
index ce2d01a906..42906a53c4 100644
--- a/web/src/components/TestHeader/TestHeader.tsx
+++ b/web/src/components/TestHeader/TestHeader.tsx
@@ -1,6 +1,7 @@
 import ResourceCardActions from 'components/ResourceCard/ResourceCardActions';
 import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import * as S from './TestHeader.styled';
+import VariableSetSelector from '../VariableSetSelector/VariableSetSelector';
 
 interface IProps {
   description: string;
@@ -27,6 +28,7 @@ const TestHeader = ({description, id, shouldEdit, onEdit, onDelete, title, runBu
         </div>
       </S.Section>
       <S.Section>
+        <VariableSetSelector />
         {runButton}
         <ResourceCardActions id={id} onDelete={onDelete} onEdit={onEdit} shouldEdit={shouldEdit} />
       </S.Section>
diff --git a/web/src/components/TestSuiteHeader/TestSuiteHeader.tsx b/web/src/components/TestSuiteHeader/TestSuiteHeader.tsx
index 16eb294bb4..9762af56fb 100644
--- a/web/src/components/TestSuiteHeader/TestSuiteHeader.tsx
+++ b/web/src/components/TestSuiteHeader/TestSuiteHeader.tsx
@@ -8,6 +8,7 @@ import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import {useTestSuite} from 'providers/TestSuite/TestSuite.provider';
 import {useTestSuiteRun} from 'providers/TestSuiteRun/TestSuite.provider';
 import * as S from './TestSuiteHeader.styled';
+import VariableSetSelector from '../VariableSetSelector/VariableSetSelector';
 
 const testSuiteLastPathRegex = /\/testsuite\/[\w-]+\/run\/[\d-]+\/([\w-]+)/;
 
@@ -67,6 +68,7 @@ const TestSuiteHeader = () => {
             <TestState testState={state} />
           </S.StateContainer>
         )}
+        <VariableSetSelector />
         {state && state === TestStateEnum.FINISHED && (
           <>
             <TestSuiteRunStatusIcon state={state!} hasFailedTests={!allStepsRequiredGatesPassed} />
diff --git a/web/src/components/TestSuiteRunLayout/TestSuiteRunLayout.tsx b/web/src/components/TestSuiteRunLayout/TestSuiteRunLayout.tsx
index 896250cc14..9fc44bdeca 100644
--- a/web/src/components/TestSuiteRunLayout/TestSuiteRunLayout.tsx
+++ b/web/src/components/TestSuiteRunLayout/TestSuiteRunLayout.tsx
@@ -1,5 +1,4 @@
 import {useParams} from 'react-router-dom';
-import Layout from 'components/Layout';
 import TestSuiteHeader from 'components/TestSuiteHeader';
 import TestSuiteRunProvider from 'providers/TestSuiteRun/TestSuite.provider';
 
@@ -11,12 +10,10 @@ const TestSuiteRunLayout = ({children}: IProps) => {
   const {testSuiteId = '', runId = ''} = useParams();
 
   return (
-    <Layout>
-      <TestSuiteRunProvider testSuiteId={testSuiteId} runId={runId}>
-        <TestSuiteHeader />
-        {children}
-      </TestSuiteRunProvider>
-    </Layout>
+    <TestSuiteRunProvider testSuiteId={testSuiteId} runId={runId}>
+      <TestSuiteHeader />
+      {children}
+    </TestSuiteRunProvider>
   );
 };
 
diff --git a/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx b/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx
index 416d4b1280..d72eef3d84 100644
--- a/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx
+++ b/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx
@@ -1,6 +1,5 @@
 import {useParams, useSearchParams} from 'react-router-dom';
 
-import Layout from 'components/Layout';
 import TestSpecFormProvider from 'components/TestSpecForm/TestSpecForm.provider';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import TestProvider from 'providers/Test/Test.provider';
@@ -12,13 +11,11 @@ const AutomatedTestRun = () => {
   const version = query.get('version') ? Number(query.get('version')) : undefined;
 
   return (
-    <Layout hasMenu>
-      <TestProvider testId={testId} version={version}>
-        <TestSpecFormProvider testId={testId}>
-          <Content />
-        </TestSpecFormProvider>
-      </TestProvider>
-    </Layout>
+    <TestProvider testId={testId} version={version}>
+      <TestSpecFormProvider testId={testId}>
+        <Content />
+      </TestSpecFormProvider>
+    </TestProvider>
   );
 };
 
diff --git a/web/src/pages/Home/Home.styled.tsx b/web/src/pages/Home/Home.styled.tsx
index 14001ff99f..dd3c80e612 100644
--- a/web/src/pages/Home/Home.styled.tsx
+++ b/web/src/pages/Home/Home.styled.tsx
@@ -40,6 +40,9 @@ export const TestListContainer = styled.div`
 `;
 
 export const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   border-bottom: ${({theme}) => `1px solid ${theme.color.borderLight}`};
   padding: 23px 0;
   width: 100%;
diff --git a/web/src/pages/Home/Home.tsx b/web/src/pages/Home/Home.tsx
index e208656df4..098d345c77 100644
--- a/web/src/pages/Home/Home.tsx
+++ b/web/src/pages/Home/Home.tsx
@@ -1,4 +1,3 @@
-import Layout from 'components/Layout';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import CreateTestSuiteProvider from 'providers/CreateTestSuite';
@@ -9,17 +8,15 @@ const Home = () => {
   const {isLoading, shouldDisplayConfigSetup, skipConfigSetup} = useSettingsValues();
 
   return (
-    <Layout hasMenu>
-      <CreateTestSuiteProvider>
-        <CreateTestProvider>
-          <Content
-            isLoading={isLoading}
-            shouldDisplayConfigSetup={shouldDisplayConfigSetup}
-            skipConfigSetup={skipConfigSetup}
-          />
-        </CreateTestProvider>
-      </CreateTestSuiteProvider>
-    </Layout>
+    <CreateTestSuiteProvider>
+      <CreateTestProvider>
+        <Content
+          isLoading={isLoading}
+          shouldDisplayConfigSetup={shouldDisplayConfigSetup}
+          skipConfigSetup={skipConfigSetup}
+        />
+      </CreateTestProvider>
+    </CreateTestSuiteProvider>
   );
 };
 
diff --git a/web/src/pages/Home/TestsList.tsx b/web/src/pages/Home/TestsList.tsx
index 2e3ebe17a5..ba2c12f044 100644
--- a/web/src/pages/Home/TestsList.tsx
+++ b/web/src/pages/Home/TestsList.tsx
@@ -11,6 +11,7 @@ import {ADD_TEST_URL} from 'constants/Common.constants';
 import HomeAnalyticsService from 'services/Analytics/HomeAnalytics.service';
 import useDeleteResource from 'hooks/useDeleteResource';
 import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
+import VariableSetSelector from 'components/VariableSetSelector/VariableSetSelector';
 import Test from 'models/Test.model';
 import * as S from './Home.styled';
 import CreateButton from './CreateButton';
@@ -57,6 +58,7 @@ const Tests = () => {
       <S.Wrapper>
         <S.HeaderContainer>
           <S.TitleText>All Tests</S.TitleText>
+          <VariableSetSelector />
         </S.HeaderContainer>
 
         <S.ActionsContainer>
diff --git a/web/src/pages/RunDetail/RunDetail.tsx b/web/src/pages/RunDetail/RunDetail.tsx
index 51bb8c9a77..daf36f88a5 100644
--- a/web/src/pages/RunDetail/RunDetail.tsx
+++ b/web/src/pages/RunDetail/RunDetail.tsx
@@ -1,6 +1,5 @@
 import {useParams} from 'react-router-dom';
 
-import Layout from 'components/Layout';
 import TestSpecFormProvider from 'components/TestSpecForm/TestSpecForm.provider';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import GuidedTourProvider from 'providers/GuidedTour';
@@ -15,19 +14,17 @@ const RunDetail = () => {
 
   return (
     <GuidedTourProvider>
-      <Layout>
-        <TestRunProvider testId={testId} runId={runId}>
-          <TestSpecsProvider testId={testId} runId={runId}>
-            <TestSpecFormProvider testId={testId}>
-              <SpanProvider>
-                <TestOutputProvider testId={testId} runId={runId}>
-                  <Content />
-                </TestOutputProvider>
-              </SpanProvider>
-            </TestSpecFormProvider>
-          </TestSpecsProvider>
-        </TestRunProvider>
-      </Layout>
+      <TestRunProvider testId={testId} runId={runId}>
+        <TestSpecsProvider testId={testId} runId={runId}>
+          <TestSpecFormProvider testId={testId}>
+            <SpanProvider>
+              <TestOutputProvider testId={testId} runId={runId}>
+                <Content />
+              </TestOutputProvider>
+            </SpanProvider>
+          </TestSpecFormProvider>
+        </TestSpecsProvider>
+      </TestRunProvider>
     </GuidedTourProvider>
   );
 };
diff --git a/web/src/pages/Settings/Settings.tsx b/web/src/pages/Settings/Settings.tsx
index c382f551ed..ef1fb6103f 100644
--- a/web/src/pages/Settings/Settings.tsx
+++ b/web/src/pages/Settings/Settings.tsx
@@ -1,4 +1,3 @@
-import Layout from 'components/Layout';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import DataStoreProvider from 'providers/DataStore';
 import SettingsProvider from 'providers/Settings';
@@ -6,15 +5,13 @@ import Content from './Content';
 import ContactUs from '../../components/ContactUs/ContactUs';
 
 const Settings = () => (
-  <Layout hasMenu>
-    <ContactUs>
-      <DataStoreProvider>
-        <SettingsProvider>
-          <Content />
-        </SettingsProvider>
-      </DataStoreProvider>
-    </ContactUs>
-  </Layout>
+  <ContactUs>
+    <DataStoreProvider>
+      <SettingsProvider>
+        <Content />
+      </SettingsProvider>
+    </DataStoreProvider>
+  </ContactUs>
 );
 
 export default withAnalytics(Settings, 'settings');
diff --git a/web/src/pages/Test/Test.tsx b/web/src/pages/Test/Test.tsx
index 16838aa029..c48dfbb635 100644
--- a/web/src/pages/Test/Test.tsx
+++ b/web/src/pages/Test/Test.tsx
@@ -1,6 +1,5 @@
 import {useParams} from 'react-router-dom';
 
-import Layout from 'components/Layout';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import TestProvider from 'providers/Test';
 import Content from './Content';
@@ -9,11 +8,9 @@ const Test = () => {
   const {testId = ''} = useParams();
 
   return (
-    <Layout hasMenu>
-      <TestProvider testId={testId}>
-        <Content />
-      </TestProvider>
-    </Layout>
+    <TestProvider testId={testId}>
+      <Content />
+    </TestProvider>
   );
 };
 
diff --git a/web/src/pages/TestSuite/TestSuite.tsx b/web/src/pages/TestSuite/TestSuite.tsx
index 5af85f1ac1..c261bdcaef 100644
--- a/web/src/pages/TestSuite/TestSuite.tsx
+++ b/web/src/pages/TestSuite/TestSuite.tsx
@@ -1,6 +1,5 @@
 import {useParams} from 'react-router-dom';
 
-import Layout from 'components/Layout';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import TestSuiteProvider from 'providers/TestSuite';
 import Content from './Content';
@@ -9,11 +8,9 @@ const TestSuite = () => {
   const {testSuiteId = ''} = useParams();
 
   return (
-    <Layout hasMenu>
-      <TestSuiteProvider testSuiteId={testSuiteId}>
-        <Content />
-      </TestSuiteProvider>
-    </Layout>
+    <TestSuiteProvider testSuiteId={testSuiteId}>
+      <Content />
+    </TestSuiteProvider>
   );
 };
 
diff --git a/web/src/pages/TestSuites/TestSuites.styled.tsx b/web/src/pages/TestSuites/TestSuites.styled.tsx
index 14001ff99f..dd3c80e612 100644
--- a/web/src/pages/TestSuites/TestSuites.styled.tsx
+++ b/web/src/pages/TestSuites/TestSuites.styled.tsx
@@ -40,6 +40,9 @@ export const TestListContainer = styled.div`
 `;
 
 export const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   border-bottom: ${({theme}) => `1px solid ${theme.color.borderLight}`};
   padding: 23px 0;
   width: 100%;
diff --git a/web/src/pages/TestSuites/TestSuites.tsx b/web/src/pages/TestSuites/TestSuites.tsx
index e208656df4..098d345c77 100644
--- a/web/src/pages/TestSuites/TestSuites.tsx
+++ b/web/src/pages/TestSuites/TestSuites.tsx
@@ -1,4 +1,3 @@
-import Layout from 'components/Layout';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import CreateTestSuiteProvider from 'providers/CreateTestSuite';
@@ -9,17 +8,15 @@ const Home = () => {
   const {isLoading, shouldDisplayConfigSetup, skipConfigSetup} = useSettingsValues();
 
   return (
-    <Layout hasMenu>
-      <CreateTestSuiteProvider>
-        <CreateTestProvider>
-          <Content
-            isLoading={isLoading}
-            shouldDisplayConfigSetup={shouldDisplayConfigSetup}
-            skipConfigSetup={skipConfigSetup}
-          />
-        </CreateTestProvider>
-      </CreateTestSuiteProvider>
-    </Layout>
+    <CreateTestSuiteProvider>
+      <CreateTestProvider>
+        <Content
+          isLoading={isLoading}
+          shouldDisplayConfigSetup={shouldDisplayConfigSetup}
+          skipConfigSetup={skipConfigSetup}
+        />
+      </CreateTestProvider>
+    </CreateTestSuiteProvider>
   );
 };
 
diff --git a/web/src/pages/TestSuites/TestSuitesList.tsx b/web/src/pages/TestSuites/TestSuitesList.tsx
index 9989bb8e0e..74f17d1758 100644
--- a/web/src/pages/TestSuites/TestSuitesList.tsx
+++ b/web/src/pages/TestSuites/TestSuitesList.tsx
@@ -11,6 +11,7 @@ import {ADD_TEST_SUITE_URL} from 'constants/Common.constants';
 import HomeAnalyticsService from 'services/Analytics/HomeAnalytics.service';
 import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import useTestSuiteCrud from 'providers/TestSuite/hooks/useTestSuiteCrud';
+import VariableSetSelector from 'components/VariableSetSelector/VariableSetSelector';
 import TestSuite from 'models/TestSuite.model';
 import * as S from './TestSuites.styled';
 import CreateButton from '../Home/CreateButton';
@@ -55,6 +56,7 @@ const Resources = () => {
       <S.Wrapper>
         <S.HeaderContainer>
           <S.TitleText>All Test Suites</S.TitleText>
+          <VariableSetSelector />
         </S.HeaderContainer>
 
         <S.ActionsContainer>
diff --git a/web/src/pages/VariableSet/VariableSet.tsx b/web/src/pages/VariableSet/VariableSet.tsx
index 47fed567ac..b26a636c41 100644
--- a/web/src/pages/VariableSet/VariableSet.tsx
+++ b/web/src/pages/VariableSet/VariableSet.tsx
@@ -1,11 +1,6 @@
-import Layout from 'components/Layout';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import VariableSetContent from './VariableSetContent';
 
-const VariableSet = () => (
-  <Layout hasMenu>
-    <VariableSetContent />
-  </Layout>
-);
+const VariableSet = () => <VariableSetContent />;
 
 export default withAnalytics(VariableSet, 'variable-set');

From c3dcf5877384d3ddc173a92dd2ae4d71ea6f9f00 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Mon, 21 Aug 2023 13:48:57 -0600
Subject: [PATCH 2/6] moving the store setup elsewhere

---
 web/src/redux/store.tsx | 28 +++-------------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/web/src/redux/store.tsx b/web/src/redux/store.tsx
index 562ff6235b..7412cf23e9 100644
--- a/web/src/redux/store.tsx
+++ b/web/src/redux/store.tsx
@@ -1,17 +1,10 @@
-import {Action, configureStore, Middleware, ThunkAction} from '@reduxjs/toolkit';
+import {Action, configureStore, ThunkAction} from '@reduxjs/toolkit';
 import {createReduxHistoryContext} from 'redux-first-history';
 import {createBrowserHistory} from 'history';
 import TracetestAPI from 'redux/apis/Tracetest';
-import OtelRepoAPI from 'redux/apis/OtelRepo';
-import TestSpecs from 'redux/slices/TestSpecs.slice';
-import Spans from 'redux/slices/Span.slice';
-import CreateTest from 'redux/slices/CreateTest.slice';
-import DAG from 'redux/slices/DAG.slice';
-import Trace from 'redux/slices/Trace.slice';
-import CreateTestSuite from 'redux/slices/CreateTestSuite.slice';
-import User from 'redux/slices/User.slice';
-import TestOutputs from 'redux/testOutputs/slice';
+
 import RouterMiddleware from './Router.middleware';
+import {middlewares, reducers} from './setup';
 
 const {createReduxHistory, routerMiddleware, routerReducer} = createReduxHistoryContext({
   history: createBrowserHistory(),
@@ -19,21 +12,6 @@ const {createReduxHistory, routerMiddleware, routerReducer} = createReduxHistory
 
 TracetestAPI.create();
 
-export const middlewares: Middleware[] = [OtelRepoAPI.middleware];
-
-export const reducers = {
-  [OtelRepoAPI.reducerPath]: OtelRepoAPI.reducer,
-
-  spans: Spans,
-  dag: DAG,
-  trace: Trace,
-  testSpecs: TestSpecs,
-  createTest: CreateTest,
-  createTestSuite: CreateTestSuite,
-  user: User,
-  testOutputs: TestOutputs,
-};
-
 export const store = configureStore({
   reducer: {
     ...reducers,

From 21a964e80e46dbf8096bfb3de21019baae0e708e Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Mon, 21 Aug 2023 13:49:32 -0600
Subject: [PATCH 3/6] moving the store setup elsewhere

---
 web/src/redux/setup.ts | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 web/src/redux/setup.ts

diff --git a/web/src/redux/setup.ts b/web/src/redux/setup.ts
new file mode 100644
index 0000000000..5b8d81cabd
--- /dev/null
+++ b/web/src/redux/setup.ts
@@ -0,0 +1,26 @@
+import {Middleware} from '@reduxjs/toolkit';
+
+import OtelRepoAPI from 'redux/apis/OtelRepo';
+import TestSpecs from 'redux/slices/TestSpecs.slice';
+import Spans from 'redux/slices/Span.slice';
+import CreateTest from 'redux/slices/CreateTest.slice';
+import DAG from 'redux/slices/DAG.slice';
+import Trace from 'redux/slices/Trace.slice';
+import CreateTestSuite from 'redux/slices/CreateTestSuite.slice';
+import User from 'redux/slices/User.slice';
+import TestOutputs from 'redux/testOutputs/slice';
+
+export const middlewares: Middleware[] = [OtelRepoAPI.middleware];
+
+export const reducers = {
+  [OtelRepoAPI.reducerPath]: OtelRepoAPI.reducer,
+
+  spans: Spans,
+  dag: DAG,
+  trace: Trace,
+  testSpecs: TestSpecs,
+  createTest: CreateTest,
+  createTestSuite: CreateTestSuite,
+  user: User,
+  testOutputs: TestOutputs,
+};

From 269b745d9090ad1844c9e990c8270df9ec5062f8 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Mon, 21 Aug 2023 14:07:39 -0600
Subject: [PATCH 4/6] fixing test

---
 web/src/components/Layout/__tests__/Layout.test.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/components/Layout/__tests__/Layout.test.tsx b/web/src/components/Layout/__tests__/Layout.test.tsx
index 291bb50ac4..cc83640eaa 100644
--- a/web/src/components/Layout/__tests__/Layout.test.tsx
+++ b/web/src/components/Layout/__tests__/Layout.test.tsx
@@ -2,8 +2,7 @@ import {render} from 'test-utils';
 import Layout from '../Layout';
 
 it('Layout', async () => {
-  const {getByText, getByTestId} = render(<Layout />);
+  const {getByTestId} = render(<Layout />);
 
   expect(getByTestId('menu-link')).toBeInTheDocument();
-  expect(getByText('This')).toBeTruthy();
 });

From d2bc66b7d2ecf9f313fdeddb297d56b00f47990f Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Wed, 23 Aug 2023 11:59:16 -0600
Subject: [PATCH 5/6] fixing variable set selector position for test suite runs

---
 .../components/TestSuiteHeader/TestSuiteHeader.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/TestSuiteHeader/TestSuiteHeader.tsx b/web/src/components/TestSuiteHeader/TestSuiteHeader.tsx
index 9762af56fb..a146eca67b 100644
--- a/web/src/components/TestSuiteHeader/TestSuiteHeader.tsx
+++ b/web/src/components/TestSuiteHeader/TestSuiteHeader.tsx
@@ -68,14 +68,14 @@ const TestSuiteHeader = () => {
             <TestState testState={state} />
           </S.StateContainer>
         )}
+        {state && state === TestStateEnum.FINISHED && (
+          <TestSuiteRunStatusIcon state={state!} hasFailedTests={!allStepsRequiredGatesPassed} />
+        )}
         <VariableSetSelector />
         {state && state === TestStateEnum.FINISHED && (
-          <>
-            <TestSuiteRunStatusIcon state={state!} hasFailedTests={!allStepsRequiredGatesPassed} />
-            <Button ghost onClick={() => onRun(runId)} type="primary" data-cy="testsuite-run-button">
-              Run Test Suite
-            </Button>
-          </>
+          <Button ghost onClick={() => onRun(runId)} type="primary" data-cy="testsuite-run-button">
+            Run Test Suite
+          </Button>
         )}
         <TestSuiteRunActionsMenu testSuiteId={testSuiteId} runId={runId} isRunView />
       </S.SectionRight>

From 30505af0164e16d17f58b037ff563f8bf202c956 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Wed, 23 Aug 2023 12:18:25 -0600
Subject: [PATCH 6/6] updating redux toolkit

---
 web/package-lock.json | 62 +++++++++++++++++++++----------------------
 web/package.json      |  2 +-
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 395bf9d892..a328482397 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -17,7 +17,7 @@
         "@dnd-kit/sortable": "7.0.1",
         "@lezer/highlight": "1.0.0",
         "@opentelemetry/semantic-conventions": "1.3.0",
-        "@reduxjs/toolkit": "1.9.1",
+        "@reduxjs/toolkit": "1.9.5",
         "@segment/analytics-next": "1.51.2",
         "@sentry/react": "6.19.7",
         "@sentry/tracing": "6.19.7",
@@ -3812,14 +3812,14 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
     "node_modules/@reduxjs/toolkit": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz",
-      "integrity": "sha512-HikrdY+IDgRfRYlCTGUQaiCxxDDgM1mQrRbZ6S1HFZX5ZYuJ4o8EstNmhTwHdPl2rTmLxzwSu0b3AyeyTlR+RA==",
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
+      "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
       "dependencies": {
-        "immer": "^9.0.16",
-        "redux": "^4.2.0",
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
-        "reselect": "^4.1.7"
+        "reselect": "^4.1.8"
       },
       "peerDependencies": {
         "react": "^16.9.0 || ^17.0.0 || ^18",
@@ -16165,9 +16165,9 @@
       }
     },
     "node_modules/immer": {
-      "version": "9.0.16",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
-      "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==",
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -23239,9 +23239,9 @@
       }
     },
     "node_modules/redux": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
-      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
       "dependencies": {
         "@babel/runtime": "^7.9.2"
       }
@@ -23468,9 +23468,9 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "node_modules/reselect": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
-      "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
     },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
@@ -29858,14 +29858,14 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
     "@reduxjs/toolkit": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz",
-      "integrity": "sha512-HikrdY+IDgRfRYlCTGUQaiCxxDDgM1mQrRbZ6S1HFZX5ZYuJ4o8EstNmhTwHdPl2rTmLxzwSu0b3AyeyTlR+RA==",
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
+      "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
       "requires": {
-        "immer": "^9.0.16",
-        "redux": "^4.2.0",
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
-        "reselect": "^4.1.7"
+        "reselect": "^4.1.8"
       }
     },
     "@rollup/plugin-babel": {
@@ -37955,9 +37955,9 @@
       "optional": true
     },
     "immer": {
-      "version": "9.0.16",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
-      "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
     },
     "import-fresh": {
       "version": "3.3.0",
@@ -42982,9 +42982,9 @@
       }
     },
     "redux": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
-      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
       "requires": {
         "@babel/runtime": "^7.9.2"
       }
@@ -43159,9 +43159,9 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "reselect": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
-      "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
     },
     "resize-observer-polyfill": {
       "version": "1.5.1",
diff --git a/web/package.json b/web/package.json
index dd16aba454..740b65fb02 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,7 +13,7 @@
     "@dnd-kit/sortable": "7.0.1",
     "@lezer/highlight": "1.0.0",
     "@opentelemetry/semantic-conventions": "1.3.0",
-    "@reduxjs/toolkit": "1.9.1",
+    "@reduxjs/toolkit": "1.9.5",
     "@segment/analytics-next": "1.51.2",
     "@sentry/react": "6.19.7",
     "@sentry/tracing": "6.19.7",