UserInviteForm: move API logic away from components (#43408)

* userInviteForm: move API logic away from components

* removes duplicate response alert

* reverse api logic to handle errors

* move redirection logic to component

* chore: cleanup code

public/app/features/org/UserInviteForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import {
   HorizontalGroup,
   Button,
@@ -12,9 +12,9 @@ import {
 } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { OrgRole } from 'app/types';
-import { getBackendSrv, locationService } from '@grafana/runtime';
-import { appEvents } from 'app/core/core';
-import { AppEvents, locationUtil } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+import { locationUtil } from '@grafana/data';
+import { userInviteSubmit } from './api';
 
 const roles = [
   { label: 'Viewer', value: OrgRole.Viewer },
@@ -22,7 +22,12 @@ const roles = [
   { label: 'Admin', value: OrgRole.Admin },
 ];
 
-interface FormModel {
+const onSubmit = async (formData: FormModel) => {
+  await userInviteSubmit(formData);
+  locationService.push('/org/users/');
+};
+
+export interface FormModel {
   role: OrgRole;
   name: string;
   loginOrEmail?: string;
@@ -30,18 +35,7 @@ interface FormModel {
   email: string;
 }
 
-interface Props {}
-
-export const UserInviteForm: FC<Props> = ({}) => {
-  const onSubmit = async (formData: FormModel) => {
-    try {
-      await getBackendSrv().post('/api/org/invites', formData);
-    } catch (err) {
-      appEvents.emit(AppEvents.alertError, ['Failed to send invitation.', err.message]);
-    }
-    locationService.push('/org/users/');
-  };
-
+export const UserInviteForm = () => {
   const defaultValues: FormModel = {
     name: '',
     email: '',

public/app/features/org/api.ts

@@ -0,0 +1,12 @@
+import { getBackendSrv } from '@grafana/runtime';
+import { appEvents } from 'app/core/core';
+import { FormModel } from './UserInviteForm';
+import { AppEvents } from '@grafana/data';
+
+export const userInviteSubmit = async (formData: FormModel) => {
+  try {
+    await getBackendSrv().post('/api/org/invites', formData);
+  } catch (err) {
+    appEvents.emit(AppEvents.alertError, ['Failed to send invitation.', err.message]);
+  }
+};

public/sass/_variables.dark.generated.scss

@@ -102,7 +102,7 @@ $text-color: rgb(204, 204, 220);
 $text-color-semi-weak: rgba(204, 204, 220, 0.65);
 $text-color-weak: rgba(204, 204, 220, 0.65);
 $text-color-faint: rgba(204, 204, 220, 0.6);
-$text-color-emphasis: #fff;
+$text-color-emphasis: #FFFFFF;
 $text-blue: #6E9FFF;
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
@@ -116,7 +116,7 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 // -------------------------
 $link-color: rgb(204, 204, 220);
 $link-color-disabled: rgba(204, 204, 220, 0.6);
-$link-hover-color: #fff;
+$link-hover-color: #FFFFFF;
 $external-link-color: #6E9FFF;
 
 // Typography