Navigation: Redirect to root page when switching organization (#66655)

* just redirect to root when switching org

* remove old orgswitcher modal

public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.tsx

@@ -18,7 +18,7 @@ export function OrganizationSwitcher() {
   const onSelectChange = (option: SelectableValue<UserOrg>) => {
     if (option.value) {
       setUserOrganization(option.value.orgId);
-      locationService.partial({ orgId: option.value.orgId }, true);
+      locationService.push(`/?orgId=${option.value.orgId}`);
       // TODO how to reload the current page
       window.location.reload();
     }

public/app/core/components/OrgSwitcher.tsx

@@ -1,68 +0,0 @@
-import { css } from '@emotion/css';
-import React, { ReactElement } from 'react';
-import { useAsync } from 'react-use';
-
-import { UserOrgDTO } from '@grafana/data';
-import { Button, CustomScrollbar, Modal } from '@grafana/ui';
-import config from 'app/core/config';
-import { contextSrv } from 'app/core/services/context_srv';
-
-import { api } from '../../features/profile/api';
-
-interface Props {
-  onDismiss: () => void;
-}
-
-export function OrgSwitcher({ onDismiss }: Props): ReactElement {
-  const { value: orgs = [] } = useAsync(() => {
-    return api.loadOrgs();
-  }, []);
-  const currentOrgId = contextSrv.user.orgId;
-  const contentClassName = css({
-    display: 'flex',
-    maxHeight: 'calc(85vh - 42px)',
-  });
-  const setCurrentOrg = async (org: UserOrgDTO) => {
-    await api.setUserOrg(org);
-    window.location.href = `${config.appSubUrl}${config.appSubUrl.endsWith('/') ? '' : '/'}?orgId=${org.orgId}`;
-  };
-
-  return (
-    <Modal
-      title="Switch Organization"
-      icon="arrow-random"
-      onDismiss={onDismiss}
-      isOpen={true}
-      contentClassName={contentClassName}
-    >
-      <CustomScrollbar autoHeightMin="100%">
-        <table className="filter-table form-inline">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Role</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
-            {orgs.map((org) => (
-              <tr key={org.orgId}>
-                <td>{org.name}</td>
-                <td>{org.role}</td>
-                <td className="text-right">
-                  {org.orgId === currentOrgId ? (
-                    <Button size="sm">Current</Button>
-                  ) : (
-                    <Button variant="secondary" size="sm" onClick={() => setCurrentOrg(org)}>
-                      Switch to
-                    </Button>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </CustomScrollbar>
-    </Modal>
-  );
-}

public/app/core/specs/OrgSwitcher.test.tsx

@@ -1,71 +0,0 @@
-import { render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-
-import { api } from '../../features/profile/api';
-import { OrgRole } from '../../types';
-import { OrgSwitcher } from '../components/OrgSwitcher';
-
-jest.mock('@grafana/runtime', () => ({
-  config: {
-    appSubUrl: '/subUrl',
-  },
-}));
-
-jest.mock('app/core/services/context_srv', () => ({
-  contextSrv: {
-    user: { orgId: 1 },
-  },
-}));
-
-describe('OrgSwitcher', () => {
-  const { location } = window;
-  let setUserOrgSpy: jest.SpyInstance;
-
-  beforeEach(async () => {
-    jest.clearAllMocks();
-    const orgs = [
-      { orgId: 1, name: 'Main Org.', role: OrgRole.Admin },
-      { orgId: 2, name: 'Org 2', role: OrgRole.Admin },
-    ];
-    const loadOrgsSpy = jest.spyOn(api, 'loadOrgs').mockResolvedValue(orgs);
-    setUserOrgSpy = jest.spyOn(api, 'setUserOrg').mockResolvedValue(undefined);
-
-    // @ts-ignore
-    delete window.location;
-    window.location = {} as Location;
-
-    render(<OrgSwitcher onDismiss={() => {}} />);
-    await waitFor(() => expect(loadOrgsSpy).toHaveBeenCalledTimes(1));
-  });
-
-  afterEach(() => {
-    window.location = location;
-  });
-
-  describe('when switching org', () => {
-    it('should render correct rows', async () => {
-      expect(screen.getAllByRole('row')).toHaveLength(3); // header + 2 orgs
-      expect(screen.getByRole('row', { name: /main org. admin current/i })).toBeInTheDocument();
-      expect(screen.getByRole('row', { name: /org 2 admin switch to/i })).toBeInTheDocument();
-    });
-
-    it('should switch orgId in call to backend', async () => {
-      const row = screen.getByRole('row', { name: /org 2 admin switch to/i });
-      const switchToButton = within(row).getByText(/switch to/i);
-      await userEvent.click(switchToButton);
-
-      await waitFor(() => expect(setUserOrgSpy).toBeCalledWith({ orgId: 2, name: 'Org 2', role: 'Admin' }));
-    });
-
-    it('should redirect to home page', async () => {
-      expect(window.location.href).toBeUndefined();
-
-      const row = screen.getByRole('row', { name: /org 2 admin switch to/i });
-      const switchToButton = within(row).getByText(/switch to/i);
-      await userEvent.click(switchToButton);
-
-      await waitFor(() => expect(window.location.href).toEqual('/subUrl/?orgId=2'));
-    });
-  });
-});