dashfolders: Clean up more variables and move newType, aclTypes and permissionOptions to the store #10275

public/app/core/components/Permissions/Permissions.tsx

@@ -3,6 +3,7 @@ import PermissionsList from './PermissionsList';
 import { observer } from 'mobx-react';
 import UserPicker, { User } from 'app/core/components/Picker/UserPicker';
 import TeamPicker, { Team } from 'app/core/components/Picker/TeamPicker';
+import { aclTypes } from 'app/stores/PermissionsStore/PermissionsStore';
 
 export interface DashboardAcl {
   id?: number;
@@ -31,22 +32,6 @@ export interface IProps {
 
 @observer
 class Permissions extends Component<IProps, any> {
-  dashboardId: any;
-  meta: any;
-  items: DashboardAcl[];
-  dummyItems: DashboardAcl[];
-  permissionOptions = [{ value: 1, text: 'View' }, { value: 2, text: 'Edit' }, { value: 4, text: 'Admin' }];
-  aclTypes = [
-    { value: 'Group', text: 'Team' },
-    { value: 'User', text: 'User' },
-    { value: 'Viewer', text: 'Everyone With Viewer Role' },
-    { value: 'Editor', text: 'Everyone With Editor Role' },
-  ];
-  newType: string;
-  canUpdate: boolean;
-  error: string;
-  refreshList: any;
-
   constructor(props) {
     super(props);
     const { dashboardId, permissions, isFolder } = this.props;
@@ -57,10 +42,6 @@ class Permissions extends Component<IProps, any> {
     this.userPicked = this.userPicked.bind(this);
     this.teamPicked = this.teamPicked.bind(this);
     permissions.load(dashboardId, isFolder);
-
-    this.state = {
-      newType: 'Group',
-    };
   }
 
   permissionChanged(index: number, permission: number, permissionName: string) {
@@ -79,12 +60,8 @@ class Permissions extends Component<IProps, any> {
   }
 
   resetNewType() {
-    this.setState(prevState => {
-      return {
-        ...prevState,
-        newType: 'Group',
-      };
-    });
+    const { permissions } = this.props;
+    permissions.resetNewType();
   }
 
   typeChanged(evt) {
@@ -97,12 +74,7 @@ class Permissions extends Component<IProps, any> {
       return;
     }
 
-    this.setState(prevState => {
-      return {
-        ...prevState,
-        newType: value,
-      };
-    });
+    permissions.setNewType(value);
   }
 
   userPicked(user: User) {
@@ -116,15 +88,12 @@ class Permissions extends Component<IProps, any> {
   }
 
   render() {
-    console.log('Permissions render');
     const { permissions, backendSrv } = this.props;
-    const { newType } = this.state;
 
     return (
       <div className="gf-form-group">
         <PermissionsList
           permissions={permissions.items}
-          permissionsOptions={this.permissionOptions}
           removeItem={this.removeItem}
           permissionChanged={this.permissionChanged}
           fetching={permissions.fetching}
@@ -135,8 +104,12 @@ class Permissions extends Component<IProps, any> {
             <div className="gf-form-inline">
               <div className="gf-form">
                 <div className="gf-form-select-wrapper">
-                  <select className="gf-form-input gf-size-auto" value={newType} onChange={this.typeChanged}>
-                    {this.aclTypes.map((option, idx) => {
+                  <select
+                    className="gf-form-input gf-size-auto"
+                    value={permissions.newType}
+                    onChange={this.typeChanged}
+                  >
+                    {aclTypes.map((option, idx) => {
                       return (
                         <option key={idx} value={option.value}>
                           {option.text}
@@ -147,13 +120,13 @@ class Permissions extends Component<IProps, any> {
                 </div>
               </div>
 
-              {newType === 'User' ? (
+              {permissions.newType === 'User' ? (
                 <div className="gf-form">
                   <UserPicker backendSrv={backendSrv} handlePicked={this.userPicked} />
                 </div>
               ) : null}
 
-              {newType === 'Group' ? (
+              {permissions.newType === 'Group' ? (
                 <div className="gf-form">
                   <TeamPicker backendSrv={backendSrv} handlePicked={this.teamPicked} />
                 </div>

public/app/core/components/Permissions/PermissionsList.tsx

@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 
 export interface IProps {
   permissions: any[];
-  permissionsOptions: any[];
   removeItem: any;
   permissionChanged: any;
   fetching: boolean;
@@ -13,7 +12,7 @@ export interface IProps {
 @observer
 class PermissionsList extends Component<IProps, any> {
   render() {
-    const { permissions, permissionsOptions, removeItem, permissionChanged, fetching } = this.props;
+    const { permissions, removeItem, permissionChanged, fetching } = this.props;
 
     return (
       <table className="filter-table gf-form-group">
@@ -24,7 +23,6 @@ class PermissionsList extends Component<IProps, any> {
                 key={idx}
                 item={item}
                 itemIndex={idx}
-                permissionsOptions={permissionsOptions}
                 removeItem={removeItem}
                 permissionChanged={permissionChanged}
               />

public/app/core/components/Permissions/PermissionsListItem.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react';
+import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore';
 
 const setClassNameHelper = inherited => {
   return inherited ? 'gf-form-disabled' : '';
 };
 
-export default observer(({ item, permissionsOptions, removeItem, permissionChanged, itemIndex }) => {
+export default observer(({ item, removeItem, permissionChanged, itemIndex }) => {
   const handleRemoveItem = evt => {
     evt.preventDefault();
     removeItem(itemIndex);
@@ -15,7 +16,7 @@ export default observer(({ item, permissionsOptions, removeItem, permissionChang
     evt.preventDefault();
     const value = evt.target.value;
     const valueAsInt = parseInt(value, 10);
-    const newPermission = permissionsOptions.find(opt => opt.value === valueAsInt);
+    const newPermission = permissionOptions.find(opt => opt.value === valueAsInt);
     permissionChanged(itemIndex, newPermission.value, newPermission.text);
   };
 
@@ -36,7 +37,7 @@ export default observer(({ item, permissionsOptions, removeItem, permissionChang
             onChange={handleChangePermission}
             disabled={item.inherited}
           >
-            {permissionsOptions.map((option, idx) => {
+            {permissionOptions.map((option, idx) => {
               return (
                 <option key={idx} value={option.value}>
                   {option.text}

public/app/stores/PermissionsStore/PermissionsStore.ts

@@ -3,6 +3,17 @@ import { PermissionsStoreItem } from './PermissionsStoreItem';
 
 const duplicateError = 'This permission exists already.';
 
+export const permissionOptions = [{ value: 1, text: 'View' }, { value: 2, text: 'Edit' }, { value: 4, text: 'Admin' }];
+
+export const aclTypes = [
+  { value: 'Group', text: 'Team' },
+  { value: 'User', text: 'User' },
+  { value: 'Viewer', text: 'Everyone With Viewer Role' },
+  { value: 'Editor', text: 'Everyone With Editor Role' },
+];
+
+const defaultNewType = aclTypes[0].value;
+
 export const PermissionsStore = types
   .model('PermissionsStore', {
     fetching: types.boolean,
@@ -12,6 +23,7 @@ export const PermissionsStore = types
     items: types.optional(types.array(PermissionsStoreItem), []),
     error: types.maybe(types.string),
     originalItems: types.optional(types.array(PermissionsStoreItem), []),
+    newType: types.optional(types.string, defaultNewType),
   })
   .views(self => ({
     isValid: item => {
@@ -58,6 +70,12 @@ export const PermissionsStore = types
       self.items[idx].updatePermission(permission, permissionName);
       self.canUpdate = true;
     },
+    setNewType(newType: string) {
+      self.newType = newType;
+    },
+    resetNewType() {
+      self.newType = defaultNewType;
+    },
     update: flow(function* update(dashboardId: number) {
       self.error = null;
       const backendSrv = getEnv(self).backendSrv;