Add more space between Name and Connector (#477)

airbytehq · Oct 2, 2020 · a9bc028 · a9bc028
1 parent 22b9db4
commit a9bc028
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/airbyte-webapp/src/components/PageTitle/PageTitle.tsx b/airbyte-webapp/src/components/PageTitle/PageTitle.tsx
@@ -39,6 +39,9 @@ export const EndBlock = styled.div`
 
 export const TitleBlock = styled(H3)`
   flex: 1 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const PageTitle: React.FC<IProps> = ({

diff --git a/airbyte-webapp/src/components/Table/Table.tsx b/airbyte-webapp/src/components/Table/Table.tsx
@@ -1,11 +1,17 @@
 import React, { memo } from "react";
 import styled from "styled-components";
-import { ColumnInstance, useTable, Column } from "react-table";
+import { ColumnInstance, useTable, Column, Cell } from "react-table";
 
 type IHeaderProps = {
   headerHighlighted?: boolean;
+  collapse?: boolean;
+  customWidth?: number;
 } & ColumnInstance;
 
+type ICellProps = {
+  column: IHeaderProps;
+} & Cell;
+
 type IProps = {
   columns: Array<IHeaderProps | Column>;
   erroredRows?: boolean;
@@ -15,6 +21,8 @@ type IProps = {
 
 type IThProps = {
   highlighted?: boolean;
+  collapse?: boolean;
+  customWidth?: number;
 } & React.ThHTMLAttributes<HTMLTableHeaderCellElement>;
 
 const TableView = styled.table`
@@ -37,7 +45,7 @@ const Tr = styled.tr<{
   cursor: ${({ hasClick }) => (hasClick ? "pointer" : "auto")};
 `;
 
-const Td = styled.td`
+const Td = styled.td<{ collapse?: boolean; customWidth?: number }>`
   padding: 19px 13px;
   font-size: 14px;
   line-height: 17px;
@@ -47,6 +55,8 @@ const Td = styled.td`
   overflow: hidden;
   text-overflow: ellipsis;
   border-bottom: 1px solid ${({ theme }) => theme.greyColor20};
+  width: ${({ collapse, customWidth }) =>
+    customWidth ? `${customWidth}%` : collapse ? "0.0000000001%" : "auto"};
 
   tr:last-child > & {
     border-bottom: none;
@@ -63,6 +73,8 @@ const Th = styled.th<IThProps>`
   opacity: ${({ highlighted }) => (highlighted ? 1 : 0.6)};
   color: ${({ theme }) => theme.darkPrimaryColor};
   border-bottom: 1px solid ${({ theme }) => theme.greyColor20};
+  width: ${({ collapse, customWidth }) =>
+    customWidth ? `${customWidth}%` : collapse ? "0.0000000001%" : "auto"};
 
   &:first-child {
     padding-left: 45px;
@@ -98,6 +110,8 @@ const Table: React.FC<IProps> = ({
               <Th
                 {...column.getHeaderProps()}
                 highlighted={column.headerHighlighted}
+                collapse={column.collapse}
+                customWidth={column.customWidth}
                 key={`table-column-${key}-${columnKey}`}
               >
                 {column.render("Header")}
@@ -119,10 +133,12 @@ const Table: React.FC<IProps> = ({
                 // @ts-ignore
                 erroredRows={erroredRows && row.original.error}
               >
-                {row.cells.map((cell, key) => {
+                {row.cells.map((cell: ICellProps, key) => {
                   return (
                     <Td
                       {...cell.getCellProps()}
+                      collapse={cell.column.collapse}
+                      customWidth={cell.column.customWidth}
                       key={`table-cell-${row.id}-${key}`}
                     >
                       {cell.render("Cell")}

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/NameCell.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/NameCell.tsx
@@ -20,8 +20,8 @@ const Name = styled.div<{ enabled?: boolean }>`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 360px;
-  color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inheret")};
+  max-width: 500px;
+  color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inherit")};
 `;
 
 const Space = styled.div`

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx
@@ -107,6 +107,7 @@ const SourcesTable: React.FC<IProps> = ({ connections }) => {
         Header: <FormattedMessage id="sources.name" />,
         headerHighlighted: true,
         accessor: "name",
+        customWidth: 40,
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
           <NameCell
             value={cell.value}
@@ -142,7 +143,6 @@ const SourcesTable: React.FC<IProps> = ({ connections }) => {
       {
         Header: <FormattedMessage id="sources.enabled" />,
         accessor: "enabled",
-        collapse: true,
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
           <StatusCell
             enabled={cell.value}