Minor: Connector details header fix (#246)

* add alation connector image

* add margin to connectorsListContainer

* fix feature list heading showing in case no feature is present

Author: aniketkatkar97

components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx

@@ -1,4 +1,6 @@
 import classNames from "classnames";
+import { isEmpty } from "lodash";
+import { useMemo } from "react";
 import { ReactComponent as CheckIcon } from "../../images/icons/check.svg";
 import { ReactComponent as CrossIcon } from "../../images/icons/cross.svg";
 import {
@@ -16,6 +18,11 @@ function ConnectorDetailsHeader({
   availableFeatures,
   unavailableFeatures,
 }: Readonly<ConnectorDetailsHeaderProps>) {
+  const showSubHeading = useMemo(
+    () => !isEmpty(availableFeatures) || !isEmpty(unavailableFeatures),
+    [availableFeatures, unavailableFeatures]
+  );
+
   return (
     <div className={styles.Container}>
       <div className={styles.Heading}>
@@ -31,32 +38,37 @@ function ConnectorDetailsHeader({
           </div>
         </div>
       </div>
-      <div className={styles.SubHeading}>
-        <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>
-          ))}
+      {showSubHeading && (
+        <div className={styles.SubHeading}>
+          <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>
+      )}
     </div>
   );
 }

components/ConnectorsListContainer/ConnectorsListContainer.module.css

@@ -1,5 +1,5 @@
 .Container{
-    margin-top: 24px;
+    margin: 24px 0px;
     display: grid;
     gap: 24px
 }

utils/ConnectorsUtils.tsx

@@ -72,6 +72,10 @@ export const getConnectorImage = (connector: string) => {
       iconSource = "athena";
       break;
 
+    case "Alation":
+      iconSource = "alation";
+      break;
+
     case "S3":
     case "Datalake":
       iconSource = "amazon-s3";