Bug 1844212 - Implement ability to hide steps indicator in about welc…

…ome r=aminomancer Differential Revision: https://phabricator.services.mozilla.com/D184346
dothq · Jul 24, 2023 · 3e46140 · 3e46140
1 parent 8a90767
commit 3e46140
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
@@ -399,7 +399,8 @@ const MultiStageAboutWelcome = props => {
       setActiveMultiSelect: setActiveMultiSelect,
       autoAdvance: screen.auto_advance,
       negotiatedLanguage: negotiatedLanguage,
-      langPackInstallPhase: langPackInstallPhase
+      langPackInstallPhase: langPackInstallPhase,
+      forceHideStepsIndicator: screen.force_hide_steps_indicator
     }) : null;
   })));
 };
@@ -628,7 +629,8 @@ class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       isLastScreen: this.props.isLastScreen,
       isSingleScreen: this.props.isSingleScreen,
       startsWithCorner: this.props.startsWithCorner,
-      autoAdvance: this.props.autoAdvance
+      autoAdvance: this.props.autoAdvance,
+      forceHideStepsIndicator: this.props.forceHideStepsIndicator
     });
   }
 
@@ -826,7 +828,8 @@ const MultiStageProtonScreen = props => {
     iconURL: props.iconURL,
     messageId: props.messageId,
     negotiatedLanguage: props.negotiatedLanguage,
-    langPackInstallPhase: props.langPackInstallPhase
+    langPackInstallPhase: props.langPackInstallPhase,
+    forceHideStepsIndicator: props.forceHideStepsIndicator
   });
 };
 const ProtonScreenActionButtons = props => {
@@ -1068,12 +1071,13 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       isTheme,
       isFirstScreen,
       isLastScreen,
-      isSingleScreen
+      isSingleScreen,
+      forceHideStepsIndicator
     } = this.props;
     const includeNoodles = content.has_noodles; // The default screen position is "center"
 
     const isCenterPosition = content.position === "center" || !content.position;
-    const hideStepsIndicator = autoAdvance || (content === null || content === void 0 ? void 0 : content.video_container) || isSingleScreen;
+    const hideStepsIndicator = autoAdvance || (content === null || content === void 0 ? void 0 : content.video_container) || isSingleScreen || forceHideStepsIndicator;
     const textColorClass = content.text_color ? `${content.text_color}-text` : ""; // Assign proton screen style 'screen-1' or 'screen-2' to centered screens
     // by checking if screen order is even or odd.
 

diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
@@ -244,6 +244,7 @@ export const MultiStageAboutWelcome = props => {
               autoAdvance={screen.auto_advance}
               negotiatedLanguage={negotiatedLanguage}
               langPackInstallPhase={langPackInstallPhase}
+              forceHideStepsIndicator={screen.force_hide_steps_indicator}
             />
           ) : null;
         })}
@@ -480,6 +481,7 @@ export class WelcomeScreen extends React.PureComponent {
         isSingleScreen={this.props.isSingleScreen}
         startsWithCorner={this.props.startsWithCorner}
         autoAdvance={this.props.autoAdvance}
+        forceHideStepsIndicator={this.props.forceHideStepsIndicator}
       />
     );
   }

diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx
@@ -60,6 +60,7 @@ export const MultiStageProtonScreen = props => {
       messageId={props.messageId}
       negotiatedLanguage={props.negotiatedLanguage}
       langPackInstallPhase={props.langPackInstallPhase}
+      forceHideStepsIndicator={props.forceHideStepsIndicator}
     />
   );
 };
@@ -371,12 +372,16 @@ export class ProtonScreen extends React.PureComponent {
       isFirstScreen,
       isLastScreen,
       isSingleScreen,
+      forceHideStepsIndicator,
     } = this.props;
     const includeNoodles = content.has_noodles;
     // The default screen position is "center"
     const isCenterPosition = content.position === "center" || !content.position;
     const hideStepsIndicator =
-      autoAdvance || content?.video_container || isSingleScreen;
+      autoAdvance ||
+      content?.video_container ||
+      isSingleScreen ||
+      forceHideStepsIndicator;
     const textColorClass = content.text_color
       ? `${content.text_color}-text`
       : "";

diff --git a/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx b/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx
@@ -227,6 +227,18 @@ describe("MultiStageAboutWelcomeProton module", () => {
       assert.equal(wrapper.find(".steps.progress-bar").exists(), false);
     });
 
+    it("should not render a steps indicator if steps indicator is force hidden", () => {
+      const SCREEN_PROPS = {
+        content: {
+          title: "test title",
+        },
+        forceHideStepsIndicator: true,
+      };
+      const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
+      assert.ok(wrapper.exists());
+      assert.equal(wrapper.find(".steps").exists(), false);
+    });
+
     it("should render a progress bar if there are 2 steps", () => {
       const SCREEN_PROPS = {
         content: {