🪟 🔧 Adds new Button component (#16604)

* Add button component * Fixes comments on PR * Fixes style for old components * Fixes more style for old components * Update link usage of button * Fixes styles cascade * Fixes ref usage for buttons * Updates customStyles into className; Fixes error passing all properties to native button component; Fixes style in some places for button container; Removes unnecessary files * Fixes loading state for button; Adds storybook Button with different states * Fixes router issue; Fixes styles * Fixes SortButton; Fixes password eye button * Fixes comments * Update test snapshots * Fix plus icon; Fixes connection error button style * Fix buttons style; Updates variant noStroke -> clear * Fix version cell button * Update snapshots * Updates snapshots * Fixes settings button styles; Fixes editor row styles; Fixes isLoading property
airbytehq · Sep 28, 2022 · ed8186e · ed8186e
1 parent dcc25d7
commit ed8186e
Show file tree

Hide file tree

Showing 101 changed files with 847 additions and 652 deletions.
diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx
@@ -39,7 +39,7 @@ const EditorHeader: React.FC<EditorHeaderProps> = ({
     <Content>
       {mainTitle || <FormattedMessage id="form.items" values={{ count: itemsCount }} />}
       {mode !== "readonly" && (
-        <Button secondary type="button" onClick={onAddItem} data-testid="addItemButton" disabled={disabled}>
+        <Button variant="secondary" type="button" onClick={onAddItem} data-testid="addItemButton" disabled={disabled}>
           {addButtonText || <FormattedMessage id="form.addItems" />}
         </Button>
       )}

diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.module.scss b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.module.scss
@@ -14,8 +14,8 @@
   font-weight: 400;
   font-size: 12px;
   line-height: 17px;
-  padding: variables.$spacing-md 8px;
-  gap: variables.$spacing-md;
+  padding: variables.$spacing-xs variables.$spacing-xs variables.$spacing-xs variables.$spacing-md;
+  gap: variables.$spacing-xs;
 }
 
 .name {
@@ -27,5 +27,4 @@
 .actions {
   display: flex;
   flex-direction: row;
-  gap: variables.$spacing-md;
 }
diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx
@@ -25,23 +25,23 @@ export const EditorRow: React.FC<EditorRowProps> = ({ name, id, description, onE
       <div className={styles.name}>{name || id}</div>
       <div className={styles.actions}>
         <Button
+          size="xs"
           type="button"
-          iconOnly
+          variant="clear"
           arial-label={formatMessage({ id: "form.edit" })}
           onClick={() => onEdit(id)}
           disabled={disabled}
-        >
-          <PencilIcon />
-        </Button>
+          icon={<PencilIcon />}
+        />
         <Button
+          size="xs"
           type="button"
-          iconOnly
+          variant="clear"
           aria-label={formatMessage({ id: "form.delete" })}
           onClick={() => onRemove(id)}
           disabled={disabled}
-        >
-          <CrossIcon />
-        </Button>
+          icon={<CrossIcon />}
+        />
       </div>
     </div>
   );

diff --git a/airbyte-webapp/src/components/CenteredPageComponents/BigButton.tsx b/airbyte-webapp/src/components/CenteredPageComponents/BigButton.tsx
diff --git a/airbyte-webapp/src/components/CenteredPageComponents/index.tsx b/airbyte-webapp/src/components/CenteredPageComponents/index.tsx
@@ -1,5 +1,4 @@
-import BigButton from "./BigButton";
 import PageViewContainer from "./PageViewContainer";
 import Subtitle from "./Subtitle";
 
-export { BigButton, PageViewContainer, Subtitle };
+export { PageViewContainer, Subtitle };
diff --git a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.module.scss b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.module.scss
@@ -0,0 +1,3 @@
+.buttonWithMargin {
+  margin-right: 12px;
+}
diff --git a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx
@@ -2,16 +2,15 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { LoadingButton } from "components";
 import { Button } from "components/base/Button";
 import { Modal } from "components/ui/Modal";
 
 import useLoadingState from "../../hooks/useLoadingState";
+import styles from "./ConfirmationModal.module.scss";
 
 const Content = styled.div`
   width: 585px;
   font-size: 14px;
-  line-height: 28px;
   padding: 25px;
   white-space: pre-line;
 `;
@@ -22,10 +21,6 @@ const ButtonContent = styled.div`
   justify-content: flex-end;
 `;
 
-const ButtonWithMargin = styled(Button)`
-  margin-right: 12px;
-`;
-
 export interface ConfirmationModalProps {
   onClose: () => void;
   title: string;
@@ -53,12 +48,18 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
       <Content>
         <FormattedMessage id={text} />
         <ButtonContent>
-          <ButtonWithMargin onClick={onClose} type="button" secondary disabled={isLoading}>
+          <Button
+            className={styles.buttonWithMargin}
+            onClick={onClose}
+            type="button"
+            variant="secondary"
+            disabled={isLoading}
+          >
             <FormattedMessage id={cancelButtonText ?? "form.cancel"} />
-          </ButtonWithMargin>
-          <LoadingButton danger onClick={onSubmitBtnClick} data-id={submitButtonDataId} isLoading={isLoading}>
+          </Button>
+          <Button variant="danger" onClick={onSubmitBtnClick} data-id={submitButtonDataId} isLoading={isLoading}>
             <FormattedMessage id={submitButtonText} />
-          </LoadingButton>
+          </Button>
         </ButtonContent>
       </Content>
     </Modal>

diff --git a/airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx b/airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx
@@ -18,7 +18,7 @@ const TryAfterErrorBlock: React.FC<TryAfterErrorBlockProps> = ({ message, onClic
     <Text as="p" size="lg" centered className={styles.message}>
       {message || <FormattedMessage id="form.schemaFailed" />}
     </Text>
-    <Button className={styles.retryButton} onClick={onClick} danger>
+    <Button className={styles.retryButton} onClick={onClick} variant="danger">
       <FormattedMessage id="form.tryAgain" />
     </Button>
   </div>

diff --git a/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx b/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx
@@ -56,7 +56,7 @@ const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
         </H5>
         <FormattedMessage id={`tables.${type}DataDelete`} />
       </Text>
-      <Button danger onClick={onDeleteButtonClick} data-id="open-delete-modal">
+      <Button variant="danger" onClick={onDeleteButtonClick} data-id="open-delete-modal">
         <FormattedMessage id={`tables.${type}Delete`} />
       </Button>
     </DeleteBlockComponent>

diff --git a/airbyte-webapp/src/components/EmptyResourceListView/EmptyResourceListView.tsx b/airbyte-webapp/src/components/EmptyResourceListView/EmptyResourceListView.tsx
@@ -44,7 +44,7 @@ export const EmptyResourceListView: React.FC<EmptyResourceListViewProps> = ({ re
           resource={resourceType}
         />
       </div>
-      <Button onClick={onCreateClick} size="xl" data-id={`new-${singularResourceType}`}>
+      <Button onClick={onCreateClick} size="lg" data-id={`new-${singularResourceType}`}>
         <FormattedMessage id={buttonMessageId} />
       </Button>
     </div>

diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.module.scss b/airbyte-webapp/src/components/EntityTable/ConnectionTable.module.scss
@@ -0,0 +1,10 @@
+.tableHeaderButton {
+  background-color: inherit;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  font-weight: inherit;
+  text-transform: inherit;
+  white-space: nowrap;
+}
diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx
@@ -16,8 +16,9 @@ import ConnectorCell from "./components/ConnectorCell";
 import FrequencyCell from "./components/FrequencyCell";
 import LastSyncCell from "./components/LastSyncCell";
 import NameCell from "./components/NameCell";
-import SortButton from "./components/SortButton";
+import SortIcon from "./components/SortIcon";
 import StatusCell from "./components/StatusCell";
+import styles from "./ConnectionTable.module.scss";
 import { ITableDataItem, SortOrderEnum } from "./types";
 
 const Content = styled.div`
@@ -80,14 +81,10 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
     () => [
       {
         Header: (
-          <>
+          <button className={styles.tableHeaderButton} onClick={() => onSortClick("name")}>
             <FormattedMessage id="tables.name" />
-            <SortButton
-              wasActive={sortBy === "name"}
-              lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("name")}
-            />
-          </>
+            <SortIcon wasActive={sortBy === "name"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
+          </button>
         ),
         headerHighlighted: true,
         accessor: "name",
@@ -98,18 +95,14 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
       },
       {
         Header: (
-          <>
+          <button className={styles.tableHeaderButton} onClick={() => onSortClick("entityName")}>
             {entity === "connection" ? (
               <FormattedMessage id="tables.destinationConnectionToName" />
             ) : (
               <FormattedMessage id={`tables.${entity}ConnectionToName`} />
             )}
-            <SortButton
-              wasActive={sortBy === "entityName"}
-              lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("entityName")}
-            />
-          </>
+            <SortIcon wasActive={sortBy === "entityName"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
+          </button>
         ),
         headerHighlighted: true,
         accessor: "entityName",
@@ -124,18 +117,14 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
       },
       {
         Header: (
-          <>
+          <button className={styles.tableHeaderButton} onClick={() => onSortClick("connectorName")}>
             {entity === "connection" ? (
               <FormattedMessage id="tables.sourceConnectionToName" />
             ) : (
               <FormattedMessage id="tables.connector" />
             )}
-            <SortButton
-              wasActive={sortBy === "connectorName"}
-              lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("connectorName")}
-            />
-          </>
+            <SortIcon wasActive={sortBy === "connectorName"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
+          </button>
         ),
         accessor: "connectorName",
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
@@ -152,14 +141,10 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
       },
       {
         Header: (
-          <>
+          <button className={styles.tableHeaderButton} onClick={() => onSortClick("lastSync")}>
             <FormattedMessage id="tables.lastSync" />
-            <SortButton
-              wasActive={sortBy === "lastSync"}
-              lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("lastSync")}
-            />
-          </>
+            <SortIcon wasActive={sortBy === "lastSync"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
+          </button>
         ),
         accessor: "lastSync",
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (

diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss b/airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss
@@ -5,3 +5,14 @@
     padding-left: 32px !important;
   }
 }
+
+.tableHeaderButton {
+  display: inline-flex;
+  font-size: inherit;
+  text-transform: inherit;
+  color: inherit;
+  background-color: inherit;
+  border: none;
+  font-weight: inherit;
+  cursor: pointer;
+}
diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx b/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx
@@ -13,7 +13,7 @@ import ConnectEntitiesCell from "./components/ConnectEntitiesCell";
 import ConnectorCell from "./components/ConnectorCell";
 import LastSyncCell from "./components/LastSyncCell";
 import NameCell from "./components/NameCell";
-import SortButton from "./components/SortButton";
+import SortIcon from "./components/SortIcon";
 import styles from "./ImplementationTable.module.scss";
 import { EntityTableDataItem, SortOrderEnum } from "./types";
 
@@ -69,14 +69,10 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
     () => [
       {
         Header: (
-          <>
+          <button className={styles.tableHeaderButton} onClick={() => onSortClick("entity")}>
             <FormattedMessage id="tables.name" />
-            <SortButton
-              wasActive={sortBy === "entity"}
-              lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("entity")}
-            />
-          </>
+            <SortIcon wasActive={sortBy === "entity"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
+          </button>
         ),
         headerHighlighted: true,
         accessor: "entityName",
@@ -87,14 +83,10 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
       },
       {
         Header: (
-          <>
+          <button className={styles.tableHeaderButton} onClick={() => onSortClick("connector")}>
             <FormattedMessage id="tables.connector" />
-            <SortButton
-              wasActive={sortBy === "connector"}
-              lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("connector")}
-            />
-          </>
+            <SortIcon wasActive={sortBy === "connector"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
+          </button>
         ),
         accessor: "connectorName",
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
@@ -110,14 +102,10 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
       },
       {
         Header: (
-          <>
+          <button className={styles.tableHeaderButton} onClick={() => onSortClick("lastSync")}>
             <FormattedMessage id="tables.lastSync" />
-            <SortButton
-              wasActive={sortBy === "lastSync"}
-              lowToLarge={sortOrder === SortOrderEnum.ASC}
-              onClick={() => onSortClick("lastSync")}
-            />
-          </>
+            <SortIcon wasActive={sortBy === "lastSync"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
+          </button>
         ),
         accessor: "lastSync",
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (

diff --git a/airbyte-webapp/src/components/EntityTable/components/SortButton.tsx b/airbyte-webapp/src/components/EntityTable/components/SortButton.tsx
diff --git a/airbyte-webapp/src/components/EntityTable/components/SortIcon.module.scss b/airbyte-webapp/src/components/EntityTable/components/SortIcon.module.scss
@@ -0,0 +1,3 @@
+.sortIcon {
+  margin-left: 10px;
+}