Merge remote-tracking branch 'origin/main' into publish

open-metadata · Feb 28, 2024 · 0cf06b9 · 0cf06b9
2 parents 1890dde + a4604c1
commit 0cf06b9
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 76 deletions.
diff --git a/components/ConnectorDetailsHeader/ConnectorDetailsHeader.module.css b/components/ConnectorDetailsHeader/ConnectorDetailsHeader.module.css
@@ -2,7 +2,7 @@
     margin: 32px 0px;
     display:flex;
     flex-direction: column;
-    gap: 12px
+    gap: 6px
 }
 
 .Heading{
@@ -39,8 +39,24 @@
     border-radius: 28px;
 }
 
+<<<<<<< HEAD
 .SubHeading{
     display: flex;
+=======
+.FeaturesHeading{
+    font-size: 14px;
+    color: var(--gray-text-color);
+}
+
+.SubHeading{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.FeaturesList{
+    display: flex;
+>>>>>>> origin/main
     flex-wrap: wrap;
     gap: 12px;
 }
@@ -50,6 +66,12 @@
     font-size: 12px;
     border-radius: 14px;
     width: fit-content;
+<<<<<<< HEAD
+=======
+    display: flex;
+    align-items: center;
+    gap: 4px
+>>>>>>> origin/main
 }
 
 .AvailableFeature{

diff --git a/components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx b/components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx
@@ -1,4 +1,6 @@
 import classNames from "classnames";
+import { ReactComponent as CheckIcon } from "../../images/icons/check.svg";
+import { ReactComponent as CrossIcon } from "../../images/icons/cross.svg";
 import {
   getConnectorImage,
   getConnectorPlatformIcon,
@@ -30,22 +32,30 @@ function ConnectorDetailsHeader({
         </div>
       </div>
       <div className={styles.SubHeading}>
-        {availableFeatures.map((feature) => (
-          <div
-            className={classNames(styles.FeatureTag, styles.AvailableFeature)}
-            key={feature}
-          >
-            {feature}
-          </div>
-        ))}
-        {unavailableFeatures.map((feature) => (
-          <div
-            className={classNames(styles.FeatureTag, styles.UnavailableFeature)}
-            key={feature}
-          >
-            {feature}
-          </div>
-        ))}
+        <div className={styles.FeaturesHeading}>Feature List</div>
+        <div className={styles.FeaturesList}>
+          {availableFeatures.map((feature) => (
+            <div
+              className={classNames(styles.FeatureTag, styles.AvailableFeature)}
+              key={feature}
+            >
+              {feature}
+              <CheckIcon height={12} />
+            </div>
+          ))}
+          {unavailableFeatures.map((feature) => (
+            <div
+              className={classNames(
+                styles.FeatureTag,
+                styles.UnavailableFeature
+              )}
+              key={feature}
+            >
+              {feature}
+              <CrossIcon height={14} />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/components/ConnectorsInfo/ConnectorsInfo.constants.ts b/components/ConnectorsInfo/ConnectorsInfo.constants.ts
@@ -24,6 +24,12 @@ export const CONNECTORS: Array<ConnectorCategory> = [
         icon: "./images/connectors/bigquery.png",
         name: "BigQuery",
       },
+      {
+        url: "/connectors/database/bigtable",
+        icon: "./images/connectors/big-table.png",
+        name: "BigTable",
+        supportedVersion: "v1.3.x",
+      },
       {
         url: "/connectors/database/clickhouse",
         icon: "./images/connectors/clickhouse.png",

diff --git a/components/common/Icon/Icon.tsx b/components/common/Icon/Icon.tsx
@@ -1,22 +1,23 @@
-import React from "react";
 import { ReactComponent as CheckIcon } from "../../../images/icons/check.svg";
 import { ReactComponent as CrossIcon } from "../../../images/icons/cross.svg";
 
 function Icon({ iconName }: { iconName: string }) {
   let IconComponent: SvgComponent;
+  let iconColor = "currentColor";
 
   switch (iconName) {
     case "check":
       IconComponent = CheckIcon;
       break;
     case "cross":
       IconComponent = CrossIcon;
+      iconColor = "#CB2431";
       break;
     default:
       return <></>;
   }
 
-  return <IconComponent />;
+  return <IconComponent height={16} color={iconColor} />;
 }
 
 export default Icon;
diff --git a/components/common/Youtube/Youtube.interface.ts b/components/common/Youtube/Youtube.interface.ts
@@ -0,0 +1,8 @@
+export interface YouTubeProps {
+  className?: string;
+  videoId: string;
+  start?: string;
+  end?: string;
+  height?: string;
+  width?: string;
+}
diff --git a/components/common/Youtube/Youtube.module.css b/components/common/Youtube/Youtube.module.css
@@ -1,6 +1,7 @@
-.IframeContainer {
-  position: relative;
-  margin-top: 16px;
+.Container{
+  display: flex;
+  justify-content: center;
+  margin: 32px 0px;
 }
 
 .Iframe {

diff --git a/components/common/Youtube/Youtube.tsx b/components/common/Youtube/Youtube.tsx
@@ -1,59 +1,28 @@
+import classNames from "classnames";
+import { YouTubeProps } from "./Youtube.interface";
 import styles from "./Youtube.module.css";
 
-interface YouTubeProps {
-  videoId: string;
-  start?: string;
-  end?: string;
-  caption?: string;
-  height?: string;
-  width?: string;
-}
-
 const YouTube = ({
-  caption = "",
+  className = "",
   videoId,
   start = "",
   end = "",
   height,
   width,
 }: YouTubeProps) => {
-  let YouTubeBlock;
-
-  if (caption) {
-    YouTubeBlock = (
-      <section className={styles.Container}>
-        <section className={styles.IframeContainer}>
-          <iframe
-            allowFullScreen
-            src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&start=${start}&end=${end}&rel=0`}
-            className={styles.Iframe}
-            title="YouTube video player"
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            style={{ height, width }}
-          ></iframe>
-        </section>
-        <section className={styles.CaptionContainer}>
-          <p className={styles.Caption}>{caption}</p>
-        </section>
-      </section>
-    );
-  } else {
-    YouTubeBlock = (
-      <section className={styles.IframeContainer} style={{ height, width }}>
-        <iframe
-          allowFullScreen
-          src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&start=${start}&end=${end}&rel=0`}
-          className={styles.Iframe}
-          title="YouTube video player"
-          frameBorder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          style={{ height, width }}
-        ></iframe>
-      </section>
-    );
-  }
-  return YouTubeBlock;
+  return (
+    <div className={classNames(styles.Container, className)}>
+      <iframe
+        allowFullScreen
+        src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&start=${start}&end=${end}&rel=0`}
+        className={styles.Iframe}
+        title="YouTube video player"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        style={{ height, width }}
+      ></iframe>
+    </div>
+  );
 };
 
 export default YouTube;
diff --git a/images/icons/check.svg b/images/icons/check.svg
diff --git a/images/icons/cross.svg b/images/icons/cross.svg
diff --git a/markdoc/tags/youtube.markdoc.ts b/markdoc/tags/youtube.markdoc.ts
@@ -2,7 +2,7 @@ export const youtube = {
   render: "YouTube",
   description: "Display youtube videos",
   attributes: {
-    caption: {
+    className: {
       type: String,
     },
     videoId: {

diff --git a/utils/ConnectorsUtils.tsx b/utils/ConnectorsUtils.tsx
@@ -73,26 +73,31 @@ export const getConnectorImage = (connector: string) => {
       break;
 
     case "S3":
-    case "Data lake":
+    case "Datalake":
       iconSource = "amazon-s3";
       break;
 
-    case "Azure SQL":
+    case "AzureSQL":
       iconSource = "azuresql";
       break;
 
     case "BigQuery":
       iconSource = "bigquery";
       break;
 
-    case "ClickHouse":
+    case "BigTable":
+      iconSource = "big-table";
+      break;
+
+    case "Clickhouse":
       iconSource = "clickhouse";
       break;
 
     case "Couchbase":
       iconSource = "couchbase";
       break;
 
+    case "Databricks":
     case "Databricks SQL":
     case "Unity Catalog":
     case "Databricks Pipeline":
@@ -107,6 +112,7 @@ export const getConnectorImage = (connector: string) => {
       iconSource = "delta-lake";
       break;
 
+    case "Domo":
     case "Domo Database":
     case "Domo Dashboard":
     case "Domo Pipeline":