Merge branch 'master' into teal/redirect-to-login-for-401

airbytehq · Jan 10, 2023 · c49662d · c49662d
2 parents 8a709ea + 423cb8b
commit c49662d
Show file tree

Hide file tree

Showing 26 changed files with 262 additions and 153 deletions.
diff --git a/airbyte-cdk/python/airbyte_cdk/sources/declarative/stream_slicers/datetime_stream_slicer.py b/airbyte-cdk/python/airbyte_cdk/sources/declarative/stream_slicers/datetime_stream_slicer.py
@@ -123,7 +123,7 @@ def stream_slices(self, sync_mode: SyncMode, stream_state: Mapping[str, Any]) ->
         """
         Partition the daterange into slices of size = step.
 
-        The start of the window is the minimum datetime between start_datetime - looback_window and the stream_state's datetime
+        The start of the window is the minimum datetime between start_datetime - lookback_window and the stream_state's datetime
         The end of the window is the minimum datetime between the start of the window and end_datetime.
 
         :param sync_mode:

diff --git a/airbyte-cdk/python/unit_tests/sources/declarative/test_factory.py b/airbyte-cdk/python/unit_tests/sources/declarative/test_factory.py
@@ -792,7 +792,7 @@ def test_validation_type_missing_required_fields():
         min_datetime: "{{ config['start_time'] + day_delta(2) }}"
       end_datetime: "{{ config['end_time'] }}"
       cursor_field: "created"
-      lookback_window: "5d"
+      lookback_window: "P5D"
       start_time_option:
         inject_into: request_parameter
         field_name: created[gte]

diff --git a/airbyte-webapp/.stylelintrc b/airbyte-webapp/.stylelintrc
@@ -10,6 +10,7 @@
     "color-function-notation": null,
     "font-family-name-quotes": null,
     "no-unknown-animations": true,
+    "custom-property-empty-line-before": null,
     "scss/dollar-variable-empty-line-before": null,
     "scss/dollar-variable-pattern": null,
     "scss/percent-placeholder-pattern": null,

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
@@ -60,7 +60,7 @@ $icon-size: 20px;
 }
 
 .purpleBackground {
-  background-color: colors.$blue-transparent;
+  background-color: colors.$blue-40;
 }
 
 .noHeader {

diff --git a/.../components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss b/.../components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss
@@ -1,9 +1,9 @@
 @use "scss/colors";
-@use "scss/variables" as vars;
+@use "scss/variables";
 @use "scss/z-indices";
 
-$container-left-space: vars.$spacing-xl;
-$container-right-space: vars.$spacing-xl * 2;
+$container-left-space: variables.$spacing-xl;
+$container-right-space: variables.$spacing-xl * 2;
 
 .dialog {
   z-index: z-indices.$modal;
@@ -12,13 +12,13 @@ $container-right-space: vars.$spacing-xl * 2;
 .container {
   position: fixed;
   bottom: 0;
-  left: vars.$width-size-menu + $container-left-space;
-  width: calc(100% - (vars.$width-size-menu + $container-right-space));
+  left: variables.$width-size-menu + $container-left-space;
+  width: calc(100% - (variables.$width-size-menu + $container-right-space));
   z-index: 1000;
   height: calc(100vh - 100px);
   background: colors.$white;
-  border-radius: vars.$border-radius-2xl vars.$border-radius-2xl 0 0;
-  box-shadow: 0 0 22px rgba(colors.$dark-blue-900, 12%);
+  border-radius: variables.$border-radius-2xl variables.$border-radius-2xl 0 0;
+  box-shadow: variables.$box-shadow-popup;
 }
 
 .tableContainer {

diff --git a/...te-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss b/...te-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss
@@ -71,7 +71,7 @@
 
   &:hover,
   &:focus-visible {
-    box-shadow: 0 10px 19px rgba(colors.$dark-blue-900, 0.16);
+    box-shadow: variables.$box-shadow-raised;
   }
 }
 

diff --git a/airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx b/airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx
@@ -18,6 +18,7 @@ interface CodeEditorProps {
 
 // Converts 3-character hex values into 6-character ones.
 // Required for custom monaco theme, because it fails when receiving 3-character hex values.
+// Only needed for non-dev mode, as that is when hex values get minified to 3 characters.
 function expandHexValue(input: string) {
   const match = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/.exec(input);
   if (match) {
@@ -26,6 +27,12 @@ function expandHexValue(input: string) {
   return input;
 }
 
+function cssCustomPropToHex(cssCustomProperty: string) {
+  const varName = cssCustomProperty.replace(/var\(|\)/g, "");
+  const bodyStyles = window.getComputedStyle(document.body);
+  return expandHexValue(bodyStyles.getPropertyValue(varName).trim());
+}
+
 export const CodeEditor: React.FC<CodeEditorProps> = ({
   value,
   language,
@@ -41,14 +48,14 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       base: "vs-dark",
       inherit: true,
       rules: [
-        { token: "string", foreground: expandHexValue(styles.darkString) },
-        { token: "string.yaml", foreground: expandHexValue(styles.darkString) },
-        { token: "string.value.json", foreground: expandHexValue(styles.darkType) },
-        { token: "string.key.json", foreground: expandHexValue(styles.darkType) },
-        { token: "type", foreground: expandHexValue(styles.darkType) },
-        { token: "number", foreground: expandHexValue(styles.darkNumber) },
-        { token: "delimiter", foreground: expandHexValue(styles.darkDelimiter) },
-        { token: "keyword", foreground: expandHexValue(styles.darkKeyword) },
+        { token: "string", foreground: cssCustomPropToHex(styles.darkString) },
+        { token: "string.yaml", foreground: cssCustomPropToHex(styles.darkString) },
+        { token: "string.value.json", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "string.key.json", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "type", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "number", foreground: cssCustomPropToHex(styles.darkNumber) },
+        { token: "delimiter", foreground: cssCustomPropToHex(styles.darkDelimiter) },
+        { token: "keyword", foreground: cssCustomPropToHex(styles.darkKeyword) },
       ],
       colors: {
         "editor.background": "#00000000", // transparent, so that parent background is shown instead
@@ -59,19 +66,19 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       base: "vs",
       inherit: true,
       rules: [
-        { token: "string", foreground: expandHexValue(styles.lightString) },
-        { token: "string.yaml", foreground: expandHexValue(styles.lightString) },
-        { token: "string.value.json", foreground: expandHexValue(styles.lightString) },
-        { token: "string.key.json", foreground: expandHexValue(styles.lightType) },
-        { token: "type", foreground: expandHexValue(styles.lightType) },
-        { token: "number", foreground: expandHexValue(styles.lightNumber) },
-        { token: "delimiter", foreground: expandHexValue(styles.lightDelimiter) },
-        { token: "keyword", foreground: expandHexValue(styles.lightKeyword) },
+        { token: "string", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.yaml", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.value.json", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.key.json", foreground: cssCustomPropToHex(styles.lightType) },
+        { token: "type", foreground: cssCustomPropToHex(styles.lightType) },
+        { token: "number", foreground: cssCustomPropToHex(styles.lightNumber) },
+        { token: "delimiter", foreground: cssCustomPropToHex(styles.lightDelimiter) },
+        { token: "keyword", foreground: cssCustomPropToHex(styles.lightKeyword) },
       ],
       colors: {
         "editor.background": "#00000000", // transparent, so that parent background is shown instead
-        "editorLineNumber.foreground": expandHexValue(styles.lightLineNumber),
-        "editorLineNumber.activeForeground": expandHexValue(styles.lightLineNumberActive),
+        "editorLineNumber.foreground": cssCustomPropToHex(styles.lightLineNumber),
+        "editorLineNumber.activeForeground": cssCustomPropToHex(styles.lightLineNumberActive),
       },
     });
   };

diff --git a/airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss b/airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss
@@ -8,6 +8,6 @@
   bottom: 0;
 
   &.dark {
-    background: rgba(colors.$dark-blue, 0.5);
+    background: colors.$overlay-background;
   }
 }
diff --git a/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss b/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss
@@ -20,6 +20,5 @@
 
 :export {
   // Export colors to be used in SVG gradients
-  gradientStart: colors.$blue;
-  gradientStop: colors.$blue-transparent;
+  gradientColor: colors.$blue;
 }
diff --git a/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx b/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx
@@ -16,8 +16,8 @@ export const CircleLoader = ({ title }: CircleLoaderProps): JSX.Element => (
         spreadMethod="pad"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0%" stopColor={styles.gradientStart} />
-        <stop offset="100%" stopColor={styles.gradientStop} />
+        <stop offset="0%" stopColor={styles.gradientColor} />
+        <stop offset="100%" stopColor={styles.gradientColor} stopOpacity=".1" />
       </linearGradient>
     </defs>
     {title && <title>{title}</title>}

diff --git a/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
@@ -17,15 +17,15 @@
   border-radius: variables.$border-radius-sm;
   max-width: 300px;
   z-index: z-indices.$tooltip;
-  background: rgba(colors.$dark-blue, 0.9);
+  background: colors.$dark-blue-900;
   color: colors.$white;
 
   a {
-    color: rgba(colors.$white, 0.5);
+    color: colors.$dark-blue-200;
   }
 
   &.light {
-    background: rgba(colors.$white, 0.9);
+    background: colors.$white;
     color: colors.$dark-blue;
 
     a {

diff --git a/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss b/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss
@@ -2,12 +2,12 @@
 @use "../../../scss/variables";
 
 .label {
-  color: rgba(colors.$white, 0.7);
+  color: colors.$dark-blue-200;
   padding-right: variables.$spacing-sm;
 }
 
 .light {
   .label {
-    color: rgba(colors.$dark-blue, 0.7);
+    color: colors.$dark-blue-400;
   }
 }
diff --git a/...pp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss b/...pp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss
@@ -26,8 +26,8 @@
   background-image: linear-gradient(
     45deg,
     colors.$orange-400 10%,
-    rgba(colors.$orange-400, 0.8) 30%,
-    rgba(colors.$blue-400, 0.8) 80%,
+    rgba(255 106 77 / 80%) 30%,
+    rgba(97 94 255 / 80%) 80%,
     colors.$blue-400 100%
   );
   background-repeat: no-repeat;