Merge branch 'master' into marcos/test-pr-10655

Author: marcosmarxm

airbyte-api/src/main/openapi/config.yaml

@@ -2910,9 +2910,9 @@ components:
     OperationIdRequestBody:
       type: object
       required:
-        - OperationId
+        - operationId
       properties:
-        OperationId:
+        operationId:
           $ref: "#/components/schemas/OperationId"
     OperationCreate:
       type: object

airbyte-integrations/connectors/destination-snowflake/src/main/resources/spec.json

@@ -20,8 +20,8 @@
     "additionalProperties": true,
     "properties": {
       "host": {
-        "description": "The host domain of the snowflake instance (must include the account, region, cloud environment, and end with snowflakecomputing.com).",
-        "examples": ["accountname.us-east-2.aws.snowflakecomputing.com"],
+        "description": "The host domain of the snowflake instance (must include the account, region, cloud environment, and end with snowflakecomputing.com). The account identifier differs depending on your cloud region, be sure to verify with Snowflake's documentation.",
+        "examples": ["accountname.us-east-2.aws.snowflakecomputing.com", "accountname.snowflakecomputing.com"],
         "type": "string",
         "title": "Host",
         "order": 0

airbyte-webapp/src/components/Table/Table.tsx

@@ -11,10 +11,16 @@ import {
 
 import { Card } from "components";
 
+type PaddingProps = {
+  left?: number;
+  right?: number;
+};
+
 type IHeaderProps = {
   headerHighlighted?: boolean;
   collapse?: boolean;
   customWidth?: number;
+  customPadding?: PaddingProps;
 } & ColumnInstance;
 
 type ICellProps = {
@@ -25,6 +31,7 @@ type IThProps = {
   highlighted?: boolean;
   collapse?: boolean;
   customWidth?: number;
+  customPadding?: PaddingProps;
   light?: boolean;
 } & React.ThHTMLAttributes<HTMLTableHeaderCellElement>;
 
@@ -47,8 +54,13 @@ const Tr = styled.tr<{
   cursor: ${({ hasClick }) => (hasClick ? "pointer" : "auto")};
 `;
 
-const Td = styled.td<{ collapse?: boolean; customWidth?: number }>`
-  padding: 16px 13px;
+const Td = styled.td<{
+  collapse?: boolean;
+  customWidth?: number;
+  customPadding?: PaddingProps;
+}>`
+  padding: ${({ customPadding }) =>
+    `16px ${customPadding?.right ?? 13}px 16px ${customPadding?.left ?? 13}px`};
   font-size: 12px;
   line-height: 15px;
   font-weight: normal;
@@ -75,7 +87,8 @@ const Td = styled.td<{ collapse?: boolean; customWidth?: number }>`
 
 const Th = styled.th<IThProps>`
   background: ${({ theme, light }) => (light ? "none" : theme.textColor)};
-  padding: 9px 13px 10px;
+  padding: ${({ customPadding }) =>
+    `9px ${customPadding?.right ?? 13}px 10px ${customPadding?.left ?? 13}px`};
   text-align: left;
   font-size: ${({ light }) => (light ? 11 : 10)}px;
   line-height: 12px;
@@ -157,6 +170,7 @@ const Table: React.FC<IProps> = ({
                 {...column.getHeaderProps()}
                 highlighted={column.headerHighlighted}
                 collapse={column.collapse}
+                customPadding={column.customPadding}
                 customWidth={column.customWidth}
                 key={`table-column-${key}-${columnKey}`}
                 light={light}
@@ -185,6 +199,7 @@ const Table: React.FC<IProps> = ({
                     <Td
                       {...cell.getCellProps()}
                       collapse={cell.column.collapse}
+                      customPadding={cell.column.customPadding}
                       customWidth={cell.column.customWidth}
                       key={`table-cell-${row.id}-${key}`}
                     >

airbyte-webapp/src/components/base/DropDown/components/SingleValue.tsx

@@ -9,14 +9,14 @@ export type IProps = {
   data?: IDataItem;
 } & SingleValueProps<OptionTypeBase>;
 
-const ItemView = styled.div`
+export const ItemView = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: left;
   align-items: center;
 `;
 
-const Icon = styled.div`
+export const Icon = styled.div`
   margin-right: 6px;
   display: inline-block;
 `;

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -6,7 +6,7 @@
   "login.loginTitle": "Sign in to Airbyte",
   "login.lastStep": "One last step",
   "login.confirmEmail": "Confirm your email address!",
-  "login.confirmEmail.text": "We sent you a confirmation link to {email}. <br/>Please click on the link to access your new Airbyte account.",
+  "login.confirmEmail.text": "We sent you a confirmation link to {email}. Please click on the link to access your new Airbyte account.",
   "login.resendEmail": "Didn’t receive the email? Send it again",
   "confirmEmail.signOut": "Entered the wrong email address? Start over",
   "login.yourEmail": "Your work email*",

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsageCell.tsx

@@ -2,28 +2,13 @@ import React from "react";
 import styled from "styled-components";
 
 type ConnectionCellProps = {
-  value: number;
   percent: number;
 };
 
-const Content = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
-const Value = styled.div`
-  padding-right: 10px;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 17px;
-  flex: 1 0 0;
-  min-width: 50px;
-`;
-
 const Bar = styled.div`
   height: 10px;
   width: 100%;
+  min-width: 150px;
   background: ${({ theme }) => theme.greyColor20};
   flex: 10 0 0;
   overflow: hidden;
@@ -37,15 +22,10 @@ const Full = styled.div<{ percent: number }>`
   opacity: 0.5;
 `;
 
-const UsageCell: React.FC<ConnectionCellProps> = ({ value, percent }) => {
-  return (
-    <Content>
-      <Value>{value}</Value>
-      <Bar>
-        <Full percent={percent} />
-      </Bar>
-    </Content>
-  );
-};
+const UsageCell: React.FC<ConnectionCellProps> = ({ percent }) => (
+  <Bar>
+    <Full percent={percent} />
+  </Bar>
+);
 
 export default UsageCell;

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx

@@ -18,6 +18,14 @@ const Content = styled.div`
   padding: 0 60px 0 15px;
 `;
 
+const UsageValue = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  padding-right: 10px;
+  min-width: 53px;
+`;
+
 type UsagePerConnectionTableProps = {
   creditConsumption: CreditConsumptionByConnector[];
 };
@@ -144,11 +152,18 @@ const UsagePerConnectionTable: React.FC<UsagePerConnectionTableProps> = ({
           </>
         ),
         accessor: "creditsConsumed",
-        Cell: ({ cell, row }: CellProps<FullTableProps>) => (
-          <UsageCell
-            value={cell.value}
-            percent={row.original.creditsConsumedPercent}
-          />
+        collapse: true,
+        customPadding: { right: 0 },
+        Cell: ({ cell }: CellProps<FullTableProps>) => (
+          <UsageValue>{cell.value}</UsageValue>
+        ),
+      },
+      {
+        Header: "",
+        accessor: "creditsConsumedPercent",
+        customPadding: { left: 0 },
+        Cell: ({ cell }: CellProps<FullTableProps>) => (
+          <UsageCell percent={cell.value} />
         ),
       },
       // TODO: Replace to Grow column

airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx

@@ -27,6 +27,11 @@ import {
   IProps as OptionProps,
   OptionView,
 } from "components/base/DropDown/components/Option";
+import {
+  IProps as SingleValueProps,
+  Icon as SingleValueIcon,
+  ItemView as SingleValueView,
+} from "components/base/DropDown/components/SingleValue";
 
 const BottomElement = styled.div`
   background: ${(props) => props.theme.greyColro0};
@@ -70,6 +75,15 @@ const Stage = styled.div`
   color: ${({ theme }) => theme.textColor};
 `;
 
+const SingleValueContent = styled(components.SingleValue)`
+  width: 100%;
+  padding-right: 38px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
 type MenuWithRequestButtonProps = MenuListComponentProps<IDataItem, false>;
 
 const ConnectorList: React.FC<MenuWithRequestButtonProps> = ({
@@ -88,6 +102,18 @@ const ConnectorList: React.FC<MenuWithRequestButtonProps> = ({
   </>
 );
 
+const StageLabel: React.FC<{ releaseStage?: ReleaseStage }> = ({
+  releaseStage,
+}) =>
+  releaseStage && releaseStage !== ReleaseStage.GENERALLY_AVAILABLE ? (
+    <Stage>
+      <FormattedMessage
+        id={`connector.releaseStage.${releaseStage}`}
+        defaultMessage={releaseStage}
+      />
+    </Stage>
+  ) : null;
+
 const Option: React.FC<OptionProps> = (props) => {
   return (
     <components.Option {...props}>
@@ -100,20 +126,26 @@ const Option: React.FC<OptionProps> = (props) => {
           {props.data.img || null}
           <Label>{props.label}</Label>
         </Text>
-        {props.data.releaseStage &&
-        props.data.releaseStage !== ReleaseStage.GENERALLY_AVAILABLE ? (
-          <Stage>
-            <FormattedMessage
-              id={`connector.releaseStage.${props.data.releaseStage}`}
-              defaultMessage={props.data.releaseStage}
-            />
-          </Stage>
-        ) : null}
+        <StageLabel releaseStage={props.data.releaseStage} />
       </OptionView>
     </components.Option>
   );
 };
 
+const SingleValue: React.FC<SingleValueProps> = (props) => {
+  return (
+    <SingleValueView>
+      {props.data.img && <SingleValueIcon>{props.data.img}</SingleValueIcon>}
+      <div>
+        <SingleValueContent {...props}>
+          {props.data.label}
+          <StageLabel releaseStage={props.data.releaseStage} />
+        </SingleValueContent>
+      </div>
+    </SingleValueView>
+  );
+};
+
 const ConnectorServiceTypeControl: React.FC<{
   property: FormBaseItem;
   formType: "source" | "destination";
@@ -198,6 +230,7 @@ const ConnectorServiceTypeControl: React.FC<{
           components={{
             MenuList: ConnectorList,
             Option,
+            SingleValue,
           }}
           selectProps={{ onOpenRequestConnectorModal }}
           error={!!fieldMeta.error && fieldMeta.touched}

docs/integrations/destinations/snowflake.md

@@ -111,7 +111,9 @@ commit;
 
 You should now have all the requirements needed to configure Snowflake as a destination in the UI. You'll need the following information to configure the Snowflake destination:
 
-* **[Host](https://docs.snowflake.com/en/user-guide/admin-account-identifier.html)** : The host domain of the snowflake instance (must include the account, region, cloud environment, and end with snowflakecomputing.com). Example - `accountname.us-east-2.aws.snowflakecomputing.com`
+* **[Host](https://docs.snowflake.com/en/user-guide/admin-account-identifier.html)** : The host domain of the snowflake instance (must include the account, region, cloud environment, and end with snowflakecomputing.com). Be sure to use the correct [account identifier format](https://docs.snowflake.com/en/user-guide/admin-account-identifier.html#account-identifier-formats-by-cloud-platform-and-region) based on the region you are in: 
+   * Example - us-west-1: `xy12345.snowflakecomputing.com`
+   * Example - us-east-2: `xy12345.us-east-2.aws.snowflakecomputing.com`
 * **[Role](https://docs.snowflake.com/en/user-guide/security-access-control-overview.html#roles)** : The role you created for Airbyte to access Snowflake. Example - `AIRBYTE_ROLE`
 * **[Warehouse](https://docs.snowflake.com/en/user-guide/warehouses-overview.html#overview-of-warehouses)** : The warehouse you created for Airbyte to sync data into. Example - `AIRBYTE_WAREHOUSE`
 * **[Database](https://docs.snowflake.com/en/sql-reference/ddl-database.html#database-schema-share-ddl)** : The database you created for Airbyte to sync data into. Example - `AIRBYTE_DATABASE`

docs/reference/api/generated-api-html/index.html

@@ -9154,7 +9154,7 @@ <h3><a name="OperationCreate"><code>OperationCreate</code> - </a> <a class="up"
     <h3><a name="OperationIdRequestBody"><code>OperationIdRequestBody</code> - </a> <a class="up" href="#__Models">Up</a></h3>
     <div class='model-description'></div>
     <div class="field-items">
-      <div class="param">OperationId </div><div class="param-desc"><span class="param-type"><a href="#UUID">UUID</a></span>  format: uuid</div>
+      <div class="param">operationId </div><div class="param-desc"><span class="param-type"><a href="#UUID">UUID</a></span>  format: uuid</div>
     </div>  <!-- field-items -->
   </div>
   <div class="model">