ux: POC - Update "Add permissions" design and add a fancy animation #10676

public/app/containers/ManageDashboards/FolderPermissions.tsx

@@ -7,7 +7,7 @@ import Permissions from 'app/core/components/Permissions/Permissions';
 import Tooltip from 'app/core/components/Tooltip/Tooltip';
 import PermissionsInfo from 'app/core/components/Permissions/PermissionsInfo';
 import AddPermissions from 'app/core/components/Permissions/AddPermissions';
-
+import SlideDown from 'app/core/components/Animations/SlideDown';
 @inject('nav', 'folder', 'view', 'permissions')
 @observer
 export class FolderPermissions extends Component<IContainerProps, any> {
@@ -48,14 +48,18 @@ export class FolderPermissions extends Component<IContainerProps, any> {
               <i className="gicon gicon-question gicon--has-hover" />
             </Tooltip>
             <div className="page-action-bar__spacer" />
-            <button className="btn btn-success pull-right" onClick={this.handleAddPermission}>
+            <button
+              className="btn btn-success pull-right"
+              onClick={this.handleAddPermission}
+              disabled={permissions.isAddPermissionsVisible}
+            >
               <i className="fa fa-plus" />
               Add Permission
             </button>
           </div>
-          {permissions.isAddPermissionsVisible ? (
+          <SlideDown in={permissions.isAddPermissionsVisible}>
             <AddPermissions permissions={permissions} backendSrv={backendSrv} dashboardId={dashboardId} />
-          ) : null}
+          </SlideDown>
           <Permissions permissions={permissions} isFolder={true} dashboardId={dashboardId} backendSrv={backendSrv} />
         </div>
       </div>

public/app/core/components/Animations/SlideDown.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Transition from 'react-transition-group/Transition';
+
+const defaultMaxHeight = '200px'; // When animating using max-height we need to use a static value.
+// If this is not enough, pass in <SlideDown maxHeight="....
+const defaultDuration = 200;
+const defaultStyle = {
+  transition: `max-height ${defaultDuration}ms ease-in-out`,
+  overflow: 'hidden',
+};
+
+export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
+  // There are 4 main states a Transition can be in:
+  // ENTERING, ENTERED, EXITING, EXITED
+  // https://reactcommunity.org/react-transition-group/
+  const transitionStyles = {
+    exited: { maxHeight: 0 },
+    entering: { maxHeight: maxHeight },
+    entered: { maxHeight: maxHeight, overflow: 'visible' },
+    exiting: { maxHeight: 0 },
+  };
+
+  return (
+    <Transition in={inProp} timeout={defaultDuration}>
+      {state => (
+        <div
+          style={{
+            ...defaultStyle,
+            ...transitionStyles[state],
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </Transition>
+  );
+};

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

@@ -11,7 +11,6 @@ export interface IProps {
   backendSrv: any;
   dashboardId: any;
 }
-
 @observer
 class AddPermissions extends Component<IProps, any> {
   constructor(props) {
@@ -82,8 +81,11 @@ class AddPermissions extends Component<IProps, any> {
 
     return (
       <div className="gf-form-inline cta-form">
-        <form name="addPermission" className="gf-form-group" onSubmit={this.handleSubmit}>
-          <h6 className="muted">Add Permission For</h6>
+        <button className="cta-form__close btn btn-transparent" onClick={permissions.hideAddPermissions}>
+          <i className="fa fa-close" />
+        </button>
+        <form name="addPermission" onSubmit={this.handleSubmit}>
+          <h6>Add Permission For</h6>
           <div className="gf-form-inline">
             <div className="gf-form">
               <div className="gf-form-select-wrapper">

public/app/core/components/Picker/TeamPicker.tsx

@@ -67,11 +67,13 @@ class TeamPicker extends Component<IProps, any> {
           isLoading={isLoading}
           loadOptions={this.debouncedSearch}
           loadingPlaceholder="Loading..."
+          noResultsText="No teams found"
           onChange={handlePicked}
-          className="width-8 gf-form-input gf-form-input--form-dropdown"
+          className="width-12 gf-form-input gf-form-input--form-dropdown"
           optionComponent={PickerOption}
           placeholder="Choose"
           value={value}
+          autosize={true}
         />
       </div>
     );

public/app/core/components/Picker/UserPicker.tsx

@@ -68,7 +68,7 @@ class UserPicker extends Component<IProps, any> {
           loadingPlaceholder="Loading..."
           noResultsText="No users found"
           onChange={handlePicked}
-          className="width-8 gf-form-input gf-form-input--form-dropdown"
+          className="width-12 gf-form-input gf-form-input--form-dropdown"
           optionComponent={PickerOption}
           placeholder="Choose"
           value={value}

public/sass/components/_buttons.scss

@@ -113,6 +113,10 @@
   //border: 1px solid $tight-form-func-highlight-bg;
 }
 
+.btn-transparent {
+  background-color: transparent;
+}
+
 .btn-outline-primary {
   @include button-outline-variant($btn-primary-bg);
 }

public/sass/components/_gf-form.scss

@@ -274,6 +274,10 @@ $input-border: 1px solid $input-border-color;
     }
   }
 
+  .gf-form-input {
+    margin-right: 0;
+  }
+
   select.gf-form-input {
     text-indent: 0.01px;
     text-overflow: '';
@@ -394,7 +398,15 @@ select.gf-form-input ~ .gf-form-help-icon {
 }
 
 .cta-form {
+  position: relative;
   padding: 1rem;
-  background-color: $dark-2;
+  background-color: $dark-4;
   margin-bottom: 1rem;
+  border-top: 3px solid $green;
+}
+
+.cta-form__close {
+  position: absolute;
+  right: 0;
+  top: 0;
 }