dashfolders: Clean up more variables and move newType, aclTypes and…

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

dashfolders: Clean up more variables and move newType, aclTypes and…
dashfolders: Clean up more variables and move newType, aclTypes and permissionOptions to the store #10275
0722ea04 · Johannes Schill · Daniel Lee · 4ea9f302 · 0722ea04 · 0722ea04
Commit 0722ea04 authored Jan 18, 2018 by Johannes Schill Committed by Daniel Lee Jan 25, 2018
4 changed files
--- a/public/app/core/components/Permissions/Permissions.tsx
+++ b/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 => {
+    const { permissions } = this.props;
-      return {
+    permissions.resetNewType();
-        ...prevState,
-        newType: 'Group',
-      };
-    });
  }
  typeChanged(evt) {
@@ -97,12 +74,7 @@ class Permissions extends Component<IProps, any> {
      return;
    }
-    this.setState(prevState => {
+    permissions.setNewType(value);
-      return {
-        ...prevState,
-        newType: 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}>
+                  <select
-                    {this.aclTypes.map((option, idx) => {
+                    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>

--- a/public/app/core/components/Permissions/PermissionsList.tsx
+++ b/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}
              />

--- a/public/app/core/components/Permissions/PermissionsListItem.tsx
+++ b/public/app/core/components/Permissions/PermissionsListItem.tsx
 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}

--- a/public/app/stores/PermissionsStore/PermissionsStore.ts
+++ b/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;