SignIn button - use correct url (#26239)

* SignIn button - use correct url

* Fix SignIn test (#26266)

* Don't use absolute URL

* post review

* Fix snap

Co-authored-by: Sofia Papagiannaki <papagian@users.noreply.github.com>

public/app/core/components/sidemenu/SignIn.test.tsx

@@ -2,13 +2,9 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { SignIn } from './SignIn';
 
-jest.mock('../../config', () => ({
-  appUrl: 'http://localhost:3000/',
-}));
-
 describe('Render', () => {
   it('should render component', () => {
-    const wrapper = shallow(<SignIn url="/" />);
+    const wrapper = shallow(<SignIn url="/whatever" />);
 
     expect(wrapper).toMatchSnapshot();
   });

public/app/core/components/sidemenu/SignIn.tsx

 import React, { FC } from 'react';
-import config from 'app/core/config';
+
 import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
 import { StoreState } from 'app/types';
 import { Icon } from '@grafana/ui';
-
-const getForcedLoginUrl = (url: string) => {
-  const urlObj = new URL(url, config.appUrl);
-  let params = urlObj.searchParams;
-  params.set('forceLogin', 'true');
-  return urlObj.toString();
-};
+import { getForcedLoginUrl } from './utils';
 
 export const SignIn: FC<any> = ({ url }) => {
   const forcedLoginUrl = getForcedLoginUrl(url);
+
   return (
     <div className="sidemenu-item">
       <a href={forcedLoginUrl} className="sidemenu-link" target="_self">

public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Render should render component 1`] = `
 >
   <a
     className="sidemenu-link"
-    href="http://localhost:3000/?forceLogin=true"
+    href="/whatever?forceLogin=true"
     target="_self"
   >
     <span
@@ -19,7 +19,7 @@ exports[`Render should render component 1`] = `
     </span>
   </a>
   <a
-    href="http://localhost:3000/?forceLogin=true"
+    href="/whatever?forceLogin=true"
     target="_self"
   >
     <ul

public/app/core/components/sidemenu/utils.test.ts

+import { updateConfig } from '../../config';
+import { getForcedLoginUrl } from './utils';
+
+describe('getForcedLoginUrl', () => {
+  it.each`
+    appSubUrl          | url                    | expected
+    ${''}              | ${'/whatever?a=1&b=2'} | ${'/whatever?a=1&b=2&forceLogin=true'}
+    ${'/grafana'}      | ${'/whatever?a=1&b=2'} | ${'/grafana/whatever?a=1&b=2&forceLogin=true'}
+    ${'/grafana/test'} | ${'/whatever?a=1&b=2'} | ${'/grafana/test/whatever?a=1&b=2&forceLogin=true'}
+    ${'/grafana'}      | ${''}                  | ${'/grafana?forceLogin=true'}
+    ${'/grafana'}      | ${'/whatever'}         | ${'/grafana/whatever?forceLogin=true'}
+    ${'/grafana'}      | ${'/whatever/'}        | ${'/grafana/whatever/?forceLogin=true'}
+  `(
+    "when appUrl set to '$appUrl' and appSubUrl set to '$appSubUrl' then result should be '$expected'",
+    ({ appSubUrl, url, expected }) => {
+      updateConfig({
+        appSubUrl,
+      });
+
+      const result = getForcedLoginUrl(url);
+
+      expect(result).toBe(expected);
+    }
+  );
+});

public/app/core/components/sidemenu/utils.ts

+import { getConfig } from 'app/core/config';
+
+export const getForcedLoginUrl = (url: string) => {
+  const queryParams = new URLSearchParams(url.split('?')[1]);
+  queryParams.append('forceLogin', 'true');
+
+  return `${getConfig().appSubUrl}${url.split('?')[0]}?${queryParams.toString()}`;
+};