show admins and editors only for user groups select

grafana-plugin/src/components/UserGroups/UserGroups.tsx

@@ -9,6 +9,7 @@ import { SortableContainer, SortableElement, SortableHandle } from 'react-sortab
 import Text from 'components/Text/Text';
 import WorkingHours from 'components/WorkingHours/WorkingHours';
 import GSelect from 'containers/GSelect/GSelect';
+import RemoteSelect from 'containers/RemoteSelect/RemoteSelect';
 import UserTooltip from 'containers/UserTooltip/UserTooltip';
 import { User } from 'models/user/user.types';
 
@@ -121,18 +122,13 @@ const UserGroups = (props: UserGroupsProps) => {
           isMultipleGroups={isMultipleGroups}
           useDragHandle
         />
-        <GSelect
-          key={items.length} // to completely rerender when users length change
+        <RemoteSelect
+          key={items.length}
           showSearch
-          allowClear
-          modelName="userStore"
-          displayField="username"
-          valueField="pk"
           placeholder="Add user"
-          className={cx('select')}
+          href="/users/?filters=true&roles=0&roles=1"
           value={null}
           onChange={handleUserAdd}
-          getOptionLabel={({ label, value }: SelectableValue) => <UserTooltip id={value} />}
           showError={showError}
         />
       </VerticalGroup>

grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx

@@ -27,6 +27,7 @@ interface RemoteSelectProps {
   isMulti?: boolean;
   openMenuOnFocus?: boolean;
   getOptionLabel?: (item: SelectableValue) => React.ReactNode;
+  showError?: boolean;
 }
 
 const RemoteSelect = inject('store')(
@@ -46,6 +47,7 @@ const RemoteSelect = inject('store')(
       allowClear,
       getOptionLabel,
       openMenuOnFocus = true,
+      showError,
     } = props;
 
     const [options, setOptions] = useState<SelectableValue[] | undefined>();
@@ -111,6 +113,7 @@ const RemoteSelect = inject('store')(
         defaultOptions={options}
         loadOptions={loadOptionsCallback}
         getOptionLabel={getOptionLabel}
+        invalid={showError}
       />
     );
   })

grafana-plugin/src/containers/Rotation/Rotation.module.css

@@ -43,7 +43,7 @@
 }
 
 .slots__animate {
-  transition: transform 500ms ease;
+  /* transition: transform 500ms ease; */
 }
 
 .slots__transparent {