Long source and destination names make the connection list table scroll horizontally

- Removed styled-components
- Refactored Table component
- Added responsive columns
- Created new cell components

Author: Mark Berger

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -11,10 +11,10 @@ import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useQuery } from "hooks/useQuery";
 
 import ConnectionSettingsCell from "./components/ConnectionSettingsCell";
-import ConnectorCell from "./components/ConnectorCell";
-import FrequencyCell from "./components/FrequencyCell";
-import LastSyncCell from "./components/LastSyncCell";
-import NameCell from "./components/NameCell";
+import { ConnectionStatusCell } from "./components/ConnectionStatusCell";
+import { ConnectorNameCell } from "./components/ConnectorNameCell";
+import { FrequencyCell } from "./components/FrequencyCell";
+import { LastSyncCell } from "./components/LastSyncCell";
 import { StatusCell } from "./components/StatusCell";
 import { ITableDataItem, SortOrderEnum } from "./types";
 
@@ -86,8 +86,13 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
         headerHighlighted: true,
         accessor: "name",
         customWidth: 30,
+        responsive: true,
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <NameCell value={cell.value} enabled={row.original.enabled} status={row.original.lastSyncStatus} />
+          <ConnectionStatusCell
+            status={row.original.lastSyncStatus}
+            value={cell.value}
+            enabled={row.original.enabled}
+          />
         ),
       },
       {
@@ -104,13 +109,10 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
         ),
         headerHighlighted: true,
         accessor: "entityName",
+        customWidth: 30,
+        responsive: true,
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <NameCell
-            value={cell.value}
-            enabled={row.original.enabled}
-            icon={entity === "connection"}
-            img={row.original.entityIcon}
-          />
+          <ConnectorNameCell value={cell.value} icon={row.original.entityIcon} enabled={row.original.enabled} />
         ),
       },
       {
@@ -124,11 +126,12 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
           </SortableTableHeader>
         ),
         accessor: "connectorName",
+        customWidth: 30,
+        responsive: true,
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <ConnectorCell value={cell.value} enabled={row.original.enabled} img={row.original.connectorIcon} />
+          <ConnectorNameCell value={cell.value} icon={row.original.connectorIcon} enabled={row.original.enabled} />
         ),
       },
-
       {
         Header: <FormattedMessage id="tables.frequency" />,
         accessor: "scheduleData",

airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx

@@ -4,15 +4,15 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 
+import { ConnectorNameCell } from "components/EntityTable/components/ConnectorNameCell";
 import { Table, SortableTableHeader } from "components/ui/Table";
 
 import { useQuery } from "hooks/useQuery";
 
 import AllConnectionsStatusCell from "./components/AllConnectionsStatusCell";
 import ConnectEntitiesCell from "./components/ConnectEntitiesCell";
-import ConnectorCell from "./components/ConnectorCell";
-import LastSyncCell from "./components/LastSyncCell";
-import NameCell from "./components/NameCell";
+import { EntityNameCell } from "./components/EntityNameCell";
+import { LastSyncCell } from "./components/LastSyncCell";
 import styles from "./ImplementationTable.module.scss";
 import { EntityTableDataItem, SortOrderEnum } from "./types";
 
@@ -80,7 +80,7 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
         accessor: "entityName",
         customWidth: 40,
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <NameCell value={cell.value} enabled={row.original.enabled} />
+          <EntityNameCell value={cell.value} enabled={row.original.enabled} />
         ),
       },
       {
@@ -95,7 +95,7 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
         ),
         accessor: "connectorName",
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <ConnectorCell value={cell.value} enabled={row.original.enabled} img={row.original.connectorIcon} />
+          <ConnectorNameCell value={cell.value} icon={row.original.connectorIcon} enabled={row.original.enabled} />
         ),
       },
       {

airbyte-webapp/src/components/EntityTable/components/ConnectionStatusCell.module.scss

@@ -0,0 +1,14 @@
+@use "scss/variables";
+@use "scss/colors";
+
+$connector_icon_width: 20px;
+$connector_icon_margin: 10px;
+
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  width: calc(100% - #{$connector_icon_width + $connector_icon_margin});
+}

airbyte-webapp/src/components/EntityTable/components/NameCell.tsx renamed to airbyte-webapp/src/components/EntityTable/components/ConnectionStatusCell.tsx

@@ -1,40 +1,20 @@
 import React, { useMemo } from "react";
 import { useIntl } from "react-intl";
-import styled from "styled-components";
 
-import { ConnectorIcon } from "components/common/ConnectorIcon";
 import { StatusIcon } from "components/ui/StatusIcon";
 import { StatusIconStatus } from "components/ui/StatusIcon/StatusIcon";
 
 import { Status } from "../types";
+import styles from "./ConnectionStatusCell.module.scss";
+import { EntityNameCell } from "./EntityNameCell";
 
-interface Props {
+interface ConnectionStatusCellProps {
+  status: string | null;
   value: string;
-  enabled?: boolean;
-  status?: string | null;
-  icon?: boolean;
-  img?: string;
+  enabled: boolean;
 }
 
-const Content = styled.div`
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-`;
-
-const Name = styled.div<{ enabled?: boolean }>`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 500px;
-  color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inherit")};
-`;
-
-const Image = styled(ConnectorIcon)`
-  margin-right: 6px;
-`;
-
-const NameCell: React.FC<Props> = ({ value, enabled, status, icon, img }) => {
+export const ConnectionStatusCell: React.FC<ConnectionStatusCellProps> = ({ status, value, enabled }) => {
   const { formatMessage } = useIntl();
   const statusIconStatus = useMemo<StatusIconStatus | undefined>(
     () =>
@@ -73,12 +53,9 @@ const NameCell: React.FC<Props> = ({ value, enabled, status, icon, img }) => {
         });
 
   return (
-    <Content>
-      {status && <StatusIcon title={title} status={statusIconStatus} />}
-      {icon && <Image icon={img} />}
-      <Name enabled={enabled}>{value}</Name>
-    </Content>
+    <div className={styles.content}>
+      <StatusIcon title={title} status={statusIconStatus} />
+      <EntityNameCell className={styles.text} value={value} enabled={enabled} />
+    </div>
   );
 };
-
-export default NameCell;

airbyte-webapp/src/components/EntityTable/components/ConnectorCell.tsx

@@ -0,0 +1,14 @@
+@use "scss/variables";
+@use "scss/colors";
+
+$status_icon_width: 25px;
+
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  width: calc(100% - #{$status_icon_width});
+  margin-left: variables.$spacing-md;
+}

airbyte-webapp/src/components/EntityTable/components/ConnectorNameCell.module.scss

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { ConnectorIcon } from "components/common/ConnectorIcon";
+
+import styles from "./ConnectorNameCell.module.scss";
+import { EntityNameCell } from "./EntityNameCell";
+
+interface ConnectorNameCellProps {
+  enabled: boolean;
+  value: string;
+  icon: string | undefined;
+}
+
+export const ConnectorNameCell: React.FC<ConnectorNameCellProps> = ({ value, enabled, icon }) => {
+  return (
+    <div className={styles.content} title={value}>
+      <ConnectorIcon icon={icon} />
+      <EntityNameCell className={styles.text} value={value} enabled={enabled} />
+    </div>
+  );
+};

airbyte-webapp/src/components/EntityTable/components/ConnectorNameCell.tsx

@@ -0,0 +1,14 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  color: colors.$grey;
+
+  &.enabled {
+    color: colors.$dark-blue;
+  }
+}

airbyte-webapp/src/components/EntityTable/components/EntityNameCell.module.scss

@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import React from "react";
+
+import { Text } from "components/ui/Text";
+
+import styles from "./EntityNameCell.module.scss";
+
+interface EntityNameCellProps {
+  value: string;
+  enabled: boolean;
+  className?: string;
+}
+
+export const EntityNameCell: React.FC<EntityNameCellProps> = ({ value, enabled, className }) => {
+  return (
+    <Text className={classNames(styles.text, { [styles.enabled]: enabled }, className)} size="sm" title={value}>
+      {value}
+    </Text>
+  );
+};

airbyte-webapp/src/components/EntityTable/components/EntityNameCell.tsx

@@ -0,0 +1,10 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.text {
+  color: colors.$grey;
+
+  &.enabled {
+    color: colors.$dark-blue;
+  }
+}