change title and icon base on step

odigos-io · Jul 12, 2023 · d833ba1 · d833ba1
1 parent a828ab4
commit d833ba1
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git a/frontend/webapp/assets/icons/connect.svg b/frontend/webapp/assets/icons/connect.svg
diff --git a/frontend/webapp/containers/setup/setup.header/setup.header.tsx b/frontend/webapp/containers/setup/setup.header/setup.header.tsx
@@ -6,20 +6,41 @@ import {
 } from "./setup.header.styled";
 import { KeyvalButton, KeyvalText } from "@/design.system";
 import Charge from "assets/icons/charge-rect.svg";
+import Connect from "assets/icons/connect.svg";
 import RightArrow from "assets/icons/arrow-right.svg";
 import { SETUP } from "@/utils/constants";
 
-export function SetupHeader({ onNextClick, totalSelected }: any) {
+export function SetupHeader({ currentStep, onNextClick, totalSelected }: any) {
+  function renderCurrentIcon() {
+    switch (currentStep?.id) {
+      case "choose-source":
+        return (
+          <>
+            <Charge />
+            <KeyvalText>{SETUP.HEADER.CHOOSE_SOURCE_TITLE}</KeyvalText>
+          </>
+        );
+      case "choose-destination":
+        return (
+          <>
+            <Connect />
+            <KeyvalText>{SETUP.HEADER.CHOOSE_DESTINATION_TITLE}</KeyvalText>
+          </>
+        );
+      default:
+        return null;
+    }
+  }
+
   return (
     <SetupHeaderWrapper>
-      <HeaderTitleWrapper>
-        <Charge />
-        <KeyvalText>{SETUP.HEADER.CHOOSE_SOURCE_TITLE}</KeyvalText>
-      </HeaderTitleWrapper>
+      <HeaderTitleWrapper>{renderCurrentIcon()}</HeaderTitleWrapper>
       <HeaderButtonWrapper>
-        <KeyvalText
-          weight={400}
-        >{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
+        {currentStep?.id === "choose-source" && (
+          <KeyvalText
+            weight={400}
+          >{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
+        )}
         <KeyvalButton
           disabled={totalSelected === 0}
           onClick={onNextClick}

diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
@@ -5,7 +5,6 @@ import {
   StepListWrapper,
 } from "./setup.section.styled";
 import { SetupHeader } from "../setup.header/setup.header";
-import { setNamespaces } from "@/services/setup";
 import { SETUP } from "@/utils/constants";
 import Steps from "@/design.system/steps/steps";
 import { SourcesSection } from "../sources/sources.section";
@@ -66,6 +65,7 @@ export function SetupSection() {
   function handleNamespacesUpdate() {
     // setNamespaces(sectionData);
     setCurrentStep(STEPS[1]);
+    setSectionData({});
   }
 
   function onNextClick() {
@@ -83,7 +83,11 @@ export function SetupSection() {
         <Steps data={steps} />
       </StepListWrapper>
       <SetupSectionContainer>
-        <SetupHeader onNextClick={onNextClick} totalSelected={totalSelected} />
+        <SetupHeader
+          currentStep={currentStep}
+          onNextClick={onNextClick}
+          totalSelected={totalSelected}
+        />
         <SetupContentWrapper>{renderCurrentSection()}</SetupContentWrapper>
       </SetupSectionContainer>
     </>

diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
@@ -11,6 +11,7 @@ export const SETUP = {
   },
   HEADER: {
     CHOOSE_SOURCE_TITLE: "Select applications to connect",
+    CHOOSE_DESTINATION_TITLE: "Add new backend destination from the list",
   },
   MENU: {
     NAMESPACES: "Namespaces",