Dev

api/src/routes/org.routes.ts

@@ -6,7 +6,7 @@ import validator from "../validators/index.js";
 const router = express.Router({ mergeParams: true });
 
 // GET all org stacks route
-router.get("/stacks", asyncRouter(orgController.getAllStacks));
+router.get("/stacks/:searchText?", asyncRouter(orgController.getAllStacks));
 
 // Create a new stack route
 router.post(

api/src/services/migration.service.ts

@@ -23,7 +23,7 @@ const createTestStack = async (req: Request): Promise<LoginServiceType> => {
 
     await ProjectModelLowdb.read();
     const projectData = ProjectModelLowdb.chain.get("projects").value();
-    const testStackCount = projectData[0].test_stacks.length + 1;
+    const testStackCount = projectData[0]?.test_stacks?.length + 1;
     const newName = name + "-" + testStackCount;
 
     const [err, res] = await safePromise(

api/src/services/org.service.ts

@@ -13,6 +13,7 @@ const getAllStacks = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "getAllStacks";
   const orgId = req?.params?.orgId;
   const { token_payload } = req.body;
+  const search: string = req?.params?.searchText?.toLowerCase();
 
   try {
     const authtoken = await getAuthtoken(
@@ -42,13 +43,21 @@ const getAllStacks = async (req: Request): Promise<LoginServiceType> => {
           err.response.data
         )
       );
-
       return {
         data: err.response.data,
         status: err.response.status,
       };
     }
-    let locale = await getStackLocal(token_payload, res.data.stacks);
+    let stacks = res?.data?.stacks;
+    if(search){    
+      stacks = stacks.filter((stack:{name: string, description:string})=>{
+        const stackName = stack?.name?.toLowerCase();
+        const stackDescription = stack?.description?.toLowerCase();
+        return stackName?.includes(search) || stackDescription?.includes(search);
+
+      })
+    }
+    const locale = await getStackLocal(token_payload, stacks);
     return {
       data: {
         stacks: locale,

ui/src/App.tsx

@@ -1,16 +1,19 @@
+// Libraries
+import { Suspense } from 'react';
+import { Provider} from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { FullPageLoader } from '@contentstack/venus-components';
+
+import { persistor, store } from './store';
+
+// Components
 import AppRouter from './components/Common/router';
 import ErrorBoundary from './components/ErrorBoundary';
-import AppContextProvider from './context/app/app.provider';
 import AppLayout from './components/layout/AppLayout';
-import { Suspense, useEffect } from 'react';
-import { FullPageLoader } from '@contentstack/venus-components';
-import { persistor, store } from './store';
 
 // Styles
 import '@contentstack/venus-components/build/main.css';
 import './scss/App.scss';
-import { Provider} from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
 
 function App() {
 

ui/src/components/Common/Settings/Settings.scss

@@ -1,44 +1,42 @@
 @import '../../../scss/variables';
 
-.icon-wrapper {
-  background-color: $color-base-white-10 !important;
-}
-.setting-wrapper {
-  width: 100%;
-  margin: 0 !important;
-}
 #setting-page {
   display: flex;
   width: 100%;
+  .SectionHeader {
+    color: $color-stepper-title;
+    font-weight: $font-weight-semi-bold;
+    margin-bottom: 2rem;
+  }
   .PageLayout {
     width: 100%;
   }
-  .PageLayout__head {
-    border-left: 0 none;
+  .PageLayout__head, .PageLayout__leftSidebar {
+    border-top: 0 none;
+  }
+  .PageLayout--primary {
+    .PageLayout__content {
+      .PageLayout__body {
+        background: none;
+        margin-left: 15rem;
+        padding-top: $px-8;
+      }
+    } 
+  } 
+  .action-component-title {
+    justify-content: space-between;
+    width: calc(100vw - 326px);
+  }
+  .content-block {
+    margin-right: 0;
+    padding: 1.5rem;
+    width: 100%;
   }
-}
-.deleteButton {
-  position: fixed !important;
-  right: $px-40;
-  top: $px-80;
 }
 
 .Field {
   margin-bottom: $px-40;
 }
-.settings-body {
-  padding-left: 120px !important;
-}
-
-#page_header {
-  margin-left: 50px !important;
-}
-
-.pagehead-wrapper {
-  margin-left: 240px;
-  width: calc(100% - 15rem) !important ;
-  z-index: 10 !important;
-}
 .PageLayout__leftSidebar--hide {
   display: none;
 }
@@ -47,16 +45,16 @@
   margin-top: 0 !important;
 }
 
-.content-body .white-box-container {
-  background-color: $color-brand-white-base;
-  padding: 20px;
-  margin-top: 50px !important;
-  margin-left: 240px;
-  margin-right: auto;
-  position: relative;
-  z-index: 10;
-  height: 600px;
-}
+// .content-body .white-box-container {
+//   background-color: $color-brand-white-base;
+//   padding: 20px;
+//   margin-top: 50px !important;
+//   margin-left: 240px;
+//   margin-right: auto;
+//   position: relative;
+//   z-index: 10;
+//   height: 600px;
+// }
 
 .stack-settings__heading {
   color: $color-base-black-base;
@@ -67,22 +65,22 @@
   margin-bottom: $px-20;
 }
 
-.toggle-class {
-  width: calc(100% - 18.4375rem) !important;
-}
-.layout-container.specific-context .PageLayout__head {
-  z-index: 10 !important;
-  margin-left: 240px;
-  width: 100% !important;
-}
-.SaveButton {
-  padding: 30px 10px;
-}
+// .toggle-class {
+//   width: calc(100% - 18.4375rem) !important;
+// }
+// .layout-container.specific-context .PageLayout__head {
+//   z-index: 10 !important;
+//   margin-left: 240px;
+//   width: 100% !important;
+// }
+// .SaveButton {
+//   padding: 30px 10px;
+// }
 
-.layout-container.content-body .PageLayout__body {
-  margin-top: 90px !important;
-  margin-left: 227px !important;
-}
+// .layout-container.content-body .PageLayout__body {
+//   margin-top: 90px !important;
+//   margin-left: 227px !important;
+// }
 
 .PageLayout__leftSidebar {
   background-color: #f7f9fc !important;

ui/src/components/Common/Settings/index.tsx

@@ -142,26 +142,22 @@ const Settings = () => {
   const pageActions = [
     {
       label: (
-        <div className="actions flex-v-center deleteButton">
-          <div className="mr-16">
-            <Button
-              class="Button Button--secondary Button--size-large Button--icon-alignment-left Button--v2"
-              aria-label="Delete Project for deleting project"
-              type="button"
-              onClick={handleClick}
-            >
-              <div className="flex-center">
-                <div className="flex-v-center Button__mt-regular Button__visible">
-                  <Icon
-                    icon="Delete"
-                    version="v2"
-                    data={cmsData?.project?.delete_project?.title}
-                  ></Icon>
-                </div>
-              </div>
-            </Button>
+        <Button
+          class="Button Button--secondary Button--size-large Button--icon-alignment-left Button--v2"
+          aria-label="Delete Project for deleting project"
+          type="button"
+          onClick={handleClick}
+        >
+          <div className="flex-center">
+            <div className="flex-v-center Button__mt-regular Button__visible">
+              <Icon
+                icon="Delete"
+                version="v2"
+                data={cmsData?.project?.delete_project?.title}
+              ></Icon>
+            </div>
           </div>
-        </div>
+        </Button>
       )
     }
   ];
@@ -170,7 +166,7 @@ const Settings = () => {
     component: (
       <div>
         {active === cmsData?.project?.title && (
-          <div className="stack-settings__section-wrapper">
+          <div className="content-block">
             <div data-test-id="cs-stack-setting-general" className="stack-settings__heading">
               {cmsData?.project?.general}
             </div>
@@ -207,28 +203,6 @@ const Settings = () => {
                     </div>
                   </div>
                 </div>
-
-                <div className="stack-settings__section__fields">
-                  <div className="Field Field--full" data-test-id="cs-field"></div>
-                  <FieldLabel className="FieldLabel" htmlFor="projectDescription">
-                    {cmsData?.project?.email}
-                  </FieldLabel>
-                  <div className="flex-v-center">
-                    <div className="TextInput TextInput--large TextInput--disabled TextInput__read-only TextInput__read-only-disabled">
-                      <TextInput
-                        aria-label="email"
-                        version="v2"
-                        value={user?.email}
-                        disabled={true}
-                      ></TextInput>
-                      <span className="TextInput__read-only__wrapper">
-                        <div className="tippy-wrapper">
-                          <Icon icon="Lock" size="small" version="v2" />
-                        </div>
-                      </span>
-                    </div>
-                  </div>
-                </div>
                 <div className="SaveButton">
                   <Button
                     buttonType="primary"
@@ -248,17 +222,7 @@ const Settings = () => {
         )}
         {active === cmsData?.execution_logs?.title && (
           <div>
-            {/* <InfiniteScrollTable
-              loading={loading}
-              data={tableData}
-              columns={columns}
-              uniqueKey={'uid'}
-              canRefresh
-              itemStatusMap={itemStatusMap}
-              fetchTableData={fetchData}
-              tableHeight={472}
-              equalWidthColumns={true}
-            /> */}
+
           </div>
         )}
       </div>
@@ -267,7 +231,7 @@ const Settings = () => {
 
   const leftSidebar = {
     component: (
-      <div style={{ textAlign: 'left' }}>
+      <div>
         <div
           data-testid="cs-section-header"
           className="SectionHeader SectionHeader--extra-bold SectionHeader--medium SectionHeader--black SectionHeader--v2"
@@ -288,19 +252,6 @@ const Settings = () => {
           }}
           version="v2"
         />
-        <div>
-          <ListRow
-            rightArrow={true}
-            active={active === cmsData?.execution_logs?.title}
-            content={cmsData?.execution_logs?.title}
-            leftIcon={<Icon icon="Stacks" version="v2" />}
-            onClick={() => {
-              setActive(cmsData?.execution_logs?.title);
-              setCurrentHeader(cmsData?.execution_logs?.title);
-            }}
-            version="v2"
-          />
-        </div>
       </div>
     )
   };

ui/src/components/Common/router.tsx

@@ -17,6 +17,7 @@ const LoginLazyLoad = lazy(() => import('../../pages/Login'));
 const RegionalLoginLazyLoad = lazy(() => import('../../pages/RegionalLogin'));
 const MigrationLazyLoad = lazy(() => import('../../pages/Migration'));
 const ProjectsLazyLoad = lazy(() => import('../../pages/Projects'));
+const SettingsLazyLoad = lazy(() => import ('../Common/Settings'))
 
 const AppRouter = () => {
   return (
@@ -34,9 +35,9 @@ const AppRouter = () => {
         <Route
           path="/projects/:projectId/migration/steps/:stepId"
           element={<MigrationLazyLoad />}
-        >
+        />
 
-        </Route>
+        <Route path="/projects/:projectId/settings" element={<SettingsLazyLoad />} />
       </Route>
 
       <Route path="*" element={<ErrorPage contentType={CS_ENTRIES.NOT_FOUND_ERROR} />} />

ui/src/components/ContentMapper/contentMapper.interface.ts

@@ -86,7 +86,7 @@ export interface FieldMetadata {
 export interface ContentTypesSchema {
   uid?: string;
   display_name?: string;
-  data_type?: 'text' | 'number' | 'isodate' | 'json' | 'file';
+  data_type?: 'text' | 'number' | 'isodate' | 'json' | 'file' | 'reference' | 'group';
   field_metadata?: FieldMetadata;
   enum?: any;
 }

ui/src/components/ContentMapper/index.scss

@@ -29,6 +29,7 @@
   border-bottom: 1px solid $color-brand-secondary-lightest;
   padding: $px-8 $px-12;
   .Search__v2 {
+    background-color: $color-brand-white-base;
     height: 2.5rem;
     width: 100%!important;
     .Search-input-show {