Add publish email option to TestListForm and update related components (#268)

Author: majakomel

components/form/TestListForm.tsx

@@ -1,7 +1,7 @@
 import { yupResolver } from '@hookform/resolvers/yup'
 import Compact from '@uiw/react-color-compact'
 import { format } from 'date-fns'
-import { Input } from 'ooni-components'
+import { Checkbox, Input } from 'ooni-components'
 import { Controller, FormProvider, useForm } from 'react-hook-form'
 import { FormattedMessage, useIntl } from 'react-intl'
 import * as Yup from 'yup'
@@ -51,6 +51,7 @@ export type TestList = {
   icon: string
   color: string
   author: string
+  publish_email: boolean
   expiration_date: string
   nettests: Nettest[]
 }
@@ -88,6 +89,7 @@ const validationSchema = Yup.object({
   icon: Yup.string().defined(),
   color: Yup.string().defined(),
   author: Yup.string().defined(),
+  publish_email: Yup.boolean().defined(),
   expiration_date: Yup.string()
     .required('TestListForm.Validation.Required')
     .test(
@@ -274,7 +276,7 @@ const TestListForm = ({
                       {...field}
                       label={`${intl.formatMessage({ id: 'TestListForm.Label.Description' })} *`}
                       placeholder=""
-                      minHeight="78px"
+                      style={{ minHeight: '78px' }}
                       error={
                         !!fieldState?.error?.message &&
                         intl.formatMessage({ id: fieldState?.error?.message })
@@ -287,20 +289,52 @@ const TestListForm = ({
                 <IntlFields name="description_intl" inputType="textarea" />
               </StyledInputWrapper>
               {isClient && (
-                <StyledInputWrapper>
+                <>
                   <Controller
                     render={({ field }) => (
                       <Input
                         {...field}
                         disabled
                         bg="gray3"
                         label={`${intl.formatMessage({ id: 'TestListForm.Label.Email' })} *`}
+                        className="mb-2"
                       />
                     )}
                     name="author"
                     control={control}
                   />
-                </StyledInputWrapper>
+                  <StyledInputWrapper>
+                    <Controller
+                      render={({
+                        field: { value, onChange, ...fieldProps },
+                      }) => (
+                        <>
+                          <Checkbox
+                            {...fieldProps}
+                            onChange={(
+                              event: React.ChangeEvent<HTMLInputElement>,
+                            ) => onChange(event.target.checked)}
+                            checked={value}
+                            aria-describedby="publish_email-help"
+                            label={intl.formatMessage({
+                              id: 'TestListForm.Label.PublishEmail',
+                            })}
+                          />
+                          <p
+                            id="publish_email-help"
+                            className="text-sm text-gray-600 mt-1 ms-7"
+                          >
+                            {intl.formatMessage({
+                              id: 'TestListForm.Help.PublishEmail',
+                            })}
+                          </p>
+                        </>
+                      )}
+                      name="publish_email"
+                      control={control}
+                    />
+                  </StyledInputWrapper>
+                </>
               )}
 
               <StyledInputWrapper>

components/v2/DescriptorDetails.tsx

@@ -5,6 +5,7 @@ import { useMemo } from 'react'
 import { useIntl } from 'react-intl'
 import { formatMediumDate } from 'utils'
 import ArchivedTag from '../ArchivedTag'
+import useUser from 'hooks/useUser'
 
 type ExpirationDateProps = {
   expirationString: string
@@ -40,6 +41,9 @@ const DescriptorDetails = ({
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 }: any) => {
   const { locale, formatMessage } = useIntl()
+  const { user } = useUser()
+  const isAdmin = useMemo(() => user?.role === 'admin', [user])
+
   return (
     <>
       <h2 className="leading-none inline align-middle mr-4">
@@ -54,7 +58,7 @@ const DescriptorDetails = ({
       {descriptor.is_expired && <ArchivedTag />}
 
       <div className="text-sm my-4">
-        {descriptor.author ? (
+        {descriptor.author && (descriptor?.publish_email || isAdmin) ? (
           <>
             {formatMessage(
               { id: 'DescriptorDetails.CreatedByOn' },

pages/create.tsx

@@ -48,6 +48,7 @@ const defaultValues = {
   icon: '',
   color: '#000000',
   author: getUserEmail(),
+  publish_email: true,
   expiration_date: '',
   nettests: [
     {

pages/edit/[linkId].tsx

@@ -26,6 +26,7 @@ const transformIncomingData = (formData: any) => {
     ...formData,
     color: formData?.color ? formData.color : '#000000',
     author: formData?.author || getUserEmail(),
+    publish_email: formData?.publish_email ?? true,
     name_intl: transformIntoArray(formData.name_intl),
     description_intl: transformIntoArray(formData.description_intl),
     short_description_intl: transformIntoArray(formData.short_description_intl),

public/static/lang/en.json

@@ -46,6 +46,8 @@
   "TestListForm.Label.ShortDescription": "Short description",
   "TestListForm.Label.Description": "Description",
   "TestListForm.Label.Email": "Author's Email",
+  "TestListForm.Label.PublishEmail": "Publish author's email",
+  "TestListForm.Help.PublishEmail": "Others can see who created this link and contact you. Uncheck to not display your email publicly.",
   "TestListForm.Label.ExpirationDate": "Expiration Date",
   "TestListForm.Label.Icon": "Icon",
   "TestListForm.OptionsFields.Key": "Key",