From 4928bac1967aa4ae9cb31b6dad657639aa9fd60e Mon Sep 17 00:00:00 2001
From: Ayush Pahwa <ayush@appsmith.com>
Date: Wed, 8 Nov 2023 22:10:36 +0700
Subject: [PATCH] feat: walkthrough optional footer (#28702)

## Description
This PR allows to add a footer for any walkthrough.

#### PR fixes following issue(s)
Fixes #27335

#### Type of change

- New feature (non-breaking change which adds functionality)

## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---
 .../featureWalkthrough/walkthroughContext.tsx | 17 ++++++++++
 .../walkthroughRenderer.tsx                   | 31 +++++++++++++++++--
 .../src/constants/WalkthroughConstants.ts     |  1 +
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/app/client/src/components/featureWalkthrough/walkthroughContext.tsx b/app/client/src/components/featureWalkthrough/walkthroughContext.tsx
index 74978f9d2a..9b7048ce5b 100644
--- a/app/client/src/components/featureWalkthrough/walkthroughContext.tsx
+++ b/app/client/src/components/featureWalkthrough/walkthroughContext.tsx
@@ -27,8 +27,25 @@ export interface FeatureDetails {
   description: string;
   // Gif or Image to give a walkthrough
   imageURL?: string;
+  // footer details
+  footerDetails?: FeatureFooterDetails;
 }
 
+export interface FeatureFooterDetails {
+  // footer text
+  footerText: string;
+  // footer button text
+  footerButtonText: string;
+  // footer button onClick handler
+  onClickHandler: () => void;
+}
+
+export const isFeatureFooterDetails = (
+  obj: FeatureFooterDetails,
+): obj is FeatureFooterDetails => {
+  return !!obj;
+};
+
 export interface FeatureParams {
   // To execute a function on dismissing the tutorial walkthrough.
   onDismiss?: () => void;
diff --git a/app/client/src/components/featureWalkthrough/walkthroughRenderer.tsx b/app/client/src/components/featureWalkthrough/walkthroughRenderer.tsx
index 9948e1c06c..c03df294b6 100644
--- a/app/client/src/components/featureWalkthrough/walkthroughRenderer.tsx
+++ b/app/client/src/components/featureWalkthrough/walkthroughRenderer.tsx
@@ -1,4 +1,4 @@
-import { Icon, Text } from "design-system";
+import { Icon, Text, Button, Divider } from "design-system";
 import { showIndicator } from "pages/Editor/GuidedTour/utils";
 import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
@@ -8,7 +8,9 @@ import type {
   FeatureParams,
   OffsetType,
 } from "./walkthroughContext";
-import WalkthroughContext from "./walkthroughContext";
+import WalkthroughContext, {
+  isFeatureFooterDetails,
+} from "./walkthroughContext";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const CLIPID = "clip__feature";
@@ -70,6 +72,19 @@ const InstructionsHeaderWrapper = styled.div`
   }
 `;
 
+const FeatureFooterDivider = styled(Divider)`
+  margin-top: 8px;
+`;
+
+const FeatureFooterWrapper = styled.div`
+  height: 36px;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
 interface RefRectParams {
   // body params
   bh: number;
@@ -295,6 +310,18 @@ const InstructionsComponent = ({
           <img src={details.imageURL} />
         </ImageWrapper>
       )}
+      {!!details.footerDetails &&
+        isFeatureFooterDetails(details.footerDetails) && (
+          <>
+            <FeatureFooterDivider />
+            <FeatureFooterWrapper>
+              <Text kind="body-s">{details.footerDetails.footerText}</Text>
+              <Button onClick={details.footerDetails.onClickHandler} size="sm">
+                {details.footerDetails.footerButtonText}
+              </Button>
+            </FeatureFooterWrapper>
+          </>
+        )}
     </InstructionsWrapper>
   );
 };
diff --git a/app/client/src/constants/WalkthroughConstants.ts b/app/client/src/constants/WalkthroughConstants.ts
index ac8e447025..9c64603924 100644
--- a/app/client/src/constants/WalkthroughConstants.ts
+++ b/app/client/src/constants/WalkthroughConstants.ts
@@ -2,6 +2,7 @@ export const FEATURE_WALKTHROUGH_KEYS = {
   ds_binding: "ab_ds_binding_enabled",
   ds_schema: "ab_ds_schema_enabled",
   binding_widget: "binding_widget",
+  env_walkthrough: "ab_env_walkthrough_enabled",
   // Signposting keys
   back_to_canvas: "back_to_canvas",
   add_table_widget: "add_table_widget",