hide env vars. Max width on table columns to fix overflow

astronomer · May 23, 2024 · 1e5197a · 1e5197a
1 parent 0d13beb
commit 1e5197a
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 51 deletions.
diff --git a/astronomer_starship/src/component/DataTable.jsx b/astronomer_starship/src/component/DataTable.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  Table, Thead, Tbody, Tr, Th, Td, chakra,
+  Table, Thead, Tbody, Tr, Th, Td, chakra, TableContainer,
 } from '@chakra-ui/react';
 import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
 import {
@@ -21,58 +21,60 @@ export default function DataTable({
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    state: { sorting },
+    state: {sorting},
   });
 
   return (
-    <Table className="data-table">
-      <Thead>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <Tr key={headerGroup.id}>
-            {headerGroup.headers.map((header) => {
-              // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
-              const { meta } = header.column.columnDef;
-              return (
-                <Th
-                  key={header.id}
-                  onClick={header.column.getToggleSortingHandler()}
-                  isNumeric={meta?.isNumeric}
-                >
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext(),
-                  )}
+    <TableContainer>
+      <Table className="data-table">
+        <Thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
+                const {meta} = header.column.columnDef;
+                return (
+                  <Th
+                    key={header.id}
+                    onClick={header.column.getToggleSortingHandler()}
+                    isNumeric={meta?.isNumeric}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
 
-                  <chakra.span pl="4">
-                    {header.column.getIsSorted() ? (
-                      header.column.getIsSorted() === 'desc' ? (
-                        <TriangleDownIcon aria-label="sorted descending" />
-                      ) : (
-                        <TriangleUpIcon aria-label="sorted ascending" />
-                      )
-                    ) : null}
-                  </chakra.span>
-                </Th>
-              );
-            })}
-          </Tr>
-        ))}
-      </Thead>
-      <Tbody>
-        {table.getRowModel().rows.map((row) => (
-          <Tr key={row.id}>
-            {row.getVisibleCells().map((cell) => {
-              // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
-              const { meta } = cell.column.columnDef;
-              return (
-                <Td key={cell.id} isNumeric={meta?.isNumeric}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </Td>
-              );
-            })}
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
+                    <chakra.span pl="4">
+                      {header.column.getIsSorted() ? (
+                        header.column.getIsSorted() === 'desc' ? (
+                          <TriangleDownIcon aria-label="sorted descending" />
+                        ) : (
+                          <TriangleUpIcon aria-label="sorted ascending" />
+                        )
+                      ) : null}
+                    </chakra.span>
+                  </Th>
+                );
+              })}
+            </Tr>
+          ))}
+        </Thead>
+        <Tbody>
+          {table.getRowModel().rows.map((row) => (
+            <Tr key={row.id}>
+              {row.getVisibleCells().map((cell) => {
+                // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
+                const {meta} = cell.column.columnDef;
+                return (
+                  <Td maxW={100} key={cell.id} isNumeric={meta?.isNumeric}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Td>
+                );
+              })}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/astronomer_starship/src/pages/EnvVarsPage.jsx b/astronomer_starship/src/pages/EnvVarsPage.jsx
@@ -14,6 +14,7 @@ import {
   fetchData, getAstroEnvVarRoute, getHoustonRoute, localRoute, proxyHeaders, proxyUrl, remoteRoute,
 } from '../util';
 import constants from '../constants';
+import HiddenValue from "../component/HiddenValue.jsx";
 
 const getDeploymentsQuery = `query deploymentVariables($deploymentUuid: Uuid!, $releaseName: String!) {
   deploymentVariables(
@@ -156,6 +157,9 @@ EnvVarMigrateButton.defaultProps = {
 };
 
 const columnHelper = createColumnHelper();
+const valueColumn = columnHelper.accessor('value', {
+  id: 'value', cell: (props) => <HiddenValue value={props.getValue()} />,
+});
 
 function setEnvData(localData, remoteData) {
   return Object.entries(localData).map(
@@ -190,7 +194,7 @@ export default function EnvVarsPage({ state, dispatch }) {
   // noinspection JSCheckFunctionSignatures
   const columns = [
     columnHelper.accessor('key'),
-    columnHelper.accessor('value'),
+    valueColumn,
     columnHelper.display({
       id: 'migrate',
       header: 'Migrate',