Show role comments and use feature flags

Comments and contact person had feature flags created for their
visibility some time ago, but we missed a couple of sections in the
frontend. In addition, comments that were set on a role during
invitation was invisible later, defeating the purpose. They are now
visible if comments are enabled.

Resolves: GREG-197

frontend/src/interfaces/index.ts

@@ -52,6 +52,7 @@ export type Role = {
   end_date: Date
   max_days: number
   contact_person_unit: string | null
+  comments: string | null
 }
 
 export type FetchedRole = {
@@ -64,6 +65,7 @@ export type FetchedRole = {
   end_date: string
   max_days: number
   contact_person_unit: string | null
+  comments: string | null
 }
 
 export type ConsentType = {

frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx

@@ -16,6 +16,7 @@ import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
 import { DatePicker } from '@mui/lab'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 import { getRoleName, getRoleOuName, submitJsonOpts } from 'utils'
+import { useFeatureContext } from 'contexts/featureContext'
 
 interface GuestRoleInfoProps {
   guest: Guest
@@ -95,6 +96,7 @@ const TableContainer = styled(TableContainerMui)({
 export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
   const { pid, id } = useParams<GuestRoleInfoParams>()
   const [t] = useTranslation('common')
+  const { displayContactAtUnit, displayComment } = useFeatureContext()
   const [role, setRole] = useState<Role>({
     id: '',
     name_nb: '',
@@ -105,6 +107,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
     end_date: new Date(),
     max_days: 365,
     contact_person_unit: null,
+    comments: null,
   })
   // Find the role info relevant for this page
   const getRoleInfo = () => {
@@ -232,13 +235,24 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
                 <TableCell align="left">{getRoleOuName(role)}</TableCell>
                 <TableCell align="left" />
               </TableRow>
-              <TableRow>
-                <TableCell align="left" sx={{ fontWeight: 'bold' }}>
-                  {t('sponsor.contactPerson')}
-                </TableCell>
-                <TableCell align="left">{role.contact_person_unit}</TableCell>
-                <TableCell align="left" />
-              </TableRow>
+              {displayContactAtUnit && (
+                <TableRow>
+                  <TableCell align="left" sx={{ fontWeight: 'bold' }}>
+                    {t('sponsor.contactPerson')}
+                  </TableCell>
+                  <TableCell align="left">{role.contact_person_unit}</TableCell>
+                  <TableCell align="left" />
+                </TableRow>
+              )}
+              {displayComment && (
+                <TableRow>
+                  <TableCell align="left" sx={{ fontWeight: 'bold' }}>
+                    {t('input.comment')}
+                  </TableCell>
+                  <TableCell align="left">{role.comments}</TableCell>
+                  <TableCell align="left" />
+                </TableRow>
+              )}
             </TableBody>
           </Table>
         </TableContainer>

frontend/src/routes/sponsor/guest/newGuestRole/index.tsx

@@ -25,6 +25,7 @@ import { useTranslation } from 'react-i18next'
 import { Link, useHistory, useParams } from 'react-router-dom'
 import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
 import { submitJsonOpts } from 'utils'
+import { useFeatureContext } from 'contexts/featureContext'
 
 type AddRoleFormData = {
   orgunit: number
@@ -104,6 +105,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
     setValue,
     getValues,
   } = useForm<AddRoleFormData>()
+  const { displayContactAtUnit, displayComment } = useFeatureContext()
 
   const { pid } = useParams<GuestInfoParams>()
   const history = useHistory()
@@ -279,20 +281,25 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
               />
             )}
           />
-          <TextField
-            id="contact"
-            label={t('input.contactPersonUnit')}
-            multiline
-            rows={5}
-            {...register('contact_person_unit')}
-          />
-          <TextField
-            id="comments"
-            label={t('input.comment')}
-            multiline
-            rows={5}
-            {...register('comments')}
-          />
+          {displayContactAtUnit && (
+            <TextField
+              id="contact"
+              label={t('input.contactPersonUnit')}
+              multiline
+              rows={5}
+              {...register('contact_person_unit')}
+            />
+          )}
+          {displayComment && (
+            <TextField
+              id="comments"
+              label={t('input.comment')}
+              multiline
+              rows={5}
+              {...register('comments')}
+            />
+          )}
+
           <FormControlLabel
             control={
               <Checkbox

frontend/src/utils/index.ts

@@ -147,6 +147,7 @@ export function parseRole(role: FetchedRole): Role {
     end_date: parseISO(role.end_date),
     max_days: role.max_days,
     contact_person_unit: role.contact_person_unit,
+    comments: role.comments,
   }
 }
 

greg/api/serializers/role.py

@@ -78,6 +78,7 @@ class SpecialRoleSerializer(serializers.ModelSerializer):
             "end_date",
             "max_days",
             "contact_person_unit",
+            "comments",
         ]
         read_only_fields = [
             "contact_person_unit",