Merge pull request #1606 from gettakaro/feat/select-pagination

Improved internals of pagination and infinite loading + Add expandable tables
gettakaro · Oct 13, 2024 · 9126f73 · 9126f73
2 parents 8119ed4 + 9578692
commit 9126f73
Show file tree

Hide file tree

Showing 82 changed files with 1,360 additions and 4,267 deletions.
diff --git a/containers/generic-app/Dockerfile b/containers/generic-app/Dockerfile
@@ -37,6 +37,7 @@ ENV TAKARO_VERSION=${TAKARO_VERSION}
 ENV TAKARO_COMMIT=${TAKARO_COMMIT}
 ENV TAKARO_BUILD_DATE=${TAKARO_BUILD_DATE}
 ENV TAKARO_FULL_VERSION=${TAKARO_VERSION}-${TAKARO_COMMIT}-${TAKARO_BUILD_DATE}
+ENV VITE_TAKARO_VERSION=${TAKARO_FULL_VERSION}
 
 WORKDIR /app
 

diff --git a/containers/generic-web/entrypoint.sh b/containers/generic-web/entrypoint.sh
@@ -12,6 +12,8 @@ echo "  VITE_API: \"$VITE_API\"," >>"$FILE_LOCATION"
 echo "  VITE_ORY_URL: \"$VITE_ORY_URL\"," >>"$FILE_LOCATION"
 echo "  VITE_POSTHOG_PUBLIC_API_KEY: \"$VITE_POSTHOG_PUBLIC_API_KEY\"," >>"$FILE_LOCATION"
 echo "  VITE_POSTHOG_API_URL: \"$VITE_POSTHOG_API_URL\"," >>"$FILE_LOCATION"
+echo "  VITE_TAKARO_VERSION: \"$VITE_TAKARO_VERSION\"," >>"$FILE_LOCATION"
+
 echo "}" >>"$FILE_LOCATION"
 
 nginx -g "daemon off;"
diff --git a/containers/takaro/dev.Dockerfile b/containers/takaro/dev.Dockerfile
@@ -31,5 +31,6 @@ ENV TAKARO_VERSION=${TAKARO_VERSION}
 ENV TAKARO_COMMIT=${TAKARO_COMMIT}
 ENV TAKARO_BUILD_DATE=${TAKARO_BUILD_DATE}
 ENV TAKARO_FULL_VERSION=${TAKARO_VERSION}-${TAKARO_COMMIT}-${TAKARO_BUILD_DATE}
+ENV VITE_TAKARO_VERSION=${TAKARO_FULL_VERSION}
 
 CMD ["npm", "run", "start:dev"]
diff --git a/deploy/compose/docker-compose.yml b/deploy/compose/docker-compose.yml
@@ -48,22 +48,22 @@ services:
     env_file:
       - .env 
     environment:
-      POSTGRES_HOST: postgresql      
+      POSTGRES_HOST: postgresql
   takaro_connector:
     image: ghcr.io/gettakaro/takaro-app-connector:latest
     container_name: takaro_connector
     environment:
       REDIS_HOST: "redis"
-      TAKARO_SERVICE: "app-connector"  
+      TAKARO_SERVICE: "app-connector"
       TAKARO_HOST: http://takaro_api:3000
     env_file:
-      - .env      
+      - .env
     restart: unless-stopped
 
   takaro_web:
     image: ghcr.io/gettakaro/takaro-web-main:latest
     ports:
-      - 13001:80        
+      - 13001:80
     environment:
       VITE_API: http://127.0.0.1:13000
       VITE_ORY_URL: http://127.0.0.1:4433

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lib-components/src/components/actions/ToggleButton/ToggleButton.stories.tsx b/packages/lib-components/src/components/actions/ToggleButton/ToggleButton.stories.tsx
@@ -22,6 +22,7 @@ export default {
   args: {
     exclusive: true,
     orientation: 'horizontal',
+    defaultValue: 'left',
     fullWidth: false,
   },
 } as Meta<ToggleButtonGroupProps>;

diff --git a/packages/lib-components/src/components/actions/ToggleButton/ToggleButton.tsx b/packages/lib-components/src/components/actions/ToggleButton/ToggleButton.tsx
@@ -17,7 +17,9 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(fun
   { selected = false, disabled = false, onClick = undefined, value, parentClickEvent = () => {}, children, tooltip },
   ref,
 ) {
-  const handleOnClick = () => {
+  const handleOnClick = (m: MouseEvent) => {
+    m.preventDefault();
+    m.stopPropagation();
     if (disabled) return;
     parentClickEvent(value);
     if (onClick) {

diff --git a/packages/lib-components/src/components/actions/ToggleButton/ToggleButtonGroup.tsx b/packages/lib-components/src/components/actions/ToggleButton/ToggleButtonGroup.tsx
@@ -47,7 +47,12 @@ export const ToggleButtonGroup: FC<ToggleButtonGroupProps> & SubComponents = ({
     const m = new Map<string, boolean>();
     Children.forEach(children, (child) => {
       if (isValidElement(child)) {
-        m.set(child.props.value, false);
+        console.log(child.props.value, defaultValue);
+        if (child.props.value === defaultValue) {
+          m.set(child.props.value, true);
+        } else {
+          m.set(child.props.value, false);
+        }
       }
     });
     return m;
@@ -65,7 +70,16 @@ export const ToggleButtonGroup: FC<ToggleButtonGroupProps> & SubComponents = ({
       }
       return setSelected(value);
     }
-    // handle case that each button has a seperate state
+
+    // In case there always has to be one value selected, the clicked value is true and there is currently only one value selected then we don't do anything
+    if (
+      !canSelectNone &&
+      (selected as Map<string, boolean>).get(value) === true &&
+      Array.from((selected as Map<string, boolean>).values()).filter(Boolean).length === 1
+    ) {
+      return;
+    }
+
     setSelected(new Map((selected as Map<string, boolean>).set(value, !(selected as Map<string, boolean>).get(value))));
   };
 

diff --git a/packages/lib-components/src/components/data/Table/index.tsx b/packages/lib-components/src/components/data/Table/index.tsx
@@ -17,11 +17,18 @@ import {
   VisibilityState,
   ColumnPinningState,
   RowSelectionState,
+  ExpandedState,
+  getExpandedRowModel,
+  Row,
 } from '@tanstack/react-table';
 import { Wrapper, StyledTable, Toolbar, Flex, TableWrapper } from './style';
-import { Button, Empty, Spinner, ToggleButtonGroup } from '../../../components';
-import { AiOutlinePicCenter as RelaxedDensityIcon, AiOutlinePicRight as TightDensityIcon } from 'react-icons/ai';
-
+import { Button, Empty, IconButton, Spinner, ToggleButtonGroup } from '../../../components';
+import {
+  AiOutlinePicCenter as RelaxedDensityIcon,
+  AiOutlinePicRight as TightDensityIcon,
+  AiOutlineRight as ExpandIcon,
+  AiOutlineUp as CollapseIcon,
+} from 'react-icons/ai';
 import { ColumnHeader } from './subcomponents/ColumnHeader';
 import { ColumnVisibility } from './subcomponents/ColumnVisibility';
 import { Filter } from './subcomponents/Filter';
@@ -37,8 +44,12 @@ export interface TableProps<DataType extends object> {
   data: DataType[];
   isLoading?: boolean;
 
-  // currently not possible to type this properly: https://github.com/TanStack/table/issues/4241
+  /// Condition for row to be expandable
+  canExpand?: (row: Row<DataType>) => boolean;
+  /// What to render when row can be expanded
+  renderDetailPanel?: (row: Row<DataType>) => JSX.Element;
 
+  /// currently not possible to type this properly: https://github.com/TanStack/table/issues/4241
   columns: ColumnDef<DataType, any>[];
 
   /// Renders actions that are always visible
@@ -83,7 +94,9 @@ export function Table<DataType extends object>({
   title,
   rowSelection,
   columnSearch,
+  renderDetailPanel,
   renderToolbar,
+  canExpand = () => false,
   renderRowSelectionActions,
   isLoading = false,
 }: TableProps<DataType>) {
@@ -111,9 +124,13 @@ export function Table<DataType extends object>({
       {} as Record<string, boolean>,
     );
   });
+
   const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({});
   const { storedValue: density, setValue: setDensity } = useLocalStorage<Density>(`table-density-${id}`, 'tight');
 
+  // Might because potentially none fullfil the canExpand condtion.
+  const rowsMightExpand = renderDetailPanel ? true : false;
+  const [expanded, setExpanded] = useState<ExpandedState>({});
   const [openColumnVisibilityTooltip, setOpenColumnVisibilityTooltip] = useState<boolean>(false);
   const [hasShownColumnVisibilityTooltip, setHasShownColumnVisibilityTooltip] = useState<boolean>(false);
   const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(
@@ -126,6 +143,7 @@ export function Table<DataType extends object>({
   );
 
   const ROW_SELECTION_COL_SPAN = rowSelection ? 1 : 0;
+  const EXPAND_ROW_COL_SPAN = rowsMightExpand ? 1 : 0;
   const MINIMUM_ROW_COUNT_FOR_PAGINATION = 5;
 
   // handles the column visibility tooltip (shows tooltip when the first column is hidden)
@@ -154,6 +172,7 @@ export function Table<DataType extends object>({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     pageCount: pagination?.pageOptions.pageCount ?? -1,
     manualPagination: true,
     paginateExpandedRows: true, // Expanded rows will be paginated this means that rows that take up more space will be shown on next page.
@@ -169,6 +188,7 @@ export function Table<DataType extends object>({
     enablePinning: true,
     enableHiding: !!columnVisibility,
     enableRowSelection: !!rowSelection,
+    getRowCanExpand: canExpand,
     autoResetPageIndex: false,
 
     columnResizeMode: 'onChange',
@@ -180,6 +200,7 @@ export function Table<DataType extends object>({
     onColumnOrderChange: setColumnOrder,
     onColumnPinningChange: setColumnPinning,
     onRowSelectionChange: rowSelection ? rowSelection?.setRowSelectionState : undefined,
+    onExpandedChange: setExpanded,
 
     initialState: {
       columnVisibility,
@@ -194,6 +215,7 @@ export function Table<DataType extends object>({
     state: {
       columnVisibility,
       columnOrder,
+      expanded,
       sorting: sorting.sortingState,
       columnFilters: columnFiltering.columnFiltersState,
       globalFilter: columnSearch.columnSearchState,
@@ -204,6 +226,7 @@ export function Table<DataType extends object>({
   });
 
   const tableHasNoData = isLoading === false && table.getRowModel().rows.length === 0;
+  const tableHasData = isLoading === false && table.getRowModel().rows.length !== 0;
 
   // rowSelection.rowSelectionState has the following shape: { [rowId: string]: boolean }
   const hasRowSelection = useMemo(() => {
@@ -254,7 +277,7 @@ export function Table<DataType extends object>({
             <thead>
               {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
-                  {rowSelection && table.getRowModel().rows.length !== 0 && !isLoading && (
+                  {rowSelection && tableHasData && (
                     <Th
                       isActive={false}
                       isRight={false}
@@ -276,6 +299,17 @@ export function Table<DataType extends object>({
                       </div>
                     </Th>
                   )}
+                  {rowsMightExpand && tableHasData && (
+                    <Th
+                      isActive={false}
+                      isRight={false}
+                      isDragging={false}
+                      canDrag={false}
+                      isRowSelection={true}
+                      width={15}
+                    />
+                  )}
+
                   {headerGroup.headers.map((header) => (
                     <ColumnHeader
                       header={header}
@@ -291,7 +325,7 @@ export function Table<DataType extends object>({
               {/* loading state */}
               {isLoading && (
                 <tr>
-                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN}>
+                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN + EXPAND_ROW_COL_SPAN}>
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '15px' }}>
                       <Spinner size="small" />
                     </div>
@@ -302,7 +336,7 @@ export function Table<DataType extends object>({
               {/* empty state */}
               {tableHasNoData && (
                 <tr>
-                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN}>
+                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN + EXPAND_ROW_COL_SPAN}>
                     <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                       <Empty
                         header=""
@@ -323,30 +357,51 @@ export function Table<DataType extends object>({
 
               {!isLoading &&
                 table.getRowModel().rows.map((row) => (
-                  <tr key={row.id}>
-                    {row.getCanSelect() && (
-                      <td style={{ paddingRight: '10px', width: '15px' }}>
-                        <CheckBox
-                          value={row.getIsSelected()}
-                          id={row.id}
-                          name={row.id}
-                          hasError={false}
-                          disabled={!row.getCanSelect()}
-                          onChange={() => row.toggleSelected()}
-                          hasDescription={false}
-                          size="small"
-                        />
-                      </td>
-                    )}
-                    {row.getVisibleCells().map(({ column, id, getContext }) => (
-                      <td key={id}>{flexRender(column.columnDef.cell, getContext())}</td>
-                    ))}
-                    {row.getIsExpanded() && (
-                      <tr>
-                        <td colSpan={table.getVisibleLeafColumns().length} />
-                      </tr>
-                    )}
-                  </tr>
+                  <>
+                    <tr key={row.id}>
+                      {row.getCanExpand() ? (
+                        <td style={{ paddingRight: '10px', width: '15px' }}>
+                          {row.getIsExpanded() ? (
+                            <IconButton
+                              size="tiny"
+                              icon={<CollapseIcon />}
+                              ariaLabel="Collapse expanded row"
+                              onClick={() => row.toggleExpanded(false)}
+                            />
+                          ) : (
+                            <IconButton
+                              size="tiny"
+                              icon={<ExpandIcon />}
+                              ariaLabel="expand row"
+                              onClick={() => row.toggleExpanded(true)}
+                            />
+                          )}
+                        </td>
+                      ) : rowsMightExpand ? (
+                        <td />
+                      ) : (
+                        <></>
+                      )}
+                      {row.getCanSelect() && (
+                        <td style={{ paddingRight: '10px', width: '15px' }}>
+                          <CheckBox
+                            value={row.getIsSelected()}
+                            id={row.id}
+                            name={row.id}
+                            hasError={false}
+                            disabled={!row.getCanSelect()}
+                            onChange={() => row.toggleSelected()}
+                            hasDescription={false}
+                            size="small"
+                          />
+                        </td>
+                      )}
+                      {row.getVisibleCells().map(({ column, id, getContext }) => (
+                        <td key={id}>{flexRender(column.columnDef.cell, getContext())}</td>
+                      ))}
+                    </tr>
+                    {row.getIsExpanded() && renderDetailPanel!(row)}
+                  </>
                 ))}
             </tbody>
 
@@ -355,9 +410,15 @@ export function Table<DataType extends object>({
                 <tr>
                   {/* This is the row selection */}
                   {ROW_SELECTION_COL_SPAN ? <td colSpan={1} /> : null}
+                  {/* This is for the row expansion icon */}
+                  {EXPAND_ROW_COL_SPAN ? <td colSpan={1} /> : null}
                   {pagination && (
                     <>
-                      <td colSpan={table.getVisibleLeafColumns().length - 3 - ROW_SELECTION_COL_SPAN} />
+                      <td
+                        colSpan={
+                          table.getVisibleLeafColumns().length - 3 - ROW_SELECTION_COL_SPAN - EXPAND_ROW_COL_SPAN
+                        }
+                      />
                       <td colSpan={1}>
                         <span>
                           showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}-

diff --git a/packages/lib-components/src/components/data/Table/style.ts b/packages/lib-components/src/components/data/Table/style.ts
@@ -46,6 +46,27 @@ export const StyledTable = styled.table<{ density: Density }>`
     border-bottom: none;
   }
 
+  tr.subrow {
+    border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+
+    &:nth-child(even) {
+      background-color: ${({ theme }) => theme.colors.background};
+    }
+
+    &:nth-child(odd) {
+      background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    }
+
+    td {
+      &:first-child {
+        padding-left: 0;
+        padding-bottom: 0;
+      }
+      padding: ${({ theme, density }) =>
+        density === 'tight' ? `${theme.spacing['0_5']} 0` : `${theme.spacing['0_5']} 0`};
+    }
+  }
+
   td {
     border-right: none;
     border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};

diff --git a/...ages/lib-components/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx b/...ages/lib-components/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx
@@ -14,6 +14,7 @@ export const PageSizeSelect: FC<PageSizeSelectProps> = ({ onPageSizeChange, page
       id="page-size"
       multiple={false}
       name="pageSize"
+      inPortal={true}
       value={pageSize.toString() || '10'}
       onChange={onPageSizeChange}
       render={(selectedItems) => {

diff --git a/packages/lib-components/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx b/packages/lib-components/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx
@@ -253,7 +253,7 @@ export const AbsoluteSubmit = () => {
           name="date"
           required={false}
           loading={false}
-          description={'The role will be automatically removed after this date'}
+          description={'The role will be automatically removed after this date.'}
           popOverPlacement={'bottom'}
           timePickerOptions={{ interval: 30 }}
           allowPastDates={false}