Angular/Forms migration: Orgs list (grafana#23821)

* Create new components

* Fix async issues

* Remove comments

* Update public/app/features/admin/AdminOrgsTable.tsx

* Update public/app/features/admin/AdminListOrgsPage.tsx

* Update public/app/features/admin/AdminListOrgsPage.tsx

* Remove angular code

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/features/admin/AdminListOrgsPage.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useEffect } from 'react';
+import { getNavModel } from 'app/core/selectors/navModel';
+import Page from 'app/core/components/Page/Page';
+import { useSelector } from 'react-redux';
+import { StoreState } from 'app/types/store';
+import { LinkButton } from '@grafana/ui';
+import { getBackendSrv } from '@grafana/runtime';
+import { AdminOrgsTable } from './AdminOrgsTable';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
+
+const deleteOrg = async (orgId: number) => {
+  return await getBackendSrv().delete('/api/orgs/' + orgId);
+};
+
+const getOrgs = async () => {
+  return await getBackendSrv().get('/api/orgs');
+};
+
+export const AdminListOrgsPages: FC = () => {
+  const navIndex = useSelector((state: StoreState) => state.navIndex);
+  const navModel = getNavModel(navIndex, 'global-orgs');
+  const [state, fetchOrgs] = useAsyncFn(async () => await getOrgs(), []);
+  useEffect(() => {
+    fetchOrgs();
+  }, []);
+
+  return (
+    <Page navModel={navModel}>
+      <Page.Contents>
+        <>
+          <div className="page-action-bar">
+            <div className="page-action-bar__spacer"></div>
+            <LinkButton icon="plus" href="org/new">
+              New org
+            </LinkButton>
+          </div>
+          {state.loading && 'Fetching organizations'}
+          {state.error}
+          {state.value && (
+            <AdminOrgsTable
+              orgs={state.value}
+              onDelete={orgId => {
+                deleteOrg(orgId);
+                fetchOrgs();
+              }}
+            />
+          )}
+        </>
+      </Page.Contents>
+    </Page>
+  );
+};
+
+export default AdminListOrgsPages;

public/app/features/admin/AdminOrgsTable.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useState } from 'react';
+import { Organization } from 'app/types';
+import { Button, ConfirmModal } from '@grafana/ui';
+
+interface Props {
+  orgs: Organization[];
+  onDelete: (orgId: number) => void;
+}
+
+export const AdminOrgsTable: FC<Props> = ({ orgs, onDelete }) => {
+  const [deleteOrg, setDeleteOrg] = useState<Organization>();
+  return (
+    <table className="filter-table form-inline filter-table--hover">
+      <thead>
+        <tr>
+          <th>Id</th>
+          <th>Name</th>
+          <th style={{ width: '1%' }}></th>
+        </tr>
+      </thead>
+      <tbody>
+        {orgs.map(org => (
+          <tr key={`${org.id}-${org.name}`}>
+            <td className="link-td">
+              <a href={`admin/orgs/edit/${org.id}`}>{org.id}</a>
+            </td>
+            <td className="link-td">
+              <a href={`admin/orgs/edit/${org.id}`}>{org.name}</a>
+            </td>
+            <td className="text-right">
+              <Button variant="destructive" size="sm" icon="times" onClick={() => setDeleteOrg(org)} />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+      {deleteOrg && (
+        <ConfirmModal
+          isOpen
+          icon="trash-alt"
+          title="Delete"
+          body={
+            <div>
+              Are you sure you want to delete `${deleteOrg.name}`?
+              <br /> <small>All dashboards for this organization will be removed!</small>
+            </div>
+          }
+          confirmText="Delete"
+          onDismiss={() => setDeleteOrg(null)}
+          onConfirm={() => {
+            onDelete(deleteOrg.id);
+            setDeleteOrg(null);
+          }}
+        />
+      )}
+    </table>
+  );
+};

public/app/features/admin/index.ts

@@ -1,5 +1,4 @@
 import AdminEditUserCtrl from './AdminEditUserCtrl';
-import AdminListOrgsCtrl from './AdminListOrgsCtrl';
 import AdminEditOrgCtrl from './AdminEditOrgCtrl';
 
 import coreModule from 'app/core/core_module';
@@ -15,6 +14,5 @@ class AdminHomeCtrl {
 }
 
 coreModule.controller('AdminEditUserCtrl', AdminEditUserCtrl);
-coreModule.controller('AdminListOrgsCtrl', AdminListOrgsCtrl);
 coreModule.controller('AdminEditOrgCtrl', AdminEditOrgCtrl);
 coreModule.controller('AdminHomeCtrl', AdminHomeCtrl);

public/app/routes/routes.ts

@@ -344,9 +344,11 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati
       },
     })
     .when('/admin/orgs', {
-      templateUrl: 'public/app/features/admin/partials/orgs.html',
-      controller: 'AdminListOrgsCtrl',
-      controllerAs: 'ctrl',
+      template: '<react-container />',
+      resolve: {
+        component: () =>
+          SafeDynamicImport(import(/* webpackChunkName: "AdminListOrgsPage" */ 'app/features/admin/AdminListOrgsPage')),
+      },
     })
     .when('/admin/orgs/edit/:id', {
       template: '<react-container />',