Merge branch 'main' into feat/protect-users-endpoint

deployment/helmchart/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [1.0.5]
+
+### Bug fixes
+
+* Propagate admin access to all apps for dashboard admins #62
+
+### Features
+
+* Update dashboard to v0.2.6
+* Update dashboard-backend to v0.2.7
+
 ## [1.0.4]
 
 ### Bug fixes

deployment/helmchart/Chart.yaml

@@ -1,7 +1,7 @@
 annotations:
   category: Dashboard
 apiVersion: v2
-appVersion: 0.2.5
+appVersion: 0.2.6
 dependencies:
   - name: common
     # https://artifacthub.io/packages/helm/bitnami/common
@@ -23,4 +23,4 @@ name: stackspin-dashboard
 sources:
   - https://open.greenhost.net/stackspin/dashboard/
   - https://open.greenhost.net/stackspin/dashboard-backend/
-version: 1.0.4
+version: 1.0.5

deployment/helmchart/values.yaml

@@ -68,7 +68,7 @@ dashboard:
   image:
     registry: open.greenhost.net:4567
     repository: stackspin/dashboard/dashboard
-    tag: 0-2-5
+    tag: 0-2-6
     ## Optionally specify an array of imagePullSecrets.
     ## Secrets must be manually created in the namespace.
     ## ref: https://kubernetes.io/docs/tasks/configure-pod-container/pull-image-private-registry/
@@ -235,7 +235,7 @@ backend:
   image:
     registry: open.greenhost.net:4567
     repository: stackspin/dashboard-backend/dashboard-backend
-    tag: 0-2-6
+    tag: 0-2-7
     ## Optionally specify an array of imagePullSecrets.
     ## Secrets must be manually created in the namespace.
     ## ref: https://kubernetes.io/docs/tasks/configure-pod-container/pull-image-private-registry/

src/components/Form/Select/Select.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useController } from 'react-hook-form';
 
 /* eslint-disable react/react-in-jsx-scope */
-export const Select = ({ control, name, label, options }: SelectProps) => {
+export const Select = ({ control, name, label, options, disabled = false }: SelectProps) => {
   const {
     field,
     // fieldState: { invalid, isTouched, isDirty },
@@ -27,6 +27,7 @@ export const Select = ({ control, name, label, options }: SelectProps) => {
         name={name} // send down the input name
         ref={field.ref} // send input ref, so we can focus on input when error appear
         className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+        disabled={disabled}
       >
         {options?.map((option) => (
           <option key={option.value} value={option.value}>
@@ -43,4 +44,5 @@ type SelectProps = {
   name: string;
   label?: string;
   options?: any[];
+  disabled?: boolean;
 };

src/components/Header/Header.tsx

@@ -173,7 +173,9 @@ const Header: React.FC<HeaderProps> = () => {
         )}
       </Disclosure>
 
-      <UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
+      {currentUserModal && (
+        <UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
+      )}
     </>
   );
 };

src/components/UserModal/UserModal.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
 import { TrashIcon } from '@heroicons/react/outline';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { Modal, ConfirmationModal } from 'src/components';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { Banner, Modal, ConfirmationModal } from 'src/components';
 import { Input, Select } from 'src/components/Form';
 import { User, UserRole, useUsers } from 'src/services/users';
 import { useAuth } from 'src/services/auth';
@@ -29,7 +29,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
     defaultValues: initialUserForm,
   });
 
-  const { fields } = useFieldArray({
+  const { fields, update } = useFieldArray({
     control,
     name: 'app_roles',
   });
@@ -44,8 +44,6 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
         loadUser(userId);
       }
     }
-
-    reset(initialUserForm);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userId, open]);
 
@@ -59,6 +57,18 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
     };
   }, [user, reset, open]);
 
+  const dashboardRole = useWatch({
+    control,
+    name: 'app_roles.0.role',
+  });
+
+  useEffect(() => {
+    if (dashboardRole === UserRole.Admin) {
+      fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dashboardRole]);
+
   const handleSave = async () => {
     try {
       if (isPersonalModal) {
@@ -193,6 +203,15 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
                   <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
                 </div>
 
+                {dashboardRole === UserRole.Admin && (
+                  <div className="sm:col-span-6">
+                    <Banner
+                      title="Admin users automatically have admin-level access to all apps."
+                      titleSm="Admin user"
+                    />
+                  </div>
+                )}
+
                 <div>
                   <div className="flow-root mt-6">
                     <ul className="-my-5 divide-y divide-gray-200 ">
@@ -219,6 +238,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
                                   key={item.id}
                                   control={control}
                                   name={`app_roles.${index}.role`}
+                                  disabled={dashboardRole === UserRole.Admin}
                                   options={[
                                     { value: UserRole.NoAccess, name: 'No Access' },
                                     { value: UserRole.User, name: 'User' },

src/modules/users/Users.tsx

@@ -163,7 +163,9 @@ export const Users: React.FC = () => {
           </div>
         </div>
 
-        <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
+        {configureModal && (
+          <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
+        )}
       </div>
     </div>
   );