Update publish (open-metadata#197)

* updated the connectors list on the homepage * added padding to the tabs selection container * open-metadata#193: Refactored side nav bar for how to guides page (open-metadata#196) * refactored side nav bar to for how to guides page to show selected section items only * Icon name improvements --------- Co-authored-by: Sachin Chaurasiya <[email protected]>
Prajwal214 · Dec 1, 2023 · 17a9e1f · 17a9e1f
1 parent 398e441
commit 17a9e1f
Show file tree

Hide file tree

Showing 21 changed files with 475 additions and 376 deletions.
diff --git a/components/ConnectorsInfo/ConnectorsInfo.constants.ts b/components/ConnectorsInfo/ConnectorsInfo.constants.ts
diff --git a/components/ConnectorsInfo/ConnectorsInfo.module.css b/components/ConnectorsInfo/ConnectorsInfo.module.css
@@ -1,13 +1,54 @@
-.Container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-  gap: 30px;
+.Container{
+  display: flex;
+  gap: 8px;
+  height: 500px;
+  overflow-y: hidden;
+}
+
+.TabsContainer{
+  flex: 0 0 auto;
+  width: 200px;
+  padding-right: 16px;
+  border-right: 1px solid var(--default-border-color);
+}
+
+.TabItem{
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.TabItem:hover{
+  background-color: var(--primary-background-color);
+}
+
+.SelectedTab{
+  border: 0.5px solid var(--select-border-color);
+  background-color: var(--primary-background-color);
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.ConnectorsContainer{
+  max-height: 100%;
+  overflow-y: scroll;
+}
+
+.ConnectorsGridContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-items: flex-start;
+  justify-content: flex-start;
+  height: fit-content;
+  gap: 20px;
+  padding: 16px;
 }
 
 .ConnectorItem {
   color: var(--default-text-color);
   display: flex;
-  height: 100%;
+  height: 65px;
+  width: 200px;
   align-items: center;
   gap: 10px;
   transition: box-shadow 0.2s linear;
@@ -29,25 +70,25 @@
 }
 
 @media (max-width: 1200px) {
-  .Container {
+  .ConnectorsGridContainer {
     grid-template-columns: 1fr 1fr 1fr 1fr;
   }
 }
 
 @media (max-width: 900px) {
-  .Container {
+  .ConnectorsGridContainer {
     grid-template-columns: 1fr 1fr 1fr;
   }
 }
 
 @media (max-width: 600px) {
-  .Container {
+  .ConnectorsGridContainer {
     grid-template-columns: 1fr 1fr;
   }
 }
 
 @media (max-width: 600px) {
-  .Container {
+  .ConnectorsGridContainer {
     gap: 16px;
   }
   .ConnectorImg {

diff --git a/components/ConnectorsInfo/ConnectorsInfo.tsx b/components/ConnectorsInfo/ConnectorsInfo.tsx
@@ -1,23 +1,70 @@
-import React from "react";
-import { connectorsArr } from "./ConnectorsInfo.constants";
-import styles from "./ConnectorsInfo.module.css";
+import classNames from "classnames";
+import { sortBy } from "lodash";
 import Link from "next/link";
+import { useState } from "react";
+import { CONNECTORS } from "./ConnectorsInfo.constants";
+import styles from "./ConnectorsInfo.module.css";
+
+interface ConnectorCategory {
+  connector: string;
+  services: {
+    url: string;
+    icon: string;
+    name: string;
+  }[];
+}
+
+CONNECTORS.unshift({
+  connector: "All connectors",
+  services: CONNECTORS.reduce((prev, curr) => {
+    return sortBy(
+      [...prev, ...curr.services],
+      [(connector) => connector.name.toLowerCase()]
+    );
+  }, [] as ConnectorCategory["services"]),
+});
 
 export default function ConnectorsInfo() {
+  const [selectedTab, setSelectedTab] = useState<ConnectorCategory>(
+    CONNECTORS[0]
+  );
+
   return (
     <div className={styles.Container}>
-      {connectorsArr.map((connector) => (
-        <Link href={connector.url} key={connector.name}>
-          <div className={styles.ConnectorItem} key={connector.name}>
-            <img
-              className={styles.ConnectorImg}
-              src={connector.icon}
-              alt={connector.name}
-            />
-            <p>{connector.name}</p>
+      <div className={styles.TabsContainer}>
+        {CONNECTORS.map((connectorCategory) => (
+          <div
+            className={classNames(
+              styles.TabItem,
+              connectorCategory.connector === selectedTab.connector
+                ? styles.SelectedTab
+                : ""
+            )}
+            key={connectorCategory.connector}
+            onClick={() => setSelectedTab(connectorCategory)}
+          >
+            {connectorCategory.connector}
           </div>
-        </Link>
-      ))}
+        ))}
+      </div>
+      <div className={styles.ConnectorsContainer}>
+        <div className={styles.ConnectorsGridContainer}>
+          {selectedTab.services.map((connector) => (
+            <Link
+              className={styles.ConnectorItem}
+              href={connector.url}
+              key={connector.name}
+            >
+              <img
+                className={styles.ConnectorImg}
+                src={connector.icon}
+                alt={connector.name}
+              />
+              <p>{connector.name}</p>
+            </Link>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/components/HowToGuidesHeader/HowToGuidesHeader.tsx b/components/HowToGuidesHeader/HowToGuidesHeader.tsx
@@ -32,7 +32,7 @@ function HowToGuidesHeader() {
               padding: "8px 12px",
             }}
             type="link"
-            href="/how-to-guides/openmetadata/data-discovery"
+            href="/how-to-guides/data-discovery"
           >
             <span>Get Started</span>
             <MdOutlineArrowForwardIos size={10} />

diff --git a/components/SideNav/ListItem.interface.ts b/components/SideNav/ListItem.interface.ts
@@ -0,0 +1,6 @@
+import { MenuItem } from "../../interface/common.interface";
+
+export interface ListItemProps {
+  item: MenuItem;
+  fontWeight?: number;
+}
diff --git a/components/SideNav/ListItem.tsx b/components/SideNav/ListItem.tsx
@@ -1,22 +1,17 @@
 import classNames from "classnames";
+import { isNil } from "lodash";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useDocVersionContext } from "../../context/DocVersionContext";
 import { ReactComponent as ArrowDown } from "../../images/icons/drop-arrow-down.svg";
 import { ReactComponent as ArrowRight } from "../../images/icons/drop-arrow-right.svg";
 import { ReactComponent as CollateIcon } from "../../images/icons/ic-collate.svg";
-import { MenuItem } from "../../interface/common.interface";
 import { getUrlWithVersion } from "../../utils/CommonUtils";
+import { ListItemProps } from "./ListItem.interface";
 import styles from "./SideNav.module.css";
 
-export default function ListItem({
-  item,
-  fontWeight,
-}: {
-  item: MenuItem;
-  fontWeight?: number;
-}) {
+export default function ListItem({ item, fontWeight }: Readonly<ListItemProps>) {
   const router = useRouter();
   const { docVersion } = useDocVersionContext();
   const linkRef = useRef<HTMLAnchorElement>();
@@ -65,7 +60,10 @@ export default function ListItem({
 
   useEffect(() => {
     // Logic to get the selected side nav item into view after page load
-    if (linkRef.current && linkRef.current.className.includes("ActiveLink")) {
+    if (
+      !isNil(linkRef.current) &&
+      linkRef.current.className.includes("ActiveLink")
+    ) {
       linkRef.current.scrollIntoView({ block: "center", inline: "center" });
     }
   }, [isActive, linkRef]);

diff --git a/components/SideNav/SideNav.tsx b/components/SideNav/SideNav.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as CollapseLeftIcon } from "../../images/icons/collapse-
 import { ReactComponent as CollapseRightIcon } from "../../images/icons/collapse-right.svg";
 import { ReactComponent as OverviewIcon } from "../../images/icons/overview-icon.svg";
 import { getCategoryByIndex } from "../../lib/utils";
+import { getSideNavItems } from "../../utils/SideNavUtils";
 import SkeletonLoader from "../common/SkeletonLoader/SkeletonLoader";
 import ListItem from "./ListItem";
 import styles from "./SideNav.module.css";
@@ -42,7 +43,10 @@ export default forwardRef(function SideNav(
     [menuItems, category]
   );
 
-  const childItems = useMemo(() => item?.children ?? [], [item]);
+  const childItems = useMemo(
+    () => getSideNavItems(item, router.asPath),
+    [item, router.asPath]
+  );
 
   useEffect(() => {
     const scrollEventListener = () => {

diff --git a/components/TopNav/TopNav.tsx b/components/TopNav/TopNav.tsx
@@ -14,11 +14,11 @@ import {
 import { useDocVersionContext } from "../../context/DocVersionContext";
 import { useNavBarCollapsedContext } from "../../context/NavBarCollapseContext";
 import { SearchContextProvider } from "../../context/SearchContext";
-import { ReactComponent as API } from "../../images/icons/api.svg";
-import { ReactComponent as Cloud } from "../../images/icons/cloud.svg";
-import { ReactComponent as Github } from "../../images/icons/github.svg";
-import { ReactComponent as SvgLogo } from "../../images/icons/omd.svg";
-import { ReactComponent as Slack } from "../../images/icons/slack.svg";
+import { ReactComponent as ApiIcon } from "../../images/icons/api.svg";
+import { ReactComponent as CloudIcon } from "../../images/icons/cloud.svg";
+import { ReactComponent as GithubIcon } from "../../images/icons/github.svg";
+import { ReactComponent as OMDIcon } from "../../images/icons/omd.svg";
+import { ReactComponent as SlackIcon } from "../../images/icons/slack.svg";
 import { getUrlWithVersion } from "../../utils/CommonUtils";
 import Search from "../Search/Search";
 import SelectDropdown, { SelectOption } from "../SelectDropdown/SelectDropdown";
@@ -33,7 +33,7 @@ interface TopNavProps {
   versionsList: Array<SelectOption<string>>;
 }
 
-export default function TopNav({ versionsList }: TopNavProps) {
+export default function TopNav({ versionsList }: Readonly<TopNavProps>) {
   const router = useRouter();
   const [displayNavBarCollapseButton, setDisplayNavBarCollapseButton] =
     useState(false);
@@ -88,7 +88,7 @@ export default function TopNav({ versionsList }: TopNavProps) {
       <div className={styles.CollapsedDivContainer}>
         <div className={styles.LogoContainer}>
           <Link href={docVersion ? getUrlWithVersion("/", docVersion) : "/"}>
-            <SvgLogo />
+            <OMDIcon />
           </Link>
           {!isEmpty(versionsList) && (
             <SelectDropdown
@@ -111,31 +111,34 @@ export default function TopNav({ versionsList }: TopNavProps) {
         <InstantSearch
           indexName={`openmetadata-v1-${docVersion}`}
           searchClient={searchClient}
+          future={{
+            preserveSharedStateOnUnmount: false,
+          }}
         >
           <Search />
         </InstantSearch>
       </SearchContextProvider>
       <div className={styles.IconContainer}>
         <a href="https://slack.open-metadata.org" target="_blank" title="Slack">
-          <Slack />
+          <SlackIcon />
         </a>
         <a
           href="https://github.com/open-metadata/OpenMetadata"
           target="_blank"
           title="Github"
         >
-          <Github />
+          <GithubIcon />
         </a>
         <a href="/swagger.html" target="_blank" title="Swagger">
-          <API />
+          <ApiIcon />
         </a>
         <a
           className="btn fw-500 btn-primary rounded-pill"
           href="https://cloud.getcollate.io"
           target="_blank"
         >
           <button className={styles.CloudBtn}>
-            <Cloud />
+            <CloudIcon />
           </button>
         </a>
       </div>

diff --git a/components/common/SkeletonLoader/SkeletonLoader.tsx b/components/common/SkeletonLoader/SkeletonLoader.tsx
@@ -16,7 +16,7 @@ function SkeletonLoader({
   showBreadcrumb = false,
   title = DEFAULT_TITLE,
   paragraph = DEFAULT_PARAGRAPH,
-}: SkeletonLoaderProps) {
+}: Readonly<SkeletonLoaderProps>) {
   return (
     <div className={classNames(styles.Container, className)}>
       {showBreadcrumb && getSkeletonBreadcrumbs()}

diff --git a/components/modals/APISearchModal/APISearchModal.tsx b/components/modals/APISearchModal/APISearchModal.tsx
@@ -1,4 +1,5 @@
 import algoliasearch from "algoliasearch/lite";
+import { isNil } from "lodash";
 import { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { InstantSearch } from "react-instantsearch";
@@ -23,7 +24,7 @@ function APISearchModal({ handleMaskClick }: APISearchModalProps) {
     setTimeout(() => {
       const inputElement = document.getElementById("search-input");
 
-      inputElement && inputElement.focus();
+      !isNil(inputElement) && inputElement.focus();
     }, 50);
   }, []);
 
@@ -38,6 +39,9 @@ function APISearchModal({ handleMaskClick }: APISearchModalProps) {
           <InstantSearch
             indexName={`openmetadata-v1-${docVersion}`}
             searchClient={searchClient}
+            future={{
+              preserveSharedStateOnUnmount: false, // Library recommendation to keep the old behavior
+            }}
           >
             <Search
               className={styles.SearchContainer}

diff --git a/constants/SideNav.constants.ts b/constants/SideNav.constants.ts
@@ -0,0 +1 @@
+export const HOW_TO_GUIDES_MENU_ITEM_KEY = "how-to-guides";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const HOW_TO_GUIDES_MENU_ITEM_KEY = "how-to-guides";