fix: make all sidesheet tables autosize and remove loop sidesheet sco…

…llbar (#1148) * fix: make all sidesheet tables autosize and remove loop sidesheet scollbar * update lock file
equinor · Nov 11, 2024 · 4391770 · 4391770
1 parent 5f2e26b
commit 4391770
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 452 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,5 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-
-
 # compiled output
 /.nx
 /workspace
@@ -49,5 +47,3 @@ Thumbs.db
 
 .astro
 .turbo
-
-!import.d.ts
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
@@ -8,6 +8,7 @@ import {
 } from '@cc-components/shared/sidesheet';
 import { formatDateString } from '@cc-components/shared/utils-dates';
 import { ContentTable } from './LoopContentTable';
+import { Checklists } from './Checklists';
 
 type DetailsTabProps = {
   loop: Loop | undefined;
@@ -69,6 +70,7 @@ export const DetailsTab = ({ loop }: DetailsTabProps): JSX.Element | null => {
         </tbody>
       </StyledTable>
       <ContentTable loop={loop} />
+      {loop.loopId && <Checklists loopId={loop.loopId} />}
     </StyledTabContent>
   );
 };
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/LoopContentTable.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/LoopContentTable.tsx
@@ -104,14 +104,14 @@ export const ContentTable = ({ loop }: ContentTableProps) => {
   const { data, error, isLoading } = useGetLoopContent(loop.loopId);
 
   return (
-    <div>
+    <>
       <TabTable
         packages={data}
         error={error}
         isFetching={isLoading}
         resourceName="ContentTable"
         columns={columns}
       />
-    </div>
+    </>
   );
 };
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx
@@ -20,7 +20,6 @@ import { Tabs } from '@equinor/eds-core-react';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useGetWorkorders } from '../utils-sidesheet';
-import { Checklists } from './Checklists';
 import { DetailsTab } from './DetailsTab';
 
 export const LoopSidesheet = (props: {
@@ -125,7 +124,6 @@ export const LoopSidesheet = (props: {
         <CustomStyledPanels>
           <StyledPanel>
             <DetailsTab loop={loop} />
-            {loop.loopId && <Checklists loopId={loop.loopId} />}
           </StyledPanel>
           <StyledPanel>
             <WorkorderTab error={error} isFetching={isLoading} workorders={data} />

diff --git a/libs/shared/package.json b/libs/shared/package.json
@@ -91,7 +91,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@equinor/fusion-react-person": "^0.8.5",
-    "@equinor/workspace-ag-grid": "3.0.2",
+    "@equinor/workspace-ag-grid": "3.0.3",
     "@remirror/pm": "^2.0.8",
     "@remirror/react": "^2.0.35",
     "@remirror/react-editors": "^1.0.41",

diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/TabTable/TabTable.tsx b/libs/shared/src/packages/table-helpers/src/lib/table/TabTable/TabTable.tsx
@@ -1,12 +1,9 @@
 import { Icon, Progress } from '@equinor/eds-core-react';
-import { info_circle, error_outlined } from '@equinor/eds-icons';
+import { error_outlined, info_circle } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
-import { ColDef, ClientGrid, GridOptions } from '@equinor/workspace-ag-grid';
-import { InfoText, NoResourceData } from './tabTable.styles';
+import { ClientGrid, ColDef, GridOptions } from '@equinor/workspace-ag-grid';
 import { defaultGridOptions } from '../../../../../workspace-config/src/defaultGridOptions';
-import { useRef } from 'react';
-import { useResizeObserver } from '../../../../../hooks/src/lib/useResizeObserver';
-
+import { InfoText, NoResourceData, TabTableStyles } from './tabTable.styles';
 
 type TabTableProps<T> = {
   packages: T[] | undefined;
@@ -26,18 +23,11 @@ Icon.add({ info_circle, error_outlined });
 export const TabTable = <T extends Record<PropertyKey, unknown>>(
   props: TabTableProps<T>
 ): JSX.Element => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const [_, refHeight] = useResizeObserver(ref);
   const { columns, error, isFetching, packages, resourceName } = props;
 
-
-  const gridHeight = packages && packages.length > 30 ? refHeight : "auto-height"
-
-
   return (
-    <div ref={ref} style={{ height: "100%", width: "100%" }}>
+    <TabTableStyles style={{ width: '100%' }}>
       {isFetching && (
-
         <NoResourceData>
           <Progress.Circular />
           <InfoText>{`Fetching ${resourceName}`}</InfoText>
@@ -70,10 +60,13 @@ export const TabTable = <T extends Record<PropertyKey, unknown>>(
         <ClientGrid
           rowData={packages}
           colDefs={columns}
-          height={typeof (gridHeight) === "number" ? gridHeight : 500}
-          gridOptions={{ ...defaultGridOptions, ...props.additionalGridOptions, domLayout: gridHeight === "auto-height" ? "autoHeight" : undefined }}
+          gridOptions={{
+            ...defaultGridOptions,
+            ...props.additionalGridOptions,
+            domLayout: 'autoHeight',
+          }}
         />
       )}
-    </div>
+    </TabTableStyles>
   );
 };
diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/TabTable/tabTable.styles.ts b/libs/shared/src/packages/table-helpers/src/lib/table/TabTable/tabTable.styles.ts
@@ -12,3 +12,9 @@ export const NoResourceData = styled.div`
 export const InfoText = styled.h3`
   margin: 0;
 `;
+
+export const TabTableStyles = styled.div`
+  .ag-center-cols-viewport {
+    min-height: unset !important;
+  }
+`;