Migration: Select org (#24739)

* Add SelectoOrgPage

* Remove old code

* Remove import

public/app/features/all.ts

@@ -4,7 +4,6 @@ import './plugins/all';
 import './dashboard';
 import './dashboard';
 import './playlist/all';
 import './playlist/all';
 import './panel/all';
 import './panel/all';
-import './org/all';
 import './admin';
 import './admin';
 import './alerting/NotificationsEditCtrl';
 import './alerting/NotificationsEditCtrl';
 import './manage-dashboards';
 import './manage-dashboards';

public/app/features/org/SelectOrgCtrl.ts

-import angular from 'angular';
-import config from 'app/core/config';
-import { getBackendSrv } from '@grafana/runtime';
-import { promiseToDigest } from 'app/core/utils/promiseToDigest';
-
-export class SelectOrgCtrl {
-  /** @ngInject */
-  constructor($scope: any, contextSrv: any) {
-    contextSrv.sidemenu = false;
-
-    $scope.navModel = {
-      main: {
-        icon: 'grafana',
-        subTitle: 'Preferences',
-        text: 'Select active organization',
-      },
-    };
-
-    $scope.init = () => {
-      $scope.getUserOrgs();
-    };
-
-    $scope.getUserOrgs = () => {
-      promiseToDigest($scope)(
-        getBackendSrv()
-          .get('/api/user/orgs')
-          .then((orgs: any) => {
-            $scope.orgs = orgs;
-          })
-      );
-    };
-
-    $scope.setUsingOrg = (org: any) => {
-      getBackendSrv()
-        .post('/api/user/using/' + org.orgId)
-        .then(() => {
-          window.location.href = config.appSubUrl + '/';
-        });
-    };
-
-    $scope.init();
-  }
-}
-
-angular.module('grafana.controllers').controller('SelectOrgCtrl', SelectOrgCtrl);

public/app/features/org/SelectOrgPage.tsx

+import React, { FC, useState } from 'react';
+import Page from 'app/core/components/Page/Page';
+import { getBackendSrv, config } from '@grafana/runtime';
+import { UserOrg } from 'app/types';
+import { useAsync } from 'react-use';
+import { Button, HorizontalGroup } from '@grafana/ui';
+
+const navModel = {
+  main: {
+    icon: 'grafana',
+    subTitle: 'Preferences',
+    text: 'Select active organization',
+  },
+  node: {
+    text: 'Select active organization',
+  },
+};
+
+const getUserOrgs = async () => {
+  return await getBackendSrv().get('/api/user/orgs');
+};
+const setUserOrg = async (org: UserOrg) => {
+  return await getBackendSrv()
+    .post('/api/user/using/' + org.orgId)
+    .then(() => {
+      window.location.href = config.appSubUrl + '/';
+    });
+};
+
+export const SelectOrgPage: FC = () => {
+  const [orgs, setOrgs] = useState<UserOrg[]>();
+
+  useAsync(async () => {
+    setOrgs(await getUserOrgs());
+  }, []);
+  return (
+    <Page navModel={navModel}>
+      <Page.Contents>
+        <div>
+          <p>
+            You have been added to another Organization due to an open invitation! Please select which organization you
+            want to use right now (you can change this later at any time).
+          </p>
+          <HorizontalGroup wrap>
+            {orgs &&
+              orgs.map(org => (
+                <Button key={org.orgId} icon="signin" onClick={() => setUserOrg(org)}>
+                  {org.name}
+                </Button>
+              ))}
+          </HorizontalGroup>
+        </div>
+      </Page.Contents>
+    </Page>
+  );
+};
+
+export default SelectOrgPage;

public/app/features/org/all.ts

-import './SelectOrgCtrl';

public/app/features/org/partials/select_org.html

-<page-header model="navModel"></page-header>
-
-<div class="page-container page-body">
-
-	<div class="signup">
-		<div class="login-form">
-
-			<div class="modal-tagline">
-				You have been added to another Organization due to an open invitation!
-
-				Please select which organization you want to <br>
-				use right now (you can change this later at any time).
-			</div>
-
-			<div style="display: inline-block; width: 400px; margin: 30px 0">
-				<div ng-repeat="org in orgs">
-					<a ng-click="setUsingOrg(org)" class="btn btn-primary">
-						{{org.name}} ({{org.role}})
-					</a>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-
-
-<footer />

public/app/routes/routes.ts

@@ -318,9 +318,12 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati
       },
       },
     })
     })
     .when('/profile/select-org', {
     .when('/profile/select-org', {
-      templateUrl: 'public/app/features/org/partials/select_org.html',
-      controller: 'SelectOrgCtrl',
+      template: '<react-container/>',
       reloadOnSearch: false,
       reloadOnSearch: false,
+      resolve: {
+        component: () =>
+          SafeDynamicImport(import(/* webPackChunkName: "SelectOrgPage" */ 'app/features/org/SelectOrgPage')),
+      },
     })
     })
     // ADMIN
     // ADMIN
     .when('/admin', {
     .when('/admin', {