refactor(console): use colgroup in table (#445)

packages/console/src/components/Card/index.module.scss

@@ -4,5 +4,5 @@
   background: var(--color-on-primary);
   border-radius: _.unit(4);
   padding: _.unit(6);
-  height: 100%;
+  min-height: 100%;
 }

packages/console/src/components/Table/TableLoading.tsx

@@ -1,18 +1,36 @@
-import React, { ReactNode } from 'react';
+import React, { useMemo } from 'react';
 
+import ItemPreviewLoading from './ItemPreviewLoading';
 import * as styles from './TableLoading.module.scss';
 
-export { default as ItemPreviewLoading } from './ItemPreviewLoading';
-
 type Props = {
-  children: ReactNode;
+  columns: number;
 };
 
-const TableLoading = ({ children }: Props) => (
-  <>
-    <tr className={styles.loading}>{children}</tr>
-    <tr className={styles.loading}>{children}</tr>
-  </>
-);
+const TableLoading = ({ columns }: Props) => {
+  const row = useMemo(
+    () => (
+      <tr className={styles.loading}>
+        <td>
+          <ItemPreviewLoading />
+        </td>
+        {Array.from({ length: columns - 1 }).map((_, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <td key={index}>
+            <div />
+          </td>
+        ))}
+      </tr>
+    ),
+    [columns]
+  );
+
+  return (
+    <>
+      {row}
+      {row}
+    </>
+  );
+};
 
 export default TableLoading;

packages/console/src/pages/ApiResources/index.tsx

@@ -14,7 +14,7 @@ import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import TableError from '@/components/Table/TableError';
-import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
+import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 
@@ -62,9 +62,13 @@ const ApiResources = () => {
         </Modal>
       </div>
       <table className={styles.table}>
+        <colgroup>
+          <col className={styles.apiResourceName} />
+          <col />
+        </colgroup>
         <thead>
           <tr>
-            <th className={styles.apiResourceName}>{t('api_resources.api_name')}</th>
+            <th>{t('api_resources.api_name')}</th>
             <th>{t('api_resources.api_identifier')}</th>
           </tr>
         </thead>
@@ -75,16 +79,7 @@ const ApiResources = () => {
               onRetry={async () => mutate(undefined, true)}
             />
           )}
-          {isLoading && (
-            <TableLoading>
-              <td className={styles.apiResourceName}>
-                <ItemPreviewLoading />
-              </td>
-              <td>
-                <div />
-              </td>
-            </TableLoading>
-          )}
+          {isLoading && <TableLoading columns={2} />}
           {data?.map(({ id, name, indicator }) => (
             <tr
               key={id}
@@ -93,7 +88,7 @@ const ApiResources = () => {
                 navigate(buildDetailsLink(id));
               }}
             >
-              <td className={styles.apiResourceName}>
+              <td>
                 <ItemPreview title={name} icon={<ImagePlaceholder />} to={buildDetailsLink(id)} />
               </td>
               <td>

packages/console/src/pages/Applications/index.tsx

@@ -14,7 +14,7 @@ import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import TableError from '@/components/Table/TableError';
-import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
+import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
@@ -60,9 +60,13 @@ const Applications = () => {
         </Modal>
       </div>
       <table className={styles.table}>
+        <colgroup>
+          <col className={styles.applicationName} />
+          <col />
+        </colgroup>
         <thead>
           <tr>
-            <th className={styles.applicationName}>{t('applications.application_name')}</th>
+            <th>{t('applications.application_name')}</th>
             <th>{t('applications.client_id')}</th>
           </tr>
         </thead>
@@ -73,16 +77,7 @@ const Applications = () => {
               onRetry={async () => mutate(undefined, true)}
             />
           )}
-          {isLoading && (
-            <TableLoading>
-              <td className={styles.applicationName}>
-                <ItemPreviewLoading />
-              </td>
-              <td>
-                <div />
-              </td>
-            </TableLoading>
-          )}
+          {isLoading && <TableLoading columns={2} />}
           {data?.map(({ id, name, type }) => (
             <tr
               key={id}
@@ -91,7 +86,7 @@ const Applications = () => {
                 navigate(`/applications/${id}`);
               }}
             >
-              <td className={styles.applicationName}>
+              <td>
                 <ItemPreview
                   title={name}
                   subtitle={t(`${applicationTypeI18nKey[type]}.title`)}

packages/console/src/pages/Connectors/components/ConnectorRow.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import Button from '@/components/Button';
 import Status from '@/components/Status';
 
-import * as styles from '../index.module.scss';
 import ConnectorName from './ConnectorName';
 
 type Props = {
@@ -31,7 +30,7 @@ const ConnectorRow = ({ type, connector, onClickSetup }: Props) => {
 
   return (
     <tr>
-      <td className={styles.connectorName}>
+      <td>
         <ConnectorName connector={connector} titlePlaceholder={typeLabel} />
       </td>
       <td>{typeLabel}</td>

packages/console/src/pages/Connectors/index.tsx

@@ -10,7 +10,7 @@ import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
 import TabNav, { TabNavLink } from '@/components/TabNav';
 import TableError from '@/components/Table/TableError';
-import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
+import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 
 import ConnectorRow from './components/ConnectorRow';
@@ -67,9 +67,14 @@ const Connectors = () => {
           <TabNavLink href="/connectors/social">{t('connectors.tab_social')}</TabNavLink>
         </TabNav>
         <table className={styles.table}>
+          <colgroup>
+            <col className={styles.connectorName} />
+            <col />
+            <col />
+          </colgroup>
           <thead>
             <tr>
-              <th className={styles.connectorName}>{t('connectors.connector_name')}</th>
+              <th>{t('connectors.connector_name')}</th>
               <th>{t('connectors.connector_type')}</th>
               <th>{t('connectors.connector_status')}</th>
             </tr>
@@ -81,19 +86,7 @@ const Connectors = () => {
                 onRetry={async () => mutate(undefined, true)}
               />
             )}
-            {isLoading && (
-              <TableLoading>
-                <td className={styles.connectorName}>
-                  <ItemPreviewLoading />
-                </td>
-                <td>
-                  <div />
-                </td>
-                <td>
-                  <div />
-                </td>
-              </TableLoading>
-            )}
+            {isLoading && <TableLoading columns={3} />}
             {socialConnectors?.length === 0 && (
               <tr>
                 <td colSpan={3}>

packages/console/src/pages/Users/index.tsx

@@ -11,7 +11,7 @@ import CardTitle from '@/components/CardTitle';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import TableError from '@/components/Table/TableError';
-import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
+import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 
@@ -53,6 +53,11 @@ const Users = () => {
         </Modal>
       </div>
       <table className={styles.table}>
+        <colgroup>
+          <col className={styles.userName} />
+          <col />
+          <col />
+        </colgroup>
         <thead>
           <tr>
             <th>{t('users.user_name')}</th>
@@ -67,19 +72,7 @@ const Users = () => {
               onRetry={async () => mutate(undefined, true)}
             />
           )}
-          {isLoading && (
-            <TableLoading>
-              <td className={styles.userName}>
-                <ItemPreviewLoading />
-              </td>
-              <td>
-                <div />
-              </td>
-              <td>
-                <div />
-              </td>
-            </TableLoading>
-          )}
+          {isLoading && <TableLoading columns={3} />}
           {data?.map(({ id, name, username }) => (
             <tr
               key={id}
@@ -88,7 +81,7 @@ const Users = () => {
                 navigate(`/users/${id}`);
               }}
             >
-              <td className={styles.userName}>
+              <td>
                 <ItemPreview
                   title={name ?? '-'}
                   subtitle={username ?? '-'}

packages/console/src/scss/normalized.scss

@@ -22,16 +22,10 @@ table {
   border: 1px solid var(--color-neutral-90);
   border-radius: _.unit(2);
   border-spacing: 0;
+  width: 100%;
+  table-layout: fixed;
   overflow: hidden;
 
-  thead,
-  tbody,
-  tr {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-  }
-
   thead {
     th {
       font: var(--font-subhead-2);
@@ -48,11 +42,6 @@ table {
   }
 
   tbody {
-    display: block;
-    overflow: auto;
-    table-layout: fixed;
-    max-height: calc(100% - _.unit(40));
-
     td {
       border-bottom: 1px solid var(--color-neutral-90);
       padding: _.unit(5) _.unit(4);