Select and search button and colors (#7108)

* Select and search button and colors * gave editors access to IX * missing translations * remoeved unnecesary tests * deleted unused vars
huridocs · Aug 7, 2024 · d50227a · d50227a
1 parent 6680b7a
commit d50227a
Show file tree

Hide file tree

Showing 20 changed files with 213 additions and 161 deletions.
diff --git a/app/api/suggestions/extractorsRoutes.ts b/app/api/suggestions/extractorsRoutes.ts
@@ -11,7 +11,7 @@ export const extractorsRoutes = (app: Application) => {
   app.post(
     '/api/ixextractors',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     validateAndCoerceRequest({
       type: 'object',
       properties: {
@@ -36,7 +36,7 @@ export const extractorsRoutes = (app: Application) => {
   app.put(
     '/api/ixextractors',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     validateAndCoerceRequest({
       type: 'object',
       properties: {
@@ -67,7 +67,7 @@ export const extractorsRoutes = (app: Application) => {
   app.delete(
     '/api/ixextractors',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     parseQuery,
     validateAndCoerceRequest({
       type: 'object',
@@ -90,7 +90,7 @@ export const extractorsRoutes = (app: Application) => {
   app.get(
     '/api/ixextractors',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     validateAndCoerceRequest({
       type: 'object',
       properties: {

diff --git a/app/api/suggestions/routes.ts b/app/api/suggestions/routes.ts
@@ -56,7 +56,7 @@ export const suggestionsRoutes = (app: Application) => {
   app.get(
     '/api/suggestions/',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     parseQuery,
     validateAndCoerceRequest({
       type: 'object',
@@ -101,7 +101,7 @@ export const suggestionsRoutes = (app: Application) => {
   app.get(
     '/api/suggestions/aggregation',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     parseQuery,
     validateAndCoerceRequest({
       type: 'object',
@@ -132,7 +132,7 @@ export const suggestionsRoutes = (app: Application) => {
   app.post(
     '/api/suggestions/stop',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     extractorIdRequestValidation('body'),
     async (req, res, _next) => {
       await processTrainFunction(IX.stopModel, req, res);
@@ -142,7 +142,7 @@ export const suggestionsRoutes = (app: Application) => {
   app.post(
     '/api/suggestions/train',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     extractorIdRequestValidation('body'),
     async (req, res, _next) => {
       await processTrainFunction(IX.trainModel, req, res);
@@ -152,7 +152,7 @@ export const suggestionsRoutes = (app: Application) => {
   app.post(
     '/api/suggestions/status',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     extractorIdRequestValidation('body'),
     async (req, res, _next) => {
       await processTrainFunction(IX.status, req, res);
@@ -162,7 +162,7 @@ export const suggestionsRoutes = (app: Application) => {
   app.post(
     '/api/suggestions/accept',
     serviceMiddleware,
-    needsAuthorization(['admin']),
+    needsAuthorization(['admin', 'editor']),
     validateAndCoerceRequest({
       type: 'object',
       properties: {

diff --git a/app/api/suggestions/specs/routes.spec.ts b/app/api/suggestions/specs/routes.spec.ts
@@ -11,7 +11,6 @@ import {
   shared2esId,
   shared6enId,
   stateFilterFixtures,
-  suggestionSharedId6Enemy,
   suggestionSharedId6Title,
 } from 'api/suggestions/specs/fixtures';
 import { suggestionsRoutes } from 'api/suggestions/routes';
@@ -317,14 +316,6 @@ describe('suggestions routes', () => {
         expect(response.status).toBe(400);
       });
     });
-
-    describe('authentication', () => {
-      it('should reject with unauthorized when the user does not have the admin role', async () => {
-        user = { username: 'user 1', role: 'editor' };
-        const response = await request(app).get('/api/suggestions/').query({}).expect(401);
-        expect(response.unauthorized).toBe(true);
-      });
-    });
   });
 
   describe('POST /api/suggestions/status', () => {
@@ -338,14 +329,6 @@ describe('suggestions routes', () => {
 
       expect(response.body).toMatchObject({ status: 'ready' });
     });
-    it('should reject with unauthorized when user has not admin role', async () => {
-      user = { username: 'user 1', role: 'editor' };
-      const response = await request(app)
-        .post('/api/suggestions/status')
-        .send({ extractorId: factory.id('super_powers_extractor').toString() })
-        .expect(401);
-      expect(response.unauthorized).toBe(true);
-    });
   });
 
   describe('POST /api/suggestions/train', () => {
@@ -357,14 +340,6 @@ describe('suggestions routes', () => {
 
       expect(response.body).toMatchObject({ status: 'processing' });
     });
-    it('should reject with unauthorized when user has not admin role', async () => {
-      user = { username: 'user 1', role: 'editor' };
-      const response = await request(app)
-        .post('/api/suggestions/train')
-        .send({ extractorId: factory.id('super_powers_extractor').toString() })
-        .expect(401);
-      expect(response.unauthorized).toBe(true);
-    });
   });
 
   describe('POST /api/suggestions/accept', () => {
@@ -397,22 +372,6 @@ describe('suggestions routes', () => {
       expect(search.indexEntities).toHaveBeenCalledWith({ sharedId: 'shared6' }, '+fullText');
     });
 
-    it('should reject with unauthorized when user has not admin role', async () => {
-      user = { username: 'user 1', role: 'editor' };
-      const response = await request(app)
-        .post('/api/suggestions/accept')
-        .send({
-          allLanguages: true,
-          suggestion: {
-            _id: suggestionSharedId6Enemy,
-            sharedId: 'shared6',
-            entityId: shared6enId,
-          },
-        })
-        .expect(401);
-      expect(response.unauthorized).toBe(true);
-    });
-
     it('should handle partial acceptance parameters for multiselects', async () => {
       await request(app)
         .post('/api/suggestions/accept')
@@ -461,17 +420,6 @@ describe('aggregation routes', () => {
       });
     });
 
-    describe('authentication', () => {
-      it('should reject with unauthorized when the user does not have the admin role', async () => {
-        user = { username: 'user 1', role: 'editor' };
-        const response = await request(app)
-          .get('/api/suggestions/aggregation')
-          .query({})
-          .expect(401);
-        expect(response.unauthorized).toBe(true);
-      });
-    });
-
     it('should return the aggregation of suggestions', async () => {
       const response = await request(app)
         .get('/api/suggestions/aggregation')

diff --git a/app/react/App/styles/globals.css b/app/react/App/styles/globals.css
@@ -1733,11 +1733,6 @@ input[type="range"]::-ms-fill-lower {
   margin-right: 0.25rem;
 }
 
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -1758,6 +1753,11 @@ input[type="range"]::-ms-fill-lower {
   margin-bottom: 1rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .-ml-0 {
   margin-left: -0px;
 }
@@ -2984,6 +2984,11 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(253 246 178 / var(--tw-bg-opacity));
 }
 
+.bg-success-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -3555,6 +3560,11 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(114 59 19 / var(--tw-text-opacity));
 }
 
+.text-orange-800 {
+  --tw-text-opacity: 1;
+  color: rgb(138 44 13 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -3779,6 +3789,11 @@ input[type="range"]::-ms-fill-lower {
   border-color: rgb(165 180 252 / var(--tw-border-opacity));
 }
 
+.hover\:border-primary-800:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 48 163 / var(--tw-border-opacity));
+}
+
 .hover\:border-success-700:hover {
   --tw-border-opacity: 1;
   border-color: rgb(21 128 61 / var(--tw-border-opacity));
@@ -3829,6 +3844,11 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(205 219 254 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-primary-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 48 163 / var(--tw-bg-opacity));

diff --git a/app/react/ProtectedRoute.tsx b/app/react/ProtectedRoute.tsx
@@ -1,35 +1,34 @@
 import React, { ReactElement } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { store } from 'app/store';
-import { UserRole } from 'shared/types/userSchema';
 import { ClientSettings } from 'app/apiResponseTypes';
 
 const ProtectedRoute = ({
   children,
-  onlyAdmin,
+  allowedRoles,
 }: {
   children: ReactElement;
-  onlyAdmin?: boolean;
+  allowedRoles?: string[];
 }) => {
   const userId = store?.getState().user.get('_id');
-
-  if (onlyAdmin && store?.getState().user.get('role') === UserRole.ADMIN) {
+  const userRole = store?.getState().user.get('role') || '';
+  if (allowedRoles && allowedRoles.includes(userRole)) {
     return children || <Outlet />;
   }
 
-  if (!onlyAdmin && userId) {
+  if (!allowedRoles && userId) {
     return children || <Outlet />;
   }
 
   return <Navigate to="/login" replace />;
 };
 
 const adminsOnlyRoute = (element: ReactElement) => (
-  <ProtectedRoute onlyAdmin>{element}</ProtectedRoute>
+  <ProtectedRoute allowedRoles={['admin']}>{element}</ProtectedRoute>
 );
 
 const privateRoute = (element: ReactElement, settings: ClientSettings | undefined) =>
   !settings?.private ? element : <ProtectedRoute>{element}</ProtectedRoute>;
 
 const loggedInUsersRoute = (element: ReactElement) => <ProtectedRoute>{element}</ProtectedRoute>;
-export { loggedInUsersRoute, adminsOnlyRoute, privateRoute };
+export { loggedInUsersRoute, adminsOnlyRoute, privateRoute, ProtectedRoute };
diff --git a/app/react/Routes.tsx b/app/react/Routes.tsx
@@ -47,7 +47,12 @@ import { ActivityLog, activityLogLoader } from 'V2/Routes/Settings/ActivityLog';
 import { CustomUploads, customUploadsLoader } from 'V2/Routes/Settings/CustomUploads/CustomUploads';
 import { FiltersTable, filtersLoader } from 'V2/Routes/Settings/Filters';
 import { RouteErrorBoundary, GeneralError } from 'V2/Components/ErrorHandling';
-import { loggedInUsersRoute, adminsOnlyRoute, privateRoute } from './ProtectedRoute';
+import {
+  loggedInUsersRoute,
+  adminsOnlyRoute,
+  privateRoute,
+  ProtectedRoute,
+} from './ProtectedRoute';
 import { getIndexElement } from './getIndexElement';
 import { PageView } from './Pages/PageView';
 import ResetPassword from './Users/ResetPassword';
@@ -116,13 +121,21 @@ const getRoutesLayout = (
       <Route path="metadata_extraction">
         <Route
           index
-          element={adminsOnlyRoute(<IXDashboard />)}
+          element={
+            <ProtectedRoute allowedRoles={['admin', 'editor']}>
+              <IXDashboard />
+            </ProtectedRoute>
+          }
           loader={IXdashboardLoader(headers)}
         />
         <Route
           path="suggestions/:extractorId"
           loader={IXSuggestionsLoader(headers)}
-          element={adminsOnlyRoute(<IXSuggestions />)}
+          element={
+            <ProtectedRoute allowedRoles={['admin', 'editor']}>
+              <IXSuggestions />
+            </ProtectedRoute>
+          }
         />
       </Route>
       <Route path="relationship-types">

diff --git a/app/react/Settings/components/SettingsNavigation.tsx b/app/react/Settings/components/SettingsNavigation.tsx
@@ -71,7 +71,7 @@ const SettingsNavigationComponent = ({ allowcustomJS }: { allowcustomJS: boolean
           </I18NLink>
         </NeedAuthorization>
         <FeatureToggle feature="metadataExtraction.url">
-          <NeedAuthorization roles={['admin']}>
+          <NeedAuthorization roles={['admin', 'editor']}>
             <I18NLink
               to="settings/metadata_extraction"
               activeclassname="active"

diff --git a/app/react/V2/Components/Forms/MultiselectList.tsx b/app/react/V2/Components/Forms/MultiselectList.tsx
@@ -54,7 +54,6 @@ const MultiselectList = ({
   const [selectedItems, setSelectedItems] = useState<string[]>(value || []);
   const [showAll, setShowAll] = useState<boolean>(!(startOnSelected && selectedItems.length));
   const [searchTerm, setSearchTerm] = useState('');
-  const [externalSearchTerm, setExternalSearchTerm] = useState(search);
   const [filteredItems, setFilteredItems] = useState(items);
   const [openGroups, setOpenGroups] = useState<string[]>([]);
   const optionsRef = useRef<HTMLUListElement>(null);
@@ -71,14 +70,13 @@ const MultiselectList = ({
 
   useEffect(() => {
     setSearchTerm(search);
-    setExternalSearchTerm(search);
   }, [search]);
 
   useEffect(() => {
-    if (externalSearchTerm) {
+    if (search) {
       optionsRef.current?.querySelector('input')?.focus();
     }
-  }, [externalSearchTerm, filteredItems]);
+  }, [search, filteredItems]);
 
   useEffect(() => {
     if (value) {
@@ -132,7 +130,6 @@ const MultiselectList = ({
   }, [items, searchTerm, showAll, selectedItems]);
 
   const handleSelect = (_value: string) => {
-    setExternalSearchTerm('');
     let newValues;
     if (singleSelect) {
       newValues = selectedItems.includes(_value) ? [] : [_value];
@@ -240,7 +237,7 @@ const MultiselectList = ({
               <div className="w-3 h-3 text-sm">
                 {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
               </div>
-              <Translate>Properties</Translate>
+              <Translate>Group</Translate>
             </button>
           </div>
           {isOpen && <ul className="pl-4">{group.items?.map(renderItem)}</ul>}