✨ specialists can nominate other specialists (#374)

This allows specialists to nominate and demote other specialists of the same specialty, through the same screen as the admins.

In order to write an e2e test for this use case, we needed e2e tests to have more control over the user that is stored on the front end, so we had to refactor how the DISABLE_AUTH flag works.

Author: thibaudbrault

client/src/components/Authenticated/Authenticated.jsx

@@ -5,21 +5,20 @@ import { Redirect } from 'react-router-dom'
 
 import { useAuth } from 'contexts'
 
-const Authenticated = ({ location, reverse, redirect, children, admin }) => {
-  const { isAuth, isAdmin } = useAuth()
+const Authenticated = ({ location, reverse, redirect, children, admin, specialist }) => {
+  const { isAuth, isAdmin, isSpecialist } = useAuth()
+  const currentURL = location.pathname + location.search
 
-  if (import.meta.env.VITE_DISABLE_AUTH === 'true') {
+  if (admin && isAdmin) {
     return children
   }
 
-  const currentURL = location.pathname + location.search
+  if (specialist && isSpecialist) {
+    return children
+  }
 
-  if (admin) {
-    if (!isAdmin) {
-      return redirect ? <Redirect to="/" /> : ''
-    } else {
-      return children
-    }
+  if (admin || specialist) {
+    return redirect ? <Redirect to="/" /> : ''
   }
 
   if ((isAuth && !reverse) || (!isAuth && reverse)) {

client/src/components/PrivateRoute/PrivateRoute.jsx

@@ -4,11 +4,11 @@ import { Route } from 'react-router-dom'
 
 import Authenticated from 'components/Authenticated'
 
-const PrivateRoute = ({ component: Component, render, admin, ...otherProps }) => (
+const PrivateRoute = ({ component: Component, render, admin, specialist, ...otherProps }) => (
   <Route
     {...otherProps}
     render={props => (
-      <Authenticated {...props} admin={admin} redirect="/auth/login">
+      <Authenticated {...props} admin={admin} specialist={specialist} redirect="/auth/login">
         {Component ? <Component {...props} {...otherProps} /> : render(props)}
       </Authenticated>
     )}

client/src/components/UsersList/components/Specialist.jsx

@@ -2,11 +2,14 @@ import { useMutation } from '@apollo/client'
 import { alert, getIntl } from 'services'
 import { UPDATE_SPECIALTIES } from '../queries'
 import SpecialtiesList from './SpecialtiesList'
+import { useAuth, useUser } from 'contexts'
 
 const Specialist = ({ specialist, services, onUpdateSpecialty }) => {
   const intl = getIntl(Specialist)
 
   const specialties = specialist.specialties
+  const user = useUser()
+  const { isAdmin } = useAuth()
 
   const onSpecialtyChange = params => {
     const { action, data } = params
@@ -63,7 +66,7 @@ const Specialist = ({ specialist, services, onUpdateSpecialty }) => {
         {services && (
           <SpecialtiesList
             specialties={specialties}
-            services={services}
+            userSpecialties={isAdmin ? services : user.specialties}
             onChange={onSpecialtyChange}
           />
         )}

client/src/components/UsersList/components/SpecialtiesList.jsx

@@ -3,7 +3,7 @@ import { Button } from 'components'
 import { useClickOutside } from 'helpers'
 import { useState } from 'react'
 
-const SpecialtiesList = ({ specialties, services, onChange }) => {
+const SpecialtiesList = ({ specialties, userSpecialties, onChange }) => {
   const [opened, setOpened] = useState(false)
   const ref = useClickOutside(() => setOpened(false))
 
@@ -16,26 +16,26 @@ const SpecialtiesList = ({ specialties, services, onChange }) => {
         onClick={() => setOpened(opened => !opened)}
       />
       <ul ref={ref} className="specialtiesList" style={{ display: opened ? 'flex' : 'none' }}>
-        {services.map(service => {
-          const isSelected = specialties?.filter(({ id }) => id === service.id).length > 0
+        {userSpecialties.map(specialty => {
+          const isSelected = specialties?.filter(({ id }) => id === specialty.id).length > 0
           return (
             <li
-              key={service.id}
+              key={specialty.id}
               className={cn('specialtyEl', {
                 selected: isSelected
               })}
               onClick={() =>
                 onChange(
                   isSelected
                     ? {
-                        data: specialties.filter(specialty => specialty.id !== service.id),
+                        data: specialties.filter(specialty => specialty.id !== specialty.id),
                         action: 'delete'
                       }
-                    : { data: [...specialties, service], action: 'add' }
+                    : { data: [...specialties, specialty], action: 'add' }
                 )
               }
             >
-              <button className="specialtyButton">{service.name}</button>
+              <button className="specialtyButton">{specialty.name}</button>
             </li>
           )
         })}

client/src/contexts/Auth/hooks.js

@@ -8,6 +8,7 @@ export const useAuth = () => {
   const isAuth = !!(auth.session && auth.session.expiresAt > new Date().getTime() && auth.user)
   const wasAuth = !!(auth.session && auth.session.expiresAt < new Date().getTime() && auth.user)
   const isAdmin = isAuth && auth.user && auth.user.admin
+  const isSpecialist = isAuth && auth.user && (auth.user.specialties?.length > 0 ?? false)
 
-  return { ready: auth.ready, isAuth, wasAuth, isAdmin, ...actions }
+  return { ready: auth.ready, isAuth, wasAuth, isAdmin, isSpecialist, ...actions }
 }

client/src/contexts/User/queries.js

@@ -9,6 +9,7 @@ export const GET_ME = gql`
       email
       picture
       specialties {
+        id
         name
       }
     }

client/src/scenes/App/AppBody.jsx

@@ -30,7 +30,7 @@ const AppBody = () => {
             <Route path="/auth" component={Auth} />
             <PrivateRoute path="/q" component={Question} />
             <PrivateRoute path="/user-profile" component={UserProfile} />
-            <PrivateRoute path="/settings" component={Settings} admin />
+            <PrivateRoute path="/settings" component={Settings} admin specialist />
             <PrivateRoute component={NotFound} />
           </Switch>
         </ErrorBoundary>

client/src/scenes/App/components/Navbar/components/UserMenu/UserMenu.jsx

@@ -23,7 +23,7 @@ const UserMenu = ({ history }) => {
       <DropdownItem icon="account_box" path="/user-profile">
         {intl('profile')}
       </DropdownItem>
-      <Authenticated admin>
+      <Authenticated admin specialist>
         <DropdownItem icon="settings" path="/settings">
           {intl('settings')}
         </DropdownItem>

client/src/scenes/Auth/Login.jsx

@@ -15,7 +15,7 @@ const Login = ({ location }) => {
 
   const { login, renewAuth, isAuth, wasAuth } = useAuth()
 
-  if (isAuth || import.meta.env.VITE_DISABLE_AUTH === 'true') {
+  if (isAuth) {
     return <Redirect to="/" />
   }
 

client/src/scenes/Settings/Settings.jsx

@@ -3,7 +3,7 @@ import { useMutation } from '@apollo/client'
 
 import { alert, getIntl } from 'services'
 
-import { useConfiguration } from 'contexts'
+import { useAuth, useConfiguration } from 'contexts'
 
 import { Tabs, Button } from 'components'
 import Card, { CardTitle, CardText, CardActions } from 'components/Card'
@@ -16,25 +16,18 @@ import { General, Tags, Synonyms, Integrations, Specialists } from './scenes'
 
 import './Settings.scss'
 
-let initState
-
-if (import.meta.env.VITE_DISABLE_AUTH === 'true') {
-  initState = conf => ({
-    ...conf,
-    bugReporting: conf.bugReporting || 'GITHUB'
-  })
-} else {
-  initState = conf => ({
-    ...conf,
-    synonyms: synonymsToList(conf.algoliaSynonyms),
-    authorizedDomains: conf.authorizedDomains.join(', '),
-    bugReporting: conf.bugReporting || 'GITHUB'
-  })
-}
+const initState = conf => ({
+  ...conf,
+  synonyms: synonymsToList(conf.algoliaSynonyms),
+  authorizedDomains: conf.authorizedDomains.join(', '),
+  bugReporting: conf.bugReporting || 'GITHUB'
+})
 
 const Settings = ({ configuration: conf }) => {
   const intl = getIntl(Settings)
 
+  const { isAdmin, isSpecialist } = useAuth()
+
   const configuration = useConfiguration()
 
   const [loading, setLoading] = useState(false)
@@ -90,13 +83,17 @@ const Settings = ({ configuration: conf }) => {
         </CardTitle>
         <CardText>
           <Tabs>
-            <General state={state} dispatch={dispatch} loading={loading} />
-            <Tags state={state} onTagsChange={onTagsChange} />
-            {import.meta.env.VITE_DISABLE_AUTH !== 'true' && (
-              <Synonyms state={state} dispatch={dispatch} loading={loading} />
+            {isAdmin && (
+              <>
+                <General state={state} dispatch={dispatch} loading={loading} />
+                <Tags state={state} onTagsChange={onTagsChange} />
+                <Synonyms state={state} dispatch={dispatch} loading={loading} />
+              </>
+            )}
+            {(isAdmin || isSpecialist) && (
+              <Specialists state={state} dispatch={dispatch} loading={loading} />
             )}
-            <Specialists state={state} dispatch={dispatch} loading={loading} />
-            <Integrations state={state} dispatch={dispatch} loading={loading} />
+            {isAdmin && <Integrations state={state} dispatch={dispatch} loading={loading} />}
           </Tabs>
         </CardText>
         <CardActions>