MM-49786 - add no thanks button to onboarding completed screen (#22717)

* MM-49786 - add nothanks btn

* fix css styles

webapp/channels/src/components/onboarding_tasklist/__snapshots__/onboarding_tasklist_completed.test.tsx.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/onboarding_tasklist/onboarding_tasklist_completed.tsx should match snapshot 1`] = `
+<Fragment>
+  <CSSTransition
+    classNames="fade"
+    in={true}
+    timeout={150}
+  >
+    <CompletedWrapper>
+      <img
+        alt="completed tasks image"
+        src={null}
+      />
+      <h2>
+        <MemoizedFormattedMessage
+          defaultMessage="Well done. You’ve completed all of the tasks!"
+          id="onboardingTask.checklist.completed_title"
+        />
+      </h2>
+      <span
+        className="completed-subtitle"
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="We hope Mattermost is more familiar now."
+          id="onboardingTask.checklist.completed_subtitle"
+        />
+      </span>
+      <span
+        className="start-trial-text"
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="Interested in our higher-security features?"
+          id="onboardingTask.checklist.higher_security_features"
+        />
+         
+        <br />
+        <MemoizedFormattedMessage
+          defaultMessage="Start your free Enterprise trial now!"
+          id="onboardingTask.checklist.start_enterprise_now"
+        />
+      </span>
+      <StartTrialBtn
+        message="Start free 30-day trial"
+        onClick={[MockFunction]}
+        telemetryId="start_trial_from_onboarding_completed_task"
+      />
+      <button
+        className="no-thanks-link style-link"
+        onClick={[MockFunction]}
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="No, thanks"
+          id="onboardingTask.checklist.no_tanks"
+        />
+      </button>
+      <div
+        className="download-apps"
+      >
+        <span>
+          <MemoizedFormattedMessage
+            defaultMessage="Now that you’re all set up, <link>download our apps.</link>!"
+            id="onboardingTask.checklist.downloads"
+            values={
+              Object {
+                "link": [Function],
+              }
+            }
+          />
+        </span>
+      </div>
+      <div
+        className="disclaimer"
+      >
+        <span>
+          <MemoizedFormattedMessage
+            defaultMessage="By clicking “Start trial”, I agree to the <linkEvaluation>Mattermost Software and Services License Agreement</linkEvaluation>, <linkPrivacy>privacy policy</linkPrivacy> and receiving product emails."
+            id="onboardingTask.checklist.disclaimer"
+            values={
+              Object {
+                "linkEvaluation": [Function],
+                "linkPrivacy": [Function],
+              }
+            }
+          />
+        </span>
+      </div>
+    </CompletedWrapper>
+  </CSSTransition>
+</Fragment>
+`;

webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_completed.test.tsx

@@ -0,0 +1,73 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import Completed from './onboarding_tasklist_completed';
+import {shallow} from 'enzyme';
+
+let mockState: any;
+const mockDispatch = jest.fn();
+const dismissMockFn = jest.fn();
+
+jest.mock('react-redux', () => ({
+    ...jest.requireActual('react-redux') as typeof import('react-redux'),
+    useSelector: (selector: (state: typeof mockState) => unknown) => selector(mockState),
+    useDispatch: () => mockDispatch,
+}));
+
+describe('components/onboarding_tasklist/onboarding_tasklist_completed.tsx', () => {
+    const props = {
+        dismissAction: dismissMockFn,
+        isCurrentUserSystemAdmin: true,
+        isFirstAdmin: true,
+    };
+
+    beforeEach(() => {
+        mockState = {
+            entities: {
+                admin: {
+                    prevTrialLicense: {
+                        IsLicensed: 'false',
+                    },
+                },
+                general: {
+                    license: {
+                        IsLicensed: 'false',
+                    },
+                },
+                cloud: {
+                    subscription: {
+                        product_id: 'prod_professional',
+                        is_free_trial: 'false',
+                        trial_end_at: 1,
+                    },
+                },
+            },
+        };
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(<Completed {...props}/>);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('finds the completed subtitle', () => {
+        const wrapper = shallow(<Completed {...props}/>);
+        expect(wrapper.find('.completed-subtitle')).toHaveLength(1);
+    });
+
+    test('displays the no thanks option to close the onboarding list', () => {
+        const wrapper = shallow(<Completed {...props}/>);
+        const noThanksLink = wrapper.find('.no-thanks-link');
+        expect(noThanksLink).toHaveLength(1);
+
+        // calls the dissmiss function on click
+        noThanksLink.simulate('click');
+        expect(dismissMockFn).toHaveBeenCalledTimes(1);
+    });
+});

webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_completed.tsx

@@ -49,7 +49,7 @@ const CompletedWrapper = styled.div`
     &.fade-exit-done {
         transform: scale(1);
     }
-    .start-trial-btn, button {
+    .start-trial-btn {
         padding: 13px 20px;
         background: var(--button-bg);
         border-radius: 4px;
@@ -101,6 +101,24 @@ const CompletedWrapper = styled.div`
         width: 200px;
         font-size: 12px;
     }
+
+    .style-link {
+        border: none;
+        background: none !important;
+        color: var(--button-bg) !important;
+    }
+
+    .no-thanks-link {
+        display: inline-block;
+        min-width: fit-content;
+        margin-top: 18px;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 20px;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 `;
 
 interface Props {
@@ -193,6 +211,15 @@ const Completed = (props: Props): JSX.Element => {
                                     onClick={dismissAction}
                                 />
                             )}
+                            <button
+                                onClick={dismissAction}
+                                className={'no-thanks-link style-link'}
+                            >
+                                <FormattedMessage
+                                    id={'onboardingTask.checklist.no_tanks'}
+                                    defaultMessage='No, thanks'
+                                />
+                            </button>
                         </>
 
                     ) : (

webapp/channels/src/i18n/en.json

@@ -4304,6 +4304,7 @@
   "onboardingTask.checklist.downloads": "Now that you’re all set up, <link>download our apps.</link>",
   "onboardingTask.checklist.higher_security_features": "Interested in our higher-security features?",
   "onboardingTask.checklist.main_subtitle": "Let's get up and running.",
+  "onboardingTask.checklist.no_tanks": "No, thanks",
   "onboardingTask.checklist.start_enterprise_now": "Start your free Enterprise trial now!",
   "onboardingTask.checklist.task_complete_your_profile": "Complete your profile.",
   "onboardingTask.checklist.task_create_from_work_template": "Create from a template - set up a channel with linked boards and playbooks.",