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>) => {