🪟 🎨 Updating design for BulkEditPanel component (#18912)

* Adds bulk edit panel new design * Adds: layout update for bulk edit; Applying styles for PillSelect * Adds context for hiding and showing connection form action buttons * Fixes import string; Refactors logic of showing/hiding of action buttons to use Formik state object instead of EditControlsServiceContext; Moves useEffect inside BulkEditServiceProvider; Fixes design of streams count number * Adds disabled state for StreamPathSelect component; Updates BulkEditPanel in case if pkType or cursorType are null, to show StreamPathSelect in case these values are null * Fixes usage of Formik setStatus method; Fixes pathType of PathPopout component * Fixes style after for BulkEditPanel; Fixes pathType to type IndexerType; Fixes Formik useStatus usage * Add tests for BulkEditPanel * Fix BulkEditPanel unit test * Fix BulkEditServiceProvider useEffect hook for controlling visibility of form buttons * Fix BulkEditServiceProvider useEffect hook for controlling visibility of form buttons
airbytehq · Nov 30, 2022 · 975f1be · 975f1be
1 parent 1cdfdbe
commit 975f1be
Show file tree

Hide file tree

Showing 11 changed files with 687 additions and 113 deletions.
diff --git a/airbyte-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx b/airbyte-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx
@@ -29,9 +29,8 @@ export const Cell = styled.div<{
   ellipsis?: boolean;
   flush?: boolean;
 }>`
-  flex: ${({ flex }) => flex || 1} 0 0;
+  flex: ${({ flex }) => (flex !== undefined ? flex : 1)} 0 0;
   padding-right: ${({ flush }) => (flush ? 0 : 10)}px;
-
   word-break: break-word;
   color: ${({ theme, light, lighter }) => (light ? theme.greyColor40 : lighter ? theme.greyColor60 : "inherit")};
   font-weight: ${({ light, lighter }) => (light || lighter ? "normal" : "inherit")};

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.module.scss
@@ -0,0 +1,77 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.headerCell {
+  margin-right: variables.$spacing-xl;
+  padding-right: 0 !important;
+  display: flex;
+  min-width: unset !important;
+  flex-direction: column;
+
+  &.streamsCounterCell {
+    background-color: colors.$blue-500;
+    border-radius: 9px;
+    align-items: center;
+    height: 50px;
+    padding: 0 variables.$spacing-sm !important;
+    justify-content: center;
+    flex: 0 !important;
+  }
+
+  &.syncCell {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.syncCellContent {
+  height: 25px;
+}
+
+.text {
+  color: colors.$white;
+  margin: 0;
+  white-space: nowrap;
+
+  &.streamsCountNumber {
+    font-size: 21px;
+    font-weight: 500;
+    line-height: 25px;
+  }
+
+  &.streamsCountText {
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 17px;
+  }
+
+  &.headerText {
+    font-size: 12px;
+    font-weight: 400;
+    margin-bottom: 5px;
+  }
+}
+
+.cancelButton {
+  border-color: colors.$white !important;
+  color: colors.$white !important;
+  margin-right: variables.$spacing-md;
+  white-space: nowrap;
+}
+
+.applyButton {
+  box-shadow: none !important;
+  background-color: colors.$white !important;
+  color: colors.$blue-500 !important;
+  white-space: nowrap;
+}
+
+.buttonCell {
+  min-width: unset !important;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.syncModeSelect {
+  width: 100%;
+}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.test.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.test.tsx
@@ -0,0 +1,224 @@
+import { render } from "@testing-library/react";
+import ReactDOM from "react-dom";
+import { IntlProvider } from "react-intl";
+
+import { SyncSchemaField, SyncSchemaStream } from "core/domain/catalog";
+import en from "locales/en.json";
+
+import { BulkEditPanel, calculateSharedFields, getAvailableSyncModesOptions } from "./BulkEditPanel";
+import { SyncModeOption } from "./SyncModeSelect";
+
+const MOCK_NODE_1: SyncSchemaStream = {
+  stream: {
+    name: "balance_transactions",
+    jsonSchema: {
+      type: ["null", "object"],
+      properties: {
+        id: {
+          type: ["null", "string"],
+        },
+        fee: {
+          type: ["null", "integer"],
+        },
+        net: {
+          type: ["null", "integer"],
+        },
+        type: {
+          type: ["null", "string"],
+        },
+        amount: {
+          type: ["null", "integer"],
+        },
+        object: {
+          type: ["null", "string"],
+        },
+        source: {
+          type: ["null", "string"],
+        },
+        status: {
+          type: ["null", "string"],
+        },
+        created: {
+          type: ["null", "integer"],
+        },
+        currency: {
+          type: ["null", "string"],
+        },
+        description: {
+          type: ["null", "string"],
+        },
+        fee_details: {
+          type: ["null", "array"],
+          items: {
+            type: ["null", "object"],
+            properties: {
+              type: {
+                type: ["null", "string"],
+              },
+              amount: {
+                type: ["null", "integer"],
+              },
+              currency: {
+                type: ["null", "string"],
+              },
+              application: {
+                type: ["null", "string"],
+              },
+              description: {
+                type: ["null", "string"],
+              },
+            },
+          },
+        },
+        available_on: {
+          type: ["null", "integer"],
+        },
+        exchange_rate: {
+          type: ["null", "number"],
+        },
+        sourced_transfers: {
+          type: ["null", "array"],
+          items: {},
+        },
+      },
+    },
+    supportedSyncModes: ["full_refresh", "incremental"],
+    sourceDefinedCursor: true,
+    defaultCursorField: ["created"],
+    sourceDefinedPrimaryKey: [["id"]],
+  },
+  config: {
+    syncMode: "incremental",
+    cursorField: ["created"],
+    destinationSyncMode: "append_dedup",
+    primaryKey: [["id"]],
+    aliasName: "balance_transactions",
+    selected: true,
+  },
+  id: "0",
+};
+const MOCK_NODE_2: SyncSchemaStream = {
+  stream: {
+    name: "bank_accounts",
+    jsonSchema: {
+      type: ["null", "object"],
+      properties: {
+        id: {
+          type: ["null", "string"],
+        },
+        last4: {
+          type: ["null", "string"],
+        },
+        object: {
+          type: ["null", "string"],
+        },
+        status: {
+          type: ["null", "string"],
+        },
+        country: {
+          type: ["null", "string"],
+        },
+        currency: {
+          type: ["null", "string"],
+        },
+        customer: {
+          type: ["null", "string"],
+        },
+        metadata: {
+          type: ["null", "object"],
+          properties: {},
+        },
+        bank_name: {
+          type: ["null", "string"],
+        },
+        fingerprint: {
+          type: ["null", "string"],
+        },
+        routing_number: {
+          type: ["null", "string"],
+        },
+        account_holder_name: {
+          type: ["null", "string"],
+        },
+        account_holder_type: {
+          type: ["null", "string"],
+        },
+      },
+    },
+    supportedSyncModes: ["full_refresh"],
+    defaultCursorField: [],
+    sourceDefinedPrimaryKey: [["id"]],
+  },
+  config: {
+    syncMode: "full_refresh",
+    cursorField: [],
+    destinationSyncMode: "overwrite",
+    primaryKey: [["id"]],
+    aliasName: "bank_accounts",
+    selected: true,
+  },
+  id: "1",
+};
+
+jest.mock("hooks/services/BulkEdit/BulkEditService", () => ({
+  useBulkEditService: () => ({
+    selectedBatchNodes: [MOCK_NODE_1, MOCK_NODE_2],
+    options: {
+      selected: false,
+    },
+    isActive: true,
+    onChangeOption: jest.fn(),
+    onApply: jest.fn(),
+    onCancel: jest.fn(),
+  }),
+}));
+
+jest.mock("hooks/services/ConnectionForm/ConnectionFormService", () => ({
+  useConnectionFormService: () => ({ destDefinition: ["overwrite", "append", "append_dedup"] }),
+}));
+
+const renderBulkEditPanel = () =>
+  render(
+    <IntlProvider locale="en" messages={en}>
+      <BulkEditPanel />
+    </IntlProvider>
+  );
+
+describe("<BulkEditPanel />", () => {
+  beforeAll(() => {
+    // @ts-ignore
+    ReactDOM.createPortal = (element) => {
+      return element;
+    };
+  });
+
+  it("should render", () => {
+    const component = renderBulkEditPanel();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("calculateSharedFields should work correctly", () => {
+    const expectedResult: SyncSchemaField[] = [
+      { cleanedName: "id", path: ["id"], key: "id", type: "string" },
+      { cleanedName: "object", path: ["object"], key: "object", type: "string" },
+      { cleanedName: "status", path: ["status"], key: "status", type: "string" },
+      { cleanedName: "currency", path: ["currency"], key: "currency", type: "string" },
+    ];
+    const actualResult = calculateSharedFields([MOCK_NODE_1, MOCK_NODE_2]);
+    expect(actualResult).toEqual(expectedResult);
+  });
+
+  it("getAvailableSyncModesOptions should work correctly", () => {
+    const expectedResult: SyncModeOption[] = [
+      { value: { syncMode: "incremental", destinationSyncMode: "append_dedup" } },
+      { value: { syncMode: "full_refresh", destinationSyncMode: "overwrite" } },
+      { value: { syncMode: "incremental", destinationSyncMode: "append" } },
+      { value: { syncMode: "full_refresh", destinationSyncMode: "append" } },
+    ];
+    const actualResult = getAvailableSyncModesOptions(
+      [MOCK_NODE_1, MOCK_NODE_2],
+      ["overwrite", "append", "append_dedup"]
+    );
+    expect(actualResult).toEqual(expectedResult);
+  });
+});