Require open source license for project creation

ui/src/data-services/hooks/projects/utils.ts

@@ -13,5 +13,9 @@ export const convertToServerFormData = (fieldValues: any) => {
     data.append('image', '')
   }
 
+  if (fieldValues.openSource) {
+    data.append('license', 'open-source')
+  }
+
   return data
 }

ui/src/data-services/models/job.ts

@@ -52,6 +52,7 @@ export class Job {
 
     return getFormatedDateTimeString({ date: new Date(this._job.created_at) })
   }
+
   get finishedAt(): string | undefined {
     if (!this._job.finished_at) {
       return

ui/src/data-services/models/project.ts

@@ -1,3 +1,4 @@
+import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
 import { UserPermission } from 'utils/user/types'
 import { Deployment, ServerDeployment } from './deployment'
 
@@ -33,6 +34,14 @@ export class Project {
     return this._project.user_permissions.includes(UserPermission.Update)
   }
 
+  get createdAt(): string | undefined {
+    if (!this._project.created_at) {
+      return
+    }
+
+    return getFormatedTimeString({ date: new Date(this._project.created_at) })
+  }
+
   get description(): string {
     return this._project.description
   }

ui/src/design-system/components/checkbox/checkbox.module.scss

@@ -33,6 +33,14 @@
     opacity: 0.5;
   }
 
+  &[aria-invalid='true'] {
+    border-color: $color-destructive-600;
+
+    &:focus {
+      box-shadow: 0 0 0 4px $color-destructive-100;
+    }
+  }
+
   &:hover:not([data-disabled]) {
     opacity: 0.7;
     cursor: pointer;
@@ -62,4 +70,9 @@
   &.neutral {
     color: $color-neutral-200;
   }
+
+  a {
+    color: $color-primary-1-600;
+    font-weight: 600;
+  }
 }

ui/src/design-system/components/checkbox/checkbox.tsx

@@ -1,6 +1,7 @@
 import * as _Checkbox from '@radix-ui/react-checkbox'
 import classNames from 'classnames'
 import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon'
+import { RefCallBack } from 'react-hook-form'
 import styles from './checkbox.module.scss'
 
 export enum CheckboxTheme {
@@ -13,28 +14,35 @@ export enum CheckboxTheme {
 interface CheckboxProps {
   checked: boolean | 'indeterminate'
   disabled?: boolean
+  hasError?: boolean
   id?: string
-  label?: string
+  innerRef?: RefCallBack
+  label?: string | JSX.Element
   theme?: CheckboxTheme
   onCheckedChange?: (checked: boolean) => void
 }
 
 export const Checkbox = ({
   checked,
   disabled,
+  hasError,
   id,
+  innerRef,
   label,
   theme = CheckboxTheme.Default,
   onCheckedChange,
 }: CheckboxProps) => (
   <div className={styles.wrapper}>
     <_Checkbox.Root
+      aria-disabled={disabled}
+      aria-invalid={hasError}
       checked={checked}
       className={classNames(styles.checkboxRoot, {
         [styles.neutral]: theme === CheckboxTheme.Neutral,
       })}
       disabled={disabled}
       id={id}
+      ref={innerRef}
       onCheckedChange={onCheckedChange}
     >
       <_Checkbox.Indicator className={styles.checkboxIndicator}>

ui/src/pages/project-details/project-details-form.tsx

@@ -9,19 +9,23 @@ import {
 import { FormConfig } from 'components/form/types'
 import { Project } from 'data-services/models/project'
 import { Button, ButtonTheme } from 'design-system/components/button/button'
+import { Checkbox } from 'design-system/components/checkbox/checkbox'
 import { IconType } from 'design-system/components/icon/icon'
 import { ImageUpload } from 'design-system/components/image-upload/image-upload'
 import { InputContent } from 'design-system/components/input/input'
 import { useForm } from 'react-hook-form'
-import { API_MAX_UPLOAD_SIZE } from 'utils/constants'
+import { Link } from 'react-router-dom'
+import { API_MAX_UPLOAD_SIZE, APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 import { bytesToMB } from 'utils/numberFormats'
 import { useFormError } from 'utils/useFormError'
+import styles from './styles.module.scss'
 
 interface ProjectFormValues {
   name?: string
   description?: string
   image?: File | null
+  openSource?: boolean
 }
 
 const config: FormConfig = {
@@ -56,6 +60,16 @@ const config: FormConfig = {
       },
     },
   },
+  openSource: {
+    label: translate(STRING.FIELD_LABEL_LICENSE),
+    rules: {
+      validate: (checked: boolean) => {
+        if (!checked) {
+          return translate(STRING.MESSAGE_LICENSE_REQUIRED)
+        }
+      },
+    },
+  },
 }
 
 export const ProjectDetailsForm = ({
@@ -130,6 +144,59 @@ export const ProjectDetailsForm = ({
             )}
           />
         </FormRow>
+        {project.createdAt ? null : (
+          <FormRow>
+            <FormController
+              name="openSource"
+              control={control}
+              config={config.openSource}
+              render={({ field, fieldState }) => (
+                <InputContent
+                  label={config.openSource.label}
+                  style={{ gridColumn: 'span 2' }}
+                  error={fieldState.error?.message}
+                >
+                  <div className={styles.checkboxList}>
+                    <Checkbox
+                      checked={field.value ?? false}
+                      hasError={!!fieldState.error?.message?.length}
+                      id={field.name}
+                      innerRef={field.ref}
+                      label={
+                        <>
+                          I want to contribute my data (uploaded and derived) to
+                          the publicly available dataset. I release my data
+                          under the{' '}
+                          <a href="https://creativecommons.org/licenses/by-nc/4.0/?ref=chooser-v1">
+                            Creative Commons Attribution-NonCommercial 4.0
+                            International Public
+                          </a>{' '}
+                          open source license, in accordance with the{' '}
+                          <Link to={APP_ROUTES.TERMS_OF_SERVICE}>
+                            Terms of service
+                          </Link>
+                          .
+                        </>
+                      }
+                      onCheckedChange={field.onChange}
+                    />
+                    <Checkbox
+                      checked={false}
+                      disabled
+                      label={
+                        <>
+                          I do not want to contribute my data to the publicly
+                          available dataset. My data will not be open sourced.{' '}
+                          <i>(Option coming soon.)</i>
+                        </>
+                      }
+                    />
+                  </div>
+                </InputContent>
+              )}
+            />
+          </FormRow>
+        )}
       </FormSection>
       <FormActions>
         <Button

ui/src/pages/project-details/styles.module.scss

@@ -8,6 +8,12 @@
   }
 }
 
+.checkboxList {
+  padding: 8px 0;
+  display: grid;
+  gap: 16px;
+}
+
 .errorContent {
   padding: 32px;
 }

ui/src/utils/language.ts

@@ -77,6 +77,7 @@ export enum STRING {
   FIELD_LABEL_ICON,
   FIELD_LABEL_LAST_SYNCED,
   FIELD_LABEL_LATITUDE,
+  FIELD_LABEL_LICENSE,
   FIELD_LABEL_LOCATION,
   FIELD_LABEL_LOGS,
   FIELD_LABEL_LONGITUDE,
@@ -133,6 +134,7 @@ export enum STRING {
   MESSAGE_IMAGE_FORMAT,
   MESSAGE_IMAGE_SIZE,
   MESSAGE_IMAGE_TOO_BIG,
+  MESSAGE_LICENSE_REQUIRED,
   MESSAGE_NO_ACCOUNT_YET,
   MESSAGE_NO_IMAGE,
   MESSAGE_NO_RESULTS,
@@ -288,6 +290,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_ICON]: 'Icon',
   [STRING.FIELD_LABEL_LAST_SYNCED]: 'Last synced with data source',
   [STRING.FIELD_LABEL_LATITUDE]: 'Latitude',
+  [STRING.FIELD_LABEL_LICENSE]: 'Data licensing',
   [STRING.FIELD_LABEL_LOCATION]: 'Location',
   [STRING.FIELD_LABEL_LOGS]: 'Logs',
   [STRING.FIELD_LABEL_LONGITUDE]: 'Longitude',
@@ -366,6 +369,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.MESSAGE_IMAGE_SIZE]:
     'The image must smaller than {{value}} {{unit}}.',
   [STRING.MESSAGE_IMAGE_TOO_BIG]: 'Please provide a smaller image',
+  [STRING.MESSAGE_LICENSE_REQUIRED]:
+    'Open source license required until the platform supports closed-access projects.',
   [STRING.MESSAGE_NO_ACCOUNT_YET]: 'No account yet?',
   [STRING.MESSAGE_NO_IMAGE]: 'No image',
   [STRING.MESSAGE_NO_RESULTS]: 'No results to show',