Make step headers clickable to make it possible to go back in Wizard

src/components/InstallationWizard/Step/index.tsx

@@ -29,6 +29,12 @@ export const Step = (props: StepProps) => {
     props.onSkip();
   };
 
+  const handleHeaderClick = () => {
+    if (props.status === "completed") {
+      props.onGoToStep(props.stepIndex);
+    }
+  };
+
   const isActive = props.status === "active";
 
   return (
@@ -49,6 +55,7 @@ export const Step = (props: StepProps) => {
           <s.Header
             status={props.status}
             transitionDuration={transitionDuration}
+            onClick={handleHeaderClick}
           >
             <s.NumberContainer
               isActive={isActive}
@@ -72,7 +79,7 @@ export const Step = (props: StepProps) => {
                   transitionClassName={NUMBER_TRANSITION_CLASS_NAME}
                   transitionDuration={transitionDuration}
                 >
-                  {props.number}
+                  {props.stepIndex + 1}
                 </s.Number>
               </CSSTransition>
             </s.NumberContainer>

src/components/InstallationWizard/Step/styles.ts

@@ -33,7 +33,7 @@ export const Container = styled.div<ContainerProps>`
         transition: height ${transitionDuration}ms ease-out;
       }
       `;
-  }};
+  }}
 
   height: ${({ status, contentHeight }) =>
     status === "active"
@@ -102,6 +102,10 @@ export const Header = styled.div<HeaderProps>`
   }};
 
   transition: color ${({ transitionDuration }) => transitionDuration}ms ease-out;
+
+  cursor: ${({ status }) => {
+    return status === "completed" ? "pointer" : "initial";
+  }};
 `;
 
 export const NumberContainer = styled.div<NumberContainerProps>`

src/components/InstallationWizard/Step/types.ts

@@ -14,10 +14,11 @@ export interface StepData {
 
 export interface StepProps {
   data: StepData;
-  number: number;
+  stepIndex: number;
   status: StepStatus;
   transitionDuration?: number;
   onSkip: () => void;
+  onGoToStep: (stepIndex: number) => void;
 }
 
 export interface ContainerProps {

src/components/InstallationWizard/index.tsx

@@ -151,9 +151,7 @@ export const InstallationWizard = () => {
   };
 
   const goToNextStep = () => {
-    if (currentStep < steps.length - 1) {
-      setCurrentStep(currentStep + 1);
-    }
+    setCurrentStep(currentStep + 1);
   };
 
   const handleSkipStep = () => {
@@ -166,6 +164,12 @@ export const InstallationWizard = () => {
     }
   };
 
+  const handleGoToStep = (stepIndex: number) => {
+    if (stepIndex < currentStep) {
+      setCurrentStep(stepIndex);
+    }
+  };
+
   const handleFinishButtonClick = () => {
     window.sendMessageToDigma({
       action: actions.FINISH
@@ -219,8 +223,9 @@ export const InstallationWizard = () => {
         <Step
           key={step.title}
           onSkip={handleSkipStep}
+          onGoToStep={handleGoToStep}
           data={step}
-          number={i + 1}
+          stepIndex={i}
           status={getStepStatus(i, currentStep)}
           transitionDuration={TRANSITION_DURATION}
         />

src/components/InstallationWizard/styles.ts

@@ -95,7 +95,6 @@ export const Footer = styled.div`
   }};
 `;
 
-// postcss-styled-components-disable-next-line
 export const FooterContent = styled.div<{
   transitionClassName: string;
   transitionDuration: number;
@@ -117,7 +116,7 @@ export const FooterContent = styled.div<{
         transition: opacity ${transitionDuration}ms ease-out;
       }
       `;
-  }};
+  }}
 `;
 
 export const SectionDescription = styled.span`

src/components/RecentActivity/RecentActivityTable/styles.ts

@@ -207,8 +207,10 @@ export const ListSuffix = styled(Suffix)`
   font-size: 12px;
 `;
 
+// postcss-styled-components-disable-next-line
 export const SpanLink = styled(Link)`
   ${({ theme }) => getCodeFont(theme.codeFont)}
+
   font-size: 12px;
   line-height: 14px;
 

src/components/common/FloatingIconButton/index.tsx

@@ -24,7 +24,7 @@ const getIconColor = (
 
   switch (theme.mode) {
     case "light":
-      return "#7891D0";
+      return "#7891d0";
     case "dark":
     case "dark-jetbrains":
       return "#b9c2eb";