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

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

@@ -10,9 +10,9 @@ 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 { ConnectorNameCell } from "./components/ConnectorNameCell";
+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,11 @@
+$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 → 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 styles from "./ConnectionStatusCell.module.scss";
+import { EntityNameCell } from "./EntityNameCell";
 import { Status } from "../types";
 
-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/ConnectorNameCell.module.scss

@@ -0,0 +1,13 @@
+@use "scss/variables";
+
+$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.tsx

@@ -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/EntityNameCell.module.scss

@@ -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.tsx

@@ -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/FrequencyCell.module.scss

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

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

@@ -1,36 +1,34 @@
+import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
+
+import { Text } from "components/ui/Text";
 
 import { ConnectionScheduleData, ConnectionScheduleType } from "core/request/AirbyteClient";
 
+import styles from "./FrequencyCell.module.scss";
+
 interface FrequencyCellProps {
   value: ConnectionScheduleData;
   enabled?: boolean;
   scheduleType?: ConnectionScheduleType;
 }
 
-const Content = styled.div<{ enabled?: boolean }>`
-  color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inherit")};
-`;
-
-const FrequencyCell: React.FC<FrequencyCellProps> = ({ value, enabled, scheduleType }) => {
+export const FrequencyCell: React.FC<FrequencyCellProps> = ({ value, enabled, scheduleType }) => {
   if (scheduleType === ConnectionScheduleType.cron || scheduleType === ConnectionScheduleType.manual) {
     return (
-      <Content enabled={enabled}>
+      <Text className={classNames(styles.text, { [styles.enabled]: enabled })} size="sm">
         <FormattedMessage id={`frequency.${scheduleType}`} />
-      </Content>
+      </Text>
     );
   }
 
   return (
-    <Content enabled={enabled}>
+    <Text className={classNames(styles.text, { [styles.enabled]: enabled })} size="sm">
       <FormattedMessage
         id={`frequency.${value ? value.basicSchedule?.timeUnit : "manual"}`}
         values={{ value: value.basicSchedule?.units }}
       />
-    </Content>
+    </Text>
   );
 };
-
-export default FrequencyCell;

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

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

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

@@ -1,26 +1,24 @@
+import classNames from "classnames";
 import React from "react";
 import { FormattedRelativeTime } from "react-intl";
-import styled from "styled-components";
 
-const Content = styled.div<{ enabled?: boolean }>`
-  color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inherit")};
-`;
+import { Text } from "components/ui/Text";
 
-interface IProps {
+import styles from "./LastSyncCell.module.scss";
+
+interface LastSyncCellProps {
   timeInSecond: number;
   enabled?: boolean;
 }
 
-const LastSyncCell: React.FC<IProps> = ({ timeInSecond, enabled }) => {
-  if (!timeInSecond) {
-    return null;
-  }
-
+export const LastSyncCell: React.FC<LastSyncCellProps> = ({ timeInSecond, enabled }) => {
   return (
-    <Content enabled={enabled}>
-      <FormattedRelativeTime value={timeInSecond - Date.now() / 1000} updateIntervalInSeconds={60} />
-    </Content>
+    <>
+      {timeInSecond ? (
+        <Text className={classNames(styles.text, { [styles.enabled]: enabled })} size="sm">
+          <FormattedRelativeTime value={timeInSecond - Date.now() / 1000} updateIntervalInSeconds={60} />
+        </Text>
+      ) : null}
+    </>
   );
 };
-
-export default LastSyncCell;