remove header on docs panel

airbytehq · Jan 31, 2023 · 5d8df89 · 5d8df89
1 parent f98137a
commit 5d8df89
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 43 deletions.
diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json
diff --git a/airbyte-webapp/src/components/ui/StepsMenu/StepsMenu.tsx b/airbyte-webapp/src/components/ui/StepsMenu/StepsMenu.tsx
@@ -15,7 +15,6 @@ interface StepMenuProps {
   data: StepMenuItem[];
   activeStep?: string;
   onSelect?: (id: string) => void;
-  className?: string;
 }
 
 const Content = styled.div`
@@ -25,9 +24,9 @@ const Content = styled.div`
   font-family: ${({ theme }) => theme.regularFont};
 `;
 
-export const StepsMenu: React.FC<StepMenuProps> = ({ data, onSelect, activeStep, lightMode, className }) => {
+export const StepsMenu: React.FC<StepMenuProps> = ({ data, onSelect, activeStep, lightMode }) => {
   return (
-    <Content className={className}>
+    <Content>
       {data.map((item, key) => (
         <Step
           icon={item.icon}

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -280,7 +280,7 @@
   "sources.emptySchema": "Schema is empty",
   "sources.noSources": "Source list is empty",
   "sources.sourceSettings": "Source Settings",
-  "sources.documentationPanel.tabs.docs": "Docs",
+  "sources.documentationPanel.tabs.setupGuide": "Setup Guide",
   "sources.documentationPanel.tabs.schema": "Schema",
   "sources.documentationPanel.tabs.erd": "ERD (Entities Relationship Diagram)",
   "sources.request.button.schema": "Request schema for this source",

diff --git a/...te-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanel.module.scss b/...te-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanel.module.scss
@@ -1,5 +1,5 @@
 @use "scss/colors";
-@use "scss/variables" as vars;
+@use "scss/variables";
 
 .container {
   min-height: 100vh;
@@ -12,7 +12,6 @@
 }
 
 .stepsContainer {
-  justify-content: flex-start;
-  margin-top: vars.$spacing-lg;
-  padding-left: vars.$spacing-lg;
+  padding-top: variables.$spacing-lg;
+  padding-left: variables.$spacing-lg;
 }
diff --git a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanel.tsx b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanel.tsx
@@ -11,7 +11,6 @@ import { match } from "ts-pattern";
 
 import { LoadingPage } from "components";
 import { Markdown } from "components/ui/Markdown";
-import { PageHeader } from "components/ui/PageHeader";
 import { StepsMenu } from "components/ui/StepsMenu";
 
 import { useConfig } from "config";
@@ -65,11 +64,11 @@ export const DocumentationPanel: React.FC = () => {
     setDocumentationPanelOpen(false);
   }, [setDocumentationPanelOpen, location.pathname]);
 
-  const [activeTab, setActiveTab] = useState("docs");
+  const [activeTab, setActiveTab] = useState("setupGuide");
   const tabs = [
     {
-      id: "docs",
-      name: <FormattedMessage id="sources.documentationPanel.tabs.docs" />,
+      id: "setupGuide",
+      name: <FormattedMessage id="sources.documentationPanel.tabs.setupGuide" />,
     },
     {
       id: "schema",
@@ -85,19 +84,14 @@ export const DocumentationPanel: React.FC = () => {
     <LoadingPage />
   ) : (
     <div className={styles.container}>
-      <PageHeader withLine title={<FormattedMessage id="connector.setupGuide" />} />
       {isSource && (
-        <StepsMenu
-          className={styles.stepsContainer}
-          lightMode
-          data={tabs}
-          onSelect={setActiveTab}
-          activeStep={activeTab}
-        />
+        <div className={styles.stepsContainer}>
+          <StepsMenu lightMode data={tabs} onSelect={setActiveTab} activeStep={activeTab} />
+        </div>
       )}
 
       {match(activeTab)
-        .with("docs", () => (
+        .with("setupGuide", () => (
           <Markdown
             className={styles.content}
             content={

diff --git a/...nector/ConnectorDocumentationLayout/ResourceNotAvailable/ResourceNotAvailable.module.scss b/...nector/ConnectorDocumentationLayout/ResourceNotAvailable/ResourceNotAvailable.module.scss
@@ -1,10 +1,10 @@
-@use "scss/variables" as vars;
+@use "scss/variables";
 
 .requestContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: vars.$spacing-lg;
+  gap: variables.$spacing-lg;
   justify-content: center;
   height: 80vh;
 }