MM-52175 - fix button formatting and add anchor to the end (#23048)

* MM-52175 - fix button formatting and add anchor to the end

* make anchor optional

* use built in URL function to extract the anchor

* add anchor to tasklitst download apps

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/external_link/external_link.test.tsx

@@ -161,4 +161,33 @@ describe('components/external_link', () => {
             expect.stringMatching('test'),
         );
     });
+
+    it('renders href correctly when url contains anchor by setting anchor at the end', () => {
+        const state = {
+            ...initialState,
+            entities: {
+                ...initialState.entities,
+                general: {
+                    ...initialState?.entities?.general,
+                    config: {
+                        DiagnosticsEnabled: 'true',
+                    },
+                },
+            },
+        };
+        const store: GlobalState = JSON.parse(JSON.stringify(state));
+        renderWithIntlAndStore(
+            <ExternalLink
+                href='https://mattermost.com#desktop'
+            >
+                {'Click Me'}
+            </ExternalLink>,
+            store,
+        );
+
+        expect(screen.queryByText('Click Me')).toHaveAttribute(
+            'href',
+            'https://mattermost.com?utm_source=mattermost&utm_medium=in-product-cloud&utm_content=&uid=currentUserId&sid=#desktop',
+        );
+    });
 });

webapp/channels/src/components/external_link/index.tsx

@@ -52,7 +52,11 @@ export default function ExternalLink(props: Props) {
             // If the href already has query params, remove them before adding them back with the addition of the new ones
             href = href?.split('?')[0];
         }
-        href = `${href}?${queryString}`;
+        const anchor = new URL(href).hash;
+        if (anchor) {
+            href = href.replace(anchor, '');
+        }
+        href = `${href}?${queryString}${anchor ?? ''}`;
     }
 
     const handleClick = (e: React.MouseEvent<HTMLElement>) => {

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 {
+    .start-trial-btn, .got-it-button {
         padding: 13px 20px;
         background: var(--button-bg);
         border-radius: 4px;
@@ -223,7 +223,10 @@ const Completed = (props: Props): JSX.Element => {
                         </>
 
                     ) : (
-                        <button onClick={dismissAction}>
+                        <button
+                            onClick={dismissAction}
+                            className='got-it-button'
+                        >
                             <FormattedMessage
                                 id={'collapsed_reply_threads_modal.confirm'}
                                 defaultMessage='Got it'
@@ -239,7 +242,7 @@ const Completed = (props: Props): JSX.Element => {
                                     link: (msg: React.ReactNode) => (
                                         <ExternalLink
                                             location='onboarding_tasklist_completed'
-                                            href='https://mattermost.com/download/#desktop'
+                                            href='https://mattermost.com/download#desktop'
                                         >
                                             {msg}
                                         </ExternalLink>

webapp/channels/src/components/onboarding_tasks/onboarding_tasks_manager.tsx

@@ -388,7 +388,7 @@ export const useHandleOnBoardingTaskTrigger = () => {
                 value: 'true',
             }];
             dispatch(savePreferences(currentUserId, preferences));
-            window.open('https://mattermost.com/download/', '_blank', 'noopener,noreferrer');
+            window.open('https://mattermost.com/download#desktop', '_blank', 'noopener,noreferrer');
             break;
         }
         case OnboardingTasksName.START_TRIAL: {