change settings page add roles selectors and validators

src/locales/en.ts

@@ -29,6 +29,8 @@ const en = {
         realmUrlPH: 'https://your.oidp.server.com/realms/frigate-realm',
         adminRole: 'Select admin role',
         birdseyeRole: 'Select birds eye role user',
+        emptyRolesNotify: 'List of roles are empty. You can manually start updating on server:',
+        updateRoles: 'Update Roles',
     },
     systemPage: {
         cameraStats: 'Cameras stats',
@@ -128,6 +130,7 @@ const en = {
     youCanRetryOrGoToMain: "You can retry or return to the main page",
     successfully: "Sucessfully",
     successfullySaved: "Sucessfully saved",
+    successfullyUpdated: "Sucessfully updated",
     error: "Error",
     errors: {
         emptyResponse: 'Empty response',

src/locales/ru.ts

@@ -26,7 +26,10 @@ const ru = {
         realmUrl: 'OIDP realm URL путь',
         realmUrlPH: 'https://your.oidp.server.com/realms/frigate-realm',
         adminRole: 'Выбери роль администратора',
-        birdseyeRole: 'Выбери роль birdseye пользователя',},
+        birdseyeRole: 'Выбери роль birdseye пользователя',
+        emptyRolesNotify: 'Список ролей пуст. Вы можете вручную запустить обновление на сервере:',
+        updateRoles: 'Обновить роли',
+    },
     systemPage: {
         cameraStats: 'Статистика Камер',
         storageStats: 'Статистика Хранения',
@@ -106,7 +109,7 @@ const ru = {
     second: 'Час',
     events: 'События',
     notHaveEvents: 'Событий нет',
-    selectHost:'Выбери хост',
+    selectHost: 'Выбери хост',
     selectCamera: 'Выбери камеру',
     selectRange: 'Выбери период',
     changeTheme: "Изменить тему",
@@ -125,6 +128,7 @@ const ru = {
     youCanRetryOrGoToMain: "Вы можете повторить или вернуться на главную",
     successfully: "Успешно",
     successfullySaved: "Успешно сохранено",
+    successfullyUpdated: "Успешно обновлено",
     error: "Ошибка",
     errors: {
         emptyResponse: 'Пустой ответ',

src/pages/SettingsPage.tsx

@@ -6,7 +6,7 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Context } from '..';
 import { useAdminRole } from '../hooks/useAdminRole';
-import { frigateApi } from '../services/frigate.proxy/frigate.api';
+import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import { GetRole } from '../services/frigate.proxy/frigate.schema';
 import CenterLoader from '../shared/components/loaders/CenterLoader';
 import { dimensions } from '../shared/dimensions/dimensions';
@@ -35,7 +35,8 @@ const SettingsPage = () => {
 
     const isMobile = useMediaQuery(dimensions.mobileSize)
 
-    const mutation = useMutation({
+    const getRoles = useMutation({
+        mutationKey: [frigateQueryKeys.getRoles],
         mutationFn: frigateApi.getRoles,
         onSuccess: (data) => {
             setAllRoles(data)
@@ -44,7 +45,7 @@ const SettingsPage = () => {
 
     const handleOIDPConfigValid = (valid: boolean) => {
         setShowRoles(valid)
-        mutation.mutate()
+        getRoles.mutate()
     }
 
     if (!isAdmin) return <Forbidden />
@@ -59,8 +60,11 @@ const SettingsPage = () => {
             <Flex direction='column' h='100%' w='100%' justify='stretch'>
                 <OIDPSettingsForm isConfigValid={handleOIDPConfigValid} />
                 {
-                    showRoles && allRoles && allRoles.length > 0 ?
+                    showRoles && allRoles ?
-                        <RolesSettingsForm allRoles={allRoles} />
+                        <RolesSettingsForm
+                            allRoles={allRoles}
+                            refetchRoles={() => getRoles.mutate()}
+                        />
                         : null
                 }
             </Flex>

src/services/frigate.proxy/frigate.api.ts

@@ -55,6 +55,7 @@ export const frigateApi = {
         return res.data
     }),
     getRoles: () => instanceApi.get<GetRole[]>('apiv1/roles').then(res => res.data),
+    putRoles: () => instanceApi.put<GetRole[]>('apiv1/roles').then(res => res.data),
     putRoleWCameras: (roleId: string, cameraIDs: string[]) => instanceApi.put<GetRoleWCameras>(`apiv1/roles/${roleId}/cameras`,
         {
             cameraIDs: cameraIDs
@@ -237,6 +238,7 @@ export const frigateQueryKeys = {
     getRecordings: 'recordings-frigate',
     getEvents: 'events-frigate',
     getRoles: 'roles',
+    putRoles: 'putRoles',
     getRoleWCameras: 'roles-cameras',
     getUsersByRole: 'users-role',
     getAdminRole: 'admin-role',

src/widgets/RolesSettingsForm.tsx

@@ -7,7 +7,7 @@ import RoleSelectFilter from '../shared/components/filters/RoleSelectFilter';
 import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
 import { GetRole } from '../services/frigate.proxy/frigate.schema';
 import { isProduction } from '../shared/env.const';
-import { Flex, Button } from '@mantine/core';
+import { Flex, Button, Text } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react';
 import { v4 } from 'uuid';
@@ -24,11 +24,13 @@ interface Roles {
 }
 
 interface RolesSettingsFormProps {
-    allRoles: GetRole[]
+    allRoles: GetRole[],
+    refetchRoles?: () => void,
 }
 
 const RolesSettingsForm: React.FC<RolesSettingsFormProps> = ({
-    allRoles
+    allRoles,
+    refetchRoles
 }) => {
     const [roles, setRoles] = useState<Roles>()
     const { t } = useTranslation()
@@ -56,6 +58,39 @@ const RolesSettingsForm: React.FC<RolesSettingsFormProps> = ({
         },
     })
 
+    const updateRoles = useMutation({
+        mutationFn: async () => frigateApi.putRoles().catch(error => {
+            if (error.response && error.response.data) {
+                return Promise.reject(error.response.data)
+            }
+            return Promise.reject(error)
+        }),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [frigateQueryKeys.getRoles] })
+            notifications.show({
+                id: v4(),
+                withCloseButton: true,
+                autoClose: 5000,
+                title: t('successfully'),
+                message: t('successfullyUpdated'),
+                color: 'green',
+                icon: <IconCircleCheck />
+            })
+            if (refetchRoles) refetchRoles()
+        },
+        onError: (e) => {
+            notifications.show({
+                id: e.message,
+                withCloseButton: true,
+                autoClose: false,
+                title: t('error'),
+                message: e.message,
+                color: 'red',
+                icon: <IconAlertCircle />,
+            })
+        }
+    })
+
     const save = useMutation({
         mutationFn: async () => {
             if (roles?.adminRole?.name) {
@@ -141,6 +176,12 @@ const RolesSettingsForm: React.FC<RolesSettingsFormProps> = ({
 
     if (isPending) return <CogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
+    if (allRoles.length < 1) return (
+        <>
+            <Text align='center' mt='lg'>{t('settingsPage.emptyRolesNotify')}</Text>
+            <Button mt='md' onClick={() => updateRoles.mutate()}>{t('settingsPage.updateRoles')}</Button>
+        </>
+    )
 
     return (
         <>