[Connector Builder] Configuration UI MVP

airbyte-webapp/.gitignore

@@ -32,3 +32,4 @@ storybook-static/
 # Ignore generated API clients, since they're automatically generated
 /src/core/request/AirbyteClient.ts
 /src/core/request/ConnectorBuilderClient.ts
+/src/core/request/ConnectorManifest.ts

airbyte-webapp/orval.config.ts

@@ -43,4 +43,21 @@ export default defineConfig({
       },
     },
   },
+  connectorManifest: {
+    input: "./src/services/connectorBuilder/connector_manifest_openapi.yaml",
+    output: {
+      target: "./src/core/request/ConnectorManifest.ts",
+      prettier: true,
+      override: {
+        header: (info) => [
+          `eslint-disable`,
+          `Generated by orval 🍺`,
+          `Do not edit manually. Run "npm run generate-client" instead.`,
+          ...(info.title ? [info.title] : []),
+          ...(info.description ? [info.description] : []),
+          ...(info.version ? [`OpenAPI spec version: ${info.version}`] : []),
+        ],
+      },
+    },
+  },
 });

airbyte-webapp/src/components/connection/DestinationNamespaceModal/DestinationNamespaceModal.module.scss

@@ -1,44 +1,45 @@
-@use "scss/colors";
-@use "scss/variables";
-
-.content {
-  display: flex;
-  height: 340px;
-}
-
-.actions, .description {
-  display: flex;
-  flex-direction: column;
-  padding: variables.$spacing-xl;
-}
-
-.actions {
-  flex: 0 0 300px;
-
-  .radioButton + .radioButton {
-    margin-top: variables.$spacing-xl;
-  }
-
-  .input {
-    position: relative;
-    margin: variables.$spacing-xl 0 0 variables.$spacing-xl;
-
-    .errorMessage {
-      position: absolute;
-      bottom: -16px;
-      left: 0;
-      color: colors.$red-600;
-    }
-  }
-}
-
-.description {
-  overflow: auto;
-  flex: 1 0 0;
-  background-color: colors.$grey-50;
-
-  .generalInfo {
-    color: colors.$grey;
-    margin: variables.$spacing-lg 0;
-  }
-}
+@use "scss/colors";
+@use "scss/variables";
+
+.content {
+  display: flex;
+  height: 340px;
+}
+
+.actions,
+.description {
+  display: flex;
+  flex-direction: column;
+  padding: variables.$spacing-xl;
+}
+
+.actions {
+  flex: 0 0 300px;
+
+  .radioButton + .radioButton {
+    margin-top: variables.$spacing-xl;
+  }
+
+  .input {
+    position: relative;
+    margin: variables.$spacing-xl 0 0 variables.$spacing-xl;
+
+    .errorMessage {
+      position: absolute;
+      bottom: -16px;
+      left: 0;
+      color: colors.$red-600;
+    }
+  }
+}
+
+.description {
+  overflow: auto;
+  flex: 1 0 0;
+  background-color: colors.$grey-50;
+
+  .generalInfo {
+    color: colors.$grey;
+    margin: variables.$spacing-lg 0;
+  }
+}

airbyte-webapp/src/components/connection/DestinationNamespaceModal/ExampleSettingsTable.module.scss

@@ -1,50 +1,52 @@
-@use "scss/colors";
-@use "scss/variables";
-
-.exampleSettingsTable {
-  border-spacing: 0;
-  border-collapse: separate;
-
-  tr {
-    th, td {
-      padding: variables.$spacing-md;
-      border-style: solid;
-      border-color: colors.$dark-blue-50;
-      border-width: 0 variables.$border-thin variables.$border-thin 0;
-    }
-
-    th {
-      border-top-width: variables.$border-thin;
-      background-color: colors.$dark-blue-50;
-      text-align: left;
-
-      .text {
-        color: colors.$grey-600;
-      }
-    }
-
-    td {
-      background-color: colors.$white;
-
-      &:first-child, th:first-child {
-        border-left-width: variables.$border-thin;
-      }
-    }
-
-    &:first-child th:first-child {
-      border-top-left-radius: variables.$border-radius-xs;
-    }
-
-    &:first-child th:last-child {
-      border-top-right-radius: variables.$border-radius-xs;
-    }
-
-    &:last-child td:first-child {
-      border-bottom-left-radius: variables.$border-radius-xs;
-    }
-
-    &:last-child td:last-child {
-      border-bottom-right-radius: variables.$border-radius-xs;
-    }
-  }
-}
+@use "scss/colors";
+@use "scss/variables";
+
+.exampleSettingsTable {
+  border-spacing: 0;
+  border-collapse: separate;
+
+  tr {
+    th,
+    td {
+      padding: variables.$spacing-md;
+      border-style: solid;
+      border-color: colors.$dark-blue-50;
+      border-width: 0 variables.$border-thin variables.$border-thin 0;
+    }
+
+    th {
+      border-top-width: variables.$border-thin;
+      background-color: colors.$dark-blue-50;
+      text-align: left;
+
+      .text {
+        color: colors.$grey-600;
+      }
+    }
+
+    td {
+      background-color: colors.$white;
+
+      &:first-child,
+      th:first-child {
+        border-left-width: variables.$border-thin;
+      }
+    }
+
+    &:first-child th:first-child {
+      border-top-left-radius: variables.$border-radius-xs;
+    }
+
+    &:first-child th:last-child {
+      border-top-right-radius: variables.$border-radius-xs;
+    }
+
+    &:last-child td:first-child {
+      border-bottom-left-radius: variables.$border-radius-xs;
+    }
+
+    &:last-child td:last-child {
+      border-bottom-right-radius: variables.$border-radius-xs;
+    }
+  }
+}

airbyte-webapp/src/components/connection/DestinationStreamNamesModal/DestinationStreamNamesModal.module.scss

@@ -1,29 +1,29 @@
-@use "scss/colors";
-@use "scss/variables";
-
-.content {
-  display: flex;
-  flex-direction: column;
-  margin: variables.$spacing-xl;
-}
-
-.description {
-  color: colors.$grey;
-  margin-bottom: variables.$spacing-xl;
-}
-
-.radioButton + .radioButton {
-  margin-top: variables.$spacing-xl;
-}
-
-.input {
-  position: relative;
-  margin: variables.$spacing-xl 0 variables.$spacing-xl variables.$spacing-xl;
-
-  .errorMessage {
-    position: absolute;
-    bottom: -16px;
-    left: 0;
-    color: colors.$red-600;
-  }
-}
+@use "scss/colors";
+@use "scss/variables";
+
+.content {
+  display: flex;
+  flex-direction: column;
+  margin: variables.$spacing-xl;
+}
+
+.description {
+  color: colors.$grey;
+  margin-bottom: variables.$spacing-xl;
+}
+
+.radioButton + .radioButton {
+  margin-top: variables.$spacing-xl;
+}
+
+.input {
+  position: relative;
+  margin: variables.$spacing-xl 0 variables.$spacing-xl variables.$spacing-xl;
+
+  .errorMessage {
+    position: absolute;
+    bottom: -16px;
+    left: 0;
+    color: colors.$red-600;
+  }
+}

airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.module.scss

@@ -0,0 +1,20 @@
+@use "scss/variables";
+@use "scss/colors";
+
+$buttonWidth: 26px;
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-xl;
+}
+
+.addButton {
+  width: $buttonWidth;
+  height: $buttonWidth !important;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 9px !important;
+}