Admin: New Admin User page (#20498)

* admin: user page to react WIP * admin user page: basic view * admin user page: refactor, extract orgs and permissions components * admin user: change sessions actions styles * admin user: add disable button * user admin: add change grafana admin action * user admin: able to change org role and remove org * user admin: confirm force logout * user admin: change org button style * user admin: add confirm modals for critical actions * user admin: lock down ldap user info * user admin: align with latest design changes * user admin: add LDAP sync * admin user: confirm button * user admin: add to org modal * user admin: fix ConfirmButton story * admin user: handle grafana admin change * ConfirmButton: make styled component * ConfirmButton: completely styled component * User Admin: permissions section refactor * admin user: refactor (orgs and sessions) * ConfirmButton: able to set confirm variant * admin user: inline org removal * admin user: show ldap sync info only for ldap users * admin user: edit profile * ConfirmButton: some fixes after review * Chore: fix storybook build * admin user: rename handlers * admin user: remove LdapUserPage import from routes * Chore: fix ConfirmButton tests * Chore: fix user api endpoint tests * Chore: update failed test snapshots * admin user: redux actions WIP * admin user: use new ConfirmModal component for user profile * admin user: use new ConfirmModal component for sessions * admin user: use lockMessage * ConfirmButton: use primary button as default * admin user: fix ActionButton color * UI: use Icon component for Modal * UI: refactor ConfirmModal after Modal changes * UI: add link button variant * UI: able to use custom ConfirmButton * Chore: fix type errors after ConfirmButton refactor * Chore: revert Graph component changes (works with TS 3.7) * Chore: use Forms.Button instead of ActionButton * admin user: align items * admin user: align add to org modal * UI: organization picker component * admin user: use org picker for AddToOrgModal * admin user: org actions * admin user: connect sessions actions * admin user: updateUserPermissions action * admin user: enable delete user action * admin user: sync ldap user * Chore: refactor, remove unused code * Chore: refactor, move api calls to actions * admin user: set user password action * Chore: refactor, remove unused components * admin user: set input focus on edit * admin user: pass user into debug LDAP mapping * UserAdminPage: Ux changes * UserAdminPage: align buttons to the left * UserAdminPage: align delete user button * UserAdminPage: swap add to org modal buttons * UserAdminPage: set password field to empty when editing * UserAdminPage: fix tests * Updated button border * Chore: fix ConfirmButton after changes introduced in #21092 Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2025-02-25 18:55:37 -06:00 · 2020-01-13 19:10:19 +03:00
parent 108039af33
commit 8505d90768
29 changed files with 1448 additions and 551 deletions
--- a/public/app/core/components/Select/OrgPicker.tsx
+++ b/public/app/core/components/Select/OrgPicker.tsx
@@ -0,0 +1,71 @@
+import React, { PureComponent } from 'react';
+import { AsyncSelect } from '@grafana/ui';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { Organization } from 'app/types';
+import { SelectableValue } from '@grafana/data';
+
+export interface OrgSelectItem {
+  id: number;
+  value: number;
+  label: string;
+  name: string;
+}
+
+export interface Props {
+  onSelected: (org: OrgSelectItem) => void;
+  className?: string;
+}
+
+export interface State {
+  isLoading: boolean;
+}
+
+export class OrgPicker extends PureComponent<Props, State> {
+  orgs: Organization[];
+
+  state: State = {
+    isLoading: false,
+  };
+
+  async loadOrgs() {
+    this.setState({ isLoading: true });
+    const orgs = await getBackendSrv().get('/api/orgs');
+    this.orgs = orgs;
+    this.setState({ isLoading: false });
+    return orgs;
+  }
+
+  getOrgOptions = async (query: string): Promise<Array<SelectableValue<number>>> => {
+    if (!this.orgs) {
+      await this.loadOrgs();
+    }
+    return this.orgs.map(
+      (org: Organization): SelectableValue<number> => ({
+        id: org.id,
+        value: org.id,
+        label: org.name,
+        name: org.name,
+      })
+    );
+  };
+
+  render() {
+    const { className, onSelected } = this.props;
+    const { isLoading } = this.state;
+
+    return (
+      <div className="org-picker">
+        <AsyncSelect
+          className={className}
+          isLoading={isLoading}
+          defaultOptions={true}
+          isSearchable={false}
+          loadOptions={this.getOrgOptions}
+          onChange={onSelected}
+          placeholder="Select organization"
+          noOptionsMessage={() => 'No organizations found'}
+        />
+      </div>
+    );
+  }
+}