local-it/dashboard
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'main' into feat/batch-create-users

Browse source
This commit is contained in:
Davor 2022-07-18 07:47:58 +02:00
commit 8822d479a0
8 changed files with 154 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.example
View file

@ -1,2 +1,2 @@
REACT_APP_API_URL=http://stackspin_proxy:8081/api/v1
REACT_APP_HYDRA_PUBLIC_URL=https://sso.init.stackspin.net
REACT_APP_HYDRA_PUBLIC_URL=https://sso.init.stackspin.net

11
deployment/helmchart/CHANGELOG.md
View file

@ -1,5 +1,16 @@
# Changelog
## [1.1.0]
### Bug fixes
* Logging out of dashboard now calls SSO signout URL based on current domain
### Features
* Dashboard admin users automatically have admin rights in all apps
* App-specific rights for dashboard admin users are not editable
## [1.0.5]
### Bug fixes

2
deployment/helmchart/Chart.yaml
View file

@ -23,4 +23,4 @@ name: stackspin-dashboard
sources:
- https://open.greenhost.net/stackspin/dashboard/
- https://open.greenhost.net/stackspin/dashboard-backend/
version: 1.0.5
version: 1.1.0

4
deployment/helmchart/values.yaml
View file

@ -68,7 +68,7 @@ dashboard:
image:
registry: open.greenhost.net:4567
repository: stackspin/dashboard/dashboard
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/
@ -235,7 +235,7 @@ backend:
image:
registry: open.greenhost.net:4567
repository: stackspin/dashboard-backend/dashboard-backend
tag: 0-2-7
tag: 0-2-8
## 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/

15
src/components/Header/Header.tsx
View file

@ -1,4 +1,4 @@
import React, { Fragment, useState } from 'react';
import React, { Fragment, useMemo, useState } from 'react';
import { Disclosure, Menu, Transition } from '@headlessui/react';
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { useAuth } from 'src/services/auth';
@ -9,6 +9,8 @@ import _ from 'lodash';
import { UserModal } from '../UserModal';
const HYDRA_LOGOUT_URL = `${process.env.REACT_APP_HYDRA_PUBLIC_URL}/oauth2/sessions/logout`;
const navigation = [
{ name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
{ name: 'Users', to: '/users', requiresAdmin: true },
@ -26,8 +28,6 @@ function filterNavigationByDashboardRole(isAdmin: boolean) {
return navigation.filter((item) => !item.requiresAdmin);
}
const HYDRA_URL = process.env.REACT_APP_HYDRA_PUBLIC_URL;
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface HeaderProps {}
@ -50,7 +50,14 @@ const Header: React.FC<HeaderProps> = () => {
const navigationItems = filterNavigationByDashboardRole(isAdmin);
const signOutUrl = `${HYDRA_URL}/oauth2/sessions/logout`;
const signOutUrl = useMemo(() => {
const { hostname } = window.location;
// If we are developing locally, we need to use the init cluster's public URL
if (hostname === 'localhost') {
return HYDRA_LOGOUT_URL;
}
return `https://${hostname.replace(/^dashboard/, 'sso')}/oauth2/sessions/logout`;
}, []);
return (
<>

113
src/components/UserModal/UserModal.tsx
View file

@ -11,8 +11,19 @@ import { UserModalProps } from './types';
export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => {
const [deleteModal, setDeleteModal] = useState(false);
const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById, clearSelectedUser } =
useUsers();
const [isAdminRoleSelected, setAdminRoleSelected] = useState(true);
const [isPersonalModal, setPersonalModal] = useState(false);
const {
user,
loadUser,
loadPersonalInfo,
editUserById,
editPersonalInfo,
createNewUser,
userModalLoading,
deleteUserById,
clearSelectedUser,
} = useUsers();
const { currentUser, isAdmin } = useAuth();
const { control, reset, handleSubmit } = useForm<User>({
@ -26,7 +37,13 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
useEffect(() => {
if (userId) {
loadUser(userId);
const currentUserId = currentUser?.id;
if (currentUserId === userId) {
setPersonalModal(true);
loadPersonalInfo();
} else {
loadUser(userId);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userId, open]);
@ -47,7 +64,9 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
});
useEffect(() => {
if (dashboardRole === UserRole.Admin) {
const isAdminDashboardRoleSelected = dashboardRole === UserRole.Admin;
setAdminRoleSelected(isAdminDashboardRoleSelected);
if (isAdminDashboardRoleSelected) {
fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin }));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -55,7 +74,9 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
const handleSave = async () => {
try {
if (userId) {
if (isPersonalModal) {
await handleSubmit((data) => editPersonalInfo(data))();
} else if (userId) {
await handleSubmit((data) => editUserById(data))();
} else {
await handleSubmit((data) => createNewUser(data))();
@ -178,13 +199,13 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
</div>
</div>
{isAdmin && (
{isAdmin && !userModalLoading && (
<div>
<div className="mt-8">
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div>
{dashboardRole === UserRole.Admin && (
{isAdminRoleSelected && (
<div className="sm:col-span-6">
<Banner
title="Admin users automatically have admin-level access to all apps."
@ -193,47 +214,49 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
</div>
)}
<div>
<div className="flow-root mt-6">
<ul className="-my-5 divide-y divide-gray-200 ">
{fields.map((item, index) => {
if (item.name === 'dashboard') {
return null;
}
{!isAdminRoleSelected && (
<div>
<div className="flow-root mt-6">
<ul className="-my-5 divide-y divide-gray-200">
{fields.map((item, index) => {
if (item.name === 'dashboard') {
return null;
}
return (
<li className="py-4" key={item.name}>
<div className="flex items-center space-x-4">
<div className="flex-shrink-0 flex-1 flex items-center">
<img
className="h-10 w-10 rounded-md overflow-hidden"
src={_.find(appAccessList, ['name', item.name!])?.image}
alt={item.name ?? 'Image'}
/>
<h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
{_.find(appAccessList, ['name', item.name!])?.label}
</h3>
return (
<li className="py-4" key={item.name}>
<div className="flex items-center space-x-4">
<div className="flex-shrink-0 flex-1 flex items-center">
<img
className="h-10 w-10 rounded-md overflow-hidden"
src={_.find(appAccessList, ['name', item.name!])?.image}
alt={item.name ?? 'Image'}
/>
<h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
{_.find(appAccessList, ['name', item.name!])?.label}
</h3>
</div>
<div>
<Select
key={item.id}
control={control}
name={`app_roles.${index}.role`}
disabled={isAdminRoleSelected}
options={[
{ value: UserRole.NoAccess, name: 'No Access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
/>
</div>
</div>
<div>
<Select
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' },
{ value: UserRole.Admin, name: 'Admin' },
]}
/>
</div>
</div>
</li>
);
})}
</ul>
</li>
);
})}
</ul>
</div>
</div>
</div>
)}
</div>
)}
</div>

12
src/services/users/hooks/use-users.ts
View file

@ -3,7 +3,9 @@ import {
getUsers,
fetchUsers,
fetchUserById,
fetchPersonalInfo,
updateUserById,
updatePersonalInfo,
createUser,
deleteUser,
clearCurrentUser,
@ -26,6 +28,10 @@ export function useUsers() {
return dispatch(fetchUserById(id));
}
function loadPersonalInfo() {
return dispatch(fetchPersonalInfo());
}
function clearSelectedUser() {
return dispatch(clearCurrentUser());
}
@ -34,6 +40,10 @@ export function useUsers() {
return dispatch(updateUserById(data));
}
function editPersonalInfo(data: any) {
return dispatch(updatePersonalInfo(data));
}
function createNewUser(data: any) {
return dispatch(createUser(data));
}
@ -51,7 +61,9 @@ export function useUsers() {
user,
loadUser,
loadUsers,
loadPersonalInfo,
editUserById,
editPersonalInfo,
userModalLoading,
userTableLoading,
createNewUser,

48
src/services/users/redux/actions.ts
View file

@ -76,6 +76,26 @@ export const fetchUserById = (id: string) => async (dispatch: Dispatch<any>) =>
dispatch(setUserModalLoading(false));
};
export const fetchPersonalInfo = () => async (dispatch: Dispatch<any>) => {
dispatch(setUserModalLoading(true));
try {
const { data } = await performApiCall({
path: '/me',
method: 'GET',
});
dispatch({
type: UserActionTypes.FETCH_USER,
payload: transformUser(data),
});
} catch (err) {
console.error(err);
}
dispatch(setUserModalLoading(false));
};
export const updateUserById = (user: any) => async (dispatch: Dispatch<any>, getState: any) => {
dispatch(setUserModalLoading(true));
@ -110,6 +130,34 @@ export const updateUserById = (user: any) => async (dispatch: Dispatch<any>, get
dispatch(setUserModalLoading(false));
};
export const updatePersonalInfo = (user: any) => async (dispatch: Dispatch<any>) => {
dispatch(setUserModalLoading(true));
try {
const { data } = await performApiCall({
path: '/me',
method: 'PUT',
body: transformRequestUser(user),
});
dispatch({
type: UserActionTypes.UPDATE_USER,
payload: transformUser(data),
});
dispatch({
type: AuthActionTypes.UPDATE_AUTH_USER,
payload: transformUser(data),
});
showToast('Personal information updated successfully.', ToastType.Success);
} catch (err) {
console.error(err);
}
dispatch(setUserModalLoading(false));
};
export const createUser = (user: any) => async (dispatch: Dispatch<any>) => {
dispatch(setUserModalLoading(true));