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>

packages/grafana-ui/src/components/Button/Button.story.tsx

@@ -16,7 +16,7 @@ const defaultProps = {
 
 const variants = {
   size: ['xs', 'sm', 'md', 'lg'],
-  variant: ['primary', 'secondary', 'danger', 'inverse', 'transparent'],
+  variant: ['primary', 'secondary', 'danger', 'inverse', 'transparent', 'link'],
 };
 const combinationOptions = {
   CombinationRenderer: ThemeableCombinationsRowRenderer,

packages/grafana-ui/src/components/Button/styles.ts

@@ -67,6 +67,13 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, textAndIco
         background: transparent;
       `;
       break;
+
+    case 'link':
+      background = css`
+        ${buttonVariantStyles('', '', theme.colors.linkExternal, 'rgba(0, 0, 0, 0.1)', true)};
+        background: transparent;
+      `;
+      break;
   }
 
   return {

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx

@@ -133,9 +133,11 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
     return (
       <span className={styles.buttonContainer}>
         {typeof children === 'string' ? (
-          <Forms.Button className={buttonClass} size={size} variant="link" onClick={onClick}>
-            {children}
-          </Forms.Button>
+          <span className={buttonClass}>
+            <Forms.Button size={size} variant="link" onClick={onClick}>
+              {children}
+            </Forms.Button>
+          </span>
         ) : (
           <span className={buttonClass} onClick={onClick}>
             {children}

packages/grafana-ui/src/components/Forms/Button.tsx

@@ -38,7 +38,7 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
       ) as string;
 
       return {
-        borderColor: selectThemeVariant({ light: theme.colors.gray70, dark: theme.colors.gray33 }, theme.type),
+        borderColor: selectThemeVariant({ light: theme.colors.gray85, dark: theme.colors.gray25 }, theme.type),
         background: buttonVariantStyles(
           from,
           to,
@@ -57,7 +57,6 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
         borderColor: 'transparent',
         background: buttonVariantStyles('transparent', 'transparent', theme.colors.linkExternal),
         variantStyles: css`
-          text-decoration: underline;
           &:focus {
             outline: none;
             box-shadow: none;

packages/grafana-ui/src/components/Input/Input.tsx

@@ -11,6 +11,7 @@ export enum InputStatus {
 interface Props extends React.HTMLProps<HTMLInputElement> {
   validationEvents?: ValidationEvents;
   hideErrorMessage?: boolean;
+  inputRef?: React.LegacyRef<HTMLInputElement>;
 
   // Override event props and append status as argument
   onBlur?: (event: React.FocusEvent<HTMLInputElement>, status?: InputStatus) => void;
@@ -70,14 +71,14 @@ export class Input extends PureComponent<Props, State> {
   };
 
   render() {
-    const { validationEvents, className, hideErrorMessage, ...restProps } = this.props;
+    const { validationEvents, className, hideErrorMessage, inputRef, ...restProps } = this.props;
     const { error } = this.state;
     const inputClassName = classNames('gf-form-input', { invalid: this.isInvalid }, className);
     const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);
 
     return (
       <div style={{ flexGrow: 1 }}>
-        <input {...inputElementProps} className={inputClassName} />
+        <input {...inputElementProps} ref={inputRef} className={inputClassName} />
         {error && !hideErrorMessage && <span>{error}</span>}
       </div>
     );