refactor: update styling and structure for AuditLogs and ExecutionLogs components, including table height adjustments and pagination improvements

samarp-jain · samarp-jain · commit 7c7453ad870c · 2025-05-29T13:13:57.000+05:30
diff --git a/ui/src/components/AuditLogs/index.scss b/ui/src/components/AuditLogs/index.scss
@@ -16,13 +16,21 @@
     width: calc(100% - 15rem);
 }
 
-.Table__head__column {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-}
+.PageLayout__body {
+    .table-height {
+        .Table {
+            height: calc(100vh - 12.75rem) !important;
+        }
 
+        .Table.TableWithPaginated {
+            .Table__body {
+                height: calc(100vh - 20rem) !important;
+            }
+        }
+    }
+}
 
-.Table:has(.custom-empty-state) {
-    height: 40.5rem;
+.TablePagination {
+    position: sticky;
+    bottom: 0px;
 }
diff --git a/ui/src/components/AuditLogs/index.tsx b/ui/src/components/AuditLogs/index.tsx
@@ -33,6 +33,7 @@ const AuditLogs: React.FC = () => {
     const [isFilterApplied, setIsFilterApplied] = useState(false);
     const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
     const [dropDownOptions, setDropDownOptions] = useState<string>();
+    // const [tableHeight, setTableHeight] = useState<number>(window.innerHeight);
     const selectedOrganisation = useSelector(
         (state: RootState) => state?.authentication?.selectedOrganisation
     );
@@ -87,6 +88,16 @@ const AuditLogs: React.FC = () => {
         setFilterOption('all');
         setIsFilterApplied(false);
     };
+    // useEffect(() => {
+    //     const handleResize = () => {
+    //         setTableHeight(window.innerHeight - 275);
+    //     };
+    //     // console.info(window.innerHeight)
+    //     // console.info(tableHeight)
+    //     window.addEventListener("resize", handleResize);
+    //     handleResize();
+    //     return () => window.removeEventListener("resize", handleResize);
+    // }, [window.innerHeight]);
     const fetchTableData = async ({
         skip = 0,
         limit = 30,
@@ -380,8 +391,6 @@ const AuditLogs: React.FC = () => {
                     value={selectedStack}
                     onChange={handleStackChange}
                     options={stackOptions}
-                    width="220px"
-                    maxWidth="220px"
                     placeholder={auditLogsConstants.placeholders.selectStack}
                     isSearchable
                     version="v2"
@@ -394,8 +403,6 @@ const AuditLogs: React.FC = () => {
                     value={selectedFile}
                     onChange={handleFileChange}
                     options={fileOptions}
-                    width="220px"
-                    maxWidth="220px"
                     placeholder={auditLogsConstants.placeholders.selectModule}
                     isSearchable
                     version="v2"
@@ -406,10 +413,9 @@ const AuditLogs: React.FC = () => {
         </div>
     );
     return (
-        <div className="audit-logs-Table">
+        <div className='table-height'>
             <InfiniteScrollTable
                 key={tableKey}
-                tableHeight={580}
                 itemSize={80}
                 data={tableData}
                 columns={dropDownOptions == 'content-types' || dropDownOptions == 'global-fields' ? contentTypeHeader : entryHeader}
diff --git a/ui/src/components/Common/Settings/Settings.scss b/ui/src/components/Common/Settings/Settings.scss
@@ -3,18 +3,22 @@
 #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,
   .PageLayout__leftSidebar {
-    border-top: 0 none;
+    border-top: 1;
   }
+
   .PageLayout--primary {
     .PageLayout__content {
       .PageLayout__body {
@@ -24,10 +28,12 @@
       }
     }
   }
+
   .action-component-title {
     justify-content: space-between;
     width: calc(100vw - 326px);
   }
+
   .content-block {
     margin-right: 0;
     padding: 1.5rem;
@@ -97,14 +103,15 @@
 .PageLayout__leftSidebar {
   background-color: #f7f9fc !important;
 }
+
 .ListRowV2--active {
   background-color: #fff;
   border-left: 0.125rem solid;
   color: #6c5ce7 !important;
   font-weight: 600;
 }
 
-.back-button{
+.back-button {
   cursor: pointer;
-  margin-bottom: 20px ;
+  margin-bottom: 20px;
 }
diff --git a/ui/src/components/ExecutionLogs/index.scss b/ui/src/components/ExecutionLogs/index.scss
@@ -1,7 +1,3 @@
-.Search-input-show {
-  margin-bottom: 8px;
-  width: 300px;
-}
 .Search .Search__search-icon {
   top: calc(50% - 10px);
   width: 20px;
@@ -15,7 +11,7 @@
   margin-bottom: 8px;
 }
 
-.PageLayout--primary .PageLayout__leftSidebar + .PageLayout__content .PageLayout__body {
+.PageLayout--primary .PageLayout__leftSidebar+.PageLayout__content .PageLayout__body {
   width: calc(100% - 15.4rem);
 }
 
@@ -25,15 +21,10 @@
   justify-content: space-between;
 }
 
-.Table__head{
+.Table__head {
   height: auto;
 }
 
-.Table:has(.custom-empty-state) {
-    height: 40.5rem;
-}
-
-
 .custom-empty-state {
   .Icon--original {
     width: 207px !important;
@@ -47,3 +38,19 @@
 .select-container {
   margin-bottom: 8px;
 }
+
+
+
+.PageLayout__body {
+  .table-height {
+    .Table {
+      height: calc(100vh - 20rem) !important;
+    }
+
+    .Table.TableWithPaginated {
+      .Table__body {
+        height: calc(100vh - 25rem) !important;
+      }
+    }
+  }
+}
diff --git a/ui/src/components/ExecutionLogs/index.tsx b/ui/src/components/ExecutionLogs/index.tsx
@@ -55,8 +55,8 @@ const ExecutionLogs = ({ projectId }: { projectId: string }) => {
 
   const [selectedStack, setSelectedStack] = useState<DropdownOption>(
     {
-      label: stackIds?.[stackIds?.length - 1]?.label ?? '' ,
-      value: stackIds?.[stackIds?.length - 1]?.value ?? '' 
+      label: stackIds?.[stackIds?.length - 1]?.label ?? '',
+      value: stackIds?.[stackIds?.length - 1]?.value ?? ''
     }
   );
 
@@ -276,63 +276,62 @@ const ExecutionLogs = ({ projectId }: { projectId: string }) => {
   };
 
   return (
-    <div>
+    <div className='table-height'>
       <InfiniteScrollTable
-      tableHeight={590}
-      itemSize={60}
-      columns={columns}
-      data={data ?? []}
-      uniqueKey={'timestamp'}
-      fetchTableData={fetchData}
-      totalCounts={totalCounts ?? 0}
-      loading={loading}
-      rowPerPageOptions={[10, 30, 50, 100]}
-      minBatchSizeToFetch={30}
-      v2Features={{
-        pagination: true,
-        isNewEmptyState: true
-      }}
-      isResizable={true}
-      isRowSelect={false}
-      columnSelector={false}
-      canSearch={true}
-      searchPlaceholder={EXECUTION_LOGS_UI_TEXT.SEARCH_PLACEHOLDER}
-      searchValue={searchText ?? ''}
-      onSearchChangeEvent={(value: string) => setSearchText(value)}
-      withExportCta={{
-        component: (
-        <Select
-          className='dropdown-wrapper'
-          width="250px"
-          version="v2"
-          value={testStacks?.length ? selectedStack : ''}
-          options={stackIds ?? []}
-          placeholder={EXECUTION_LOGS_UI_TEXT.SELECT_PLACEHOLDER}
-          onChange={(s: DropdownOption) => {
-          setSelectedStack({
-            label: s?.label ?? '',
-            value: s?.value ?? ''
-          });
-          setSearchText('');
-          }}
-        />
-        ),
-        showExportCta: true
-      }}
-      customEmptyState={
-        <EmptyState
-        forPage="list"
-        heading={searchText === '' ? EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_HEADING.NO_LOGS : EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_HEADING.NO_MATCH} 
-        description={
-          searchText === ''
-          ?  EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_DESCRIPTION.NO_LOGS
-          : EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_DESCRIPTION.NO_RESULT
+        itemSize={60}
+        columns={columns}
+        data={data ?? []}
+        uniqueKey={'timestamp'}
+        fetchTableData={fetchData}
+        totalCounts={totalCounts ?? 0}
+        loading={loading}
+        rowPerPageOptions={[10, 30, 50, 100]}
+        minBatchSizeToFetch={30}
+        v2Features={{
+          pagination: true,
+          isNewEmptyState: true
+        }}
+        isResizable={true}
+        isRowSelect={false}
+        columnSelector={false}
+        canSearch={true}
+        searchPlaceholder={EXECUTION_LOGS_UI_TEXT.SEARCH_PLACEHOLDER}
+        searchValue={searchText ?? ''}
+        onSearchChangeEvent={(value: string) => setSearchText(value)}
+        withExportCta={{
+          component: (
+            <Select
+              className='dropdown-wrapper'
+              width="250px"
+              version="v2"
+              value={testStacks?.length ? selectedStack : ''}
+              options={stackIds ?? []}
+              placeholder={EXECUTION_LOGS_UI_TEXT.SELECT_PLACEHOLDER}
+              onChange={(s: DropdownOption) => {
+                setSelectedStack({
+                  label: s?.label ?? '',
+                  value: s?.value ?? ''
+                });
+                setSearchText('');
+              }}
+            />
+          ),
+          showExportCta: true
+        }}
+        customEmptyState={
+          <EmptyState
+            forPage="list"
+            heading={searchText === '' ? EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_HEADING.NO_LOGS : EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_HEADING.NO_MATCH}
+            description={
+              searchText === ''
+                ? EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_DESCRIPTION.NO_LOGS
+                : EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_DESCRIPTION.NO_RESULT
+            }
+            moduleIcon={searchText === '' ? EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_ICON.NO_LOGS : EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_ICON.NO_MATCH}
+            type="secondary"
+            className="custom-empty-state"
+          />
         }
-        moduleIcon={searchText === '' ? EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_ICON.NO_LOGS : EXECUTION_LOGS_UI_TEXT.EMPTY_STATE_ICON.NO_MATCH}
-        type="secondary"
-        className="custom-empty-state"
-        />
-      }
       />
     </div>
   );

Original file line number	Diff line number	Diff line change
`@@ -3,18 +3,22 @@`
`3`	`3`	`#setting-page {`
`4`	`4`	`display: flex;`
`5`	`5`	`width: 100%;`
	`6`	`+`
`6`	`7`	`.SectionHeader {`
`7`	`8`	`color: $color-stepper-title;`
`8`	`9`	`font-weight: $font-weight-semi-bold;`
`9`	`10`	`margin-bottom: 2rem;`
`10`	`11`	`}`
	`12`	`+`
`11`	`13`	`.PageLayout {`
`12`	`14`	`width: 100%;`
`13`	`15`	`}`
	`16`	`+`
`14`	`17`	`.PageLayout__head,`
`15`	`18`	`.PageLayout__leftSidebar {`
`16`		`- border-top: 0 none;`
	`19`	`+ border-top: 1;`
`17`	`20`	`}`
	`21`	`+`
`18`	`22`	`.PageLayout--primary {`
`19`	`23`	`.PageLayout__content {`
`20`	`24`	`.PageLayout__body {`
`@@ -24,10 +28,12 @@`
`24`	`28`	`}`
`25`	`29`	`}`
`26`	`30`	`}`
	`31`	`+`
`27`	`32`	`.action-component-title {`
`28`	`33`	`justify-content: space-between;`
`29`	`34`	`width: calc(100vw - 326px);`
`30`	`35`	`}`
	`36`	`+`
`31`	`37`	`.content-block {`
`32`	`38`	`margin-right: 0;`
`33`	`39`	`padding: 1.5rem;`
`@@ -97,14 +103,15 @@`
`97`	`103`	`.PageLayout__leftSidebar {`
`98`	`104`	`background-color: #f7f9fc !important;`
`99`	`105`	`}`
	`106`	`+`
`100`	`107`	`.ListRowV2--active {`
`101`	`108`	`background-color: #fff;`
`102`	`109`	`border-left: 0.125rem solid;`
`103`	`110`	`color: #6c5ce7 !important;`
`104`	`111`	`font-weight: 600;`
`105`	`112`	`}`
`106`	`113`
`107`		`-.back-button{`
	`114`	`+.back-button {`
`108`	`115`	`cursor: pointer;`
`109`		`- margin-bottom: 20px ;`
	`116`	`+ margin-bottom: 20px;`
`110`	`117`	`}`