fix(settings-description): field description (#428)

libs/domains/application/src/lib/slices/applications.slice.ts

@@ -131,7 +131,10 @@ export const editApplication = createAsyncThunk(
   }) => {
     let response
     if (isContainer(payload.serviceType)) {
-      const cloneApplication = Object.assign({}, refactoContainerApplicationPayload(payload.data))
+      const cloneApplication = Object.assign(
+        {},
+        refactoContainerApplicationPayload(payload.data as Partial<ContainerApplicationEntity>)
+      )
       response = await containerMainCallsApi.editContainer(payload.applicationId, cloneApplication as ContainerRequest)
     } else if (isJob(payload.serviceType)) {
       const cloneJob = Object.assign({}, refactoJobPayload(payload.data as Partial<JobApplicationEntity>))

libs/pages/application/src/lib/feature/page-settings-general-feature/page-settings-general-feature.spec.tsx

@@ -2,7 +2,10 @@ import { render } from '__tests__/utils/setup-jest'
 import { BuildModeEnum, BuildPackLanguageEnum, GitProviderEnum } from 'qovery-typescript-axios'
 import { applicationFactoryMock, cronjobFactoryMock } from '@qovery/domains/application'
 import { ApplicationEntity } from '@qovery/shared/interfaces'
-import PageSettingsGeneralFeature, { handleJobSubmit, handleSubmit } from './page-settings-general-feature'
+import PageSettingsGeneralFeature, {
+  handleGitApplicationSubmit,
+  handleJobSubmit,
+} from './page-settings-general-feature'
 
 describe('PageSettingsGeneralFeature', () => {
   let application: ApplicationEntity
@@ -17,9 +20,10 @@ describe('PageSettingsGeneralFeature', () => {
 
   it('should update the application with Docker', () => {
     application.buildpack_language = BuildPackLanguageEnum.GO
-    const app = handleSubmit(
+    const app = handleGitApplicationSubmit(
       {
         name: 'hello',
+        description: 'description',
         build_mode: BuildModeEnum.DOCKER,
         buildpack_language: BuildPackLanguageEnum.GO,
         dockerfile_path: '/',
@@ -31,15 +35,17 @@ describe('PageSettingsGeneralFeature', () => {
       application
     )
     expect(app.name).toBe('hello')
+    expect(app.description).toBe('description')
     expect(app.buildpack_language).toBe(null)
     expect(app.dockerfile_path).toBe('/')
   })
 
   it('should update the application with Buildpack', () => {
     application.dockerfile_path = 'Dockerfile'
-    const app = handleSubmit(
+    const app = handleGitApplicationSubmit(
       {
         name: 'hello',
+        description: 'description',
         build_mode: BuildModeEnum.BUILDPACKS,
         buildpack_language: BuildPackLanguageEnum.GO,
         dockerfile_path: '/',
@@ -51,12 +57,13 @@ describe('PageSettingsGeneralFeature', () => {
       application
     )
     expect(app.name).toBe('hello')
+    expect(app.description).toBe('description')
     expect(app.dockerfile_path).toBe(null)
     expect(app.buildpack_language).toBe(BuildPackLanguageEnum.GO)
   })
 
   it('should update the application with git repository', () => {
-    const app = handleSubmit(
+    const app = handleGitApplicationSubmit(
       {
         name: 'hello',
         build_mode: BuildModeEnum.BUILDPACKS,
@@ -80,6 +87,7 @@ describe('PageSettingsGeneralFeature', () => {
     const app = handleJobSubmit(
       {
         name: 'hello',
+        description: 'description',
         dockerfile_path: '/',
         provider: GitProviderEnum.GITHUB,
         repository: 'qovery/console',
@@ -99,6 +107,7 @@ describe('PageSettingsGeneralFeature', () => {
     const app = handleJobSubmit(
       {
         name: 'hello',
+        description: 'description',
         image_tag: 'latest',
         image_name: 'qovery/console',
         registry: 'docker.io',

libs/pages/application/src/lib/feature/page-settings-general-feature/page-settings-general-feature.tsx

@@ -18,9 +18,10 @@ import { buildGitRepoUrl } from '@qovery/shared/utils'
 import { AppDispatch, RootState } from '@qovery/store'
 import PageSettingsGeneral from '../../ui/page-settings-general/page-settings-general'
 
-export const handleSubmit = (data: FieldValues, application: ApplicationEntity) => {
+export const handleGitApplicationSubmit = (data: FieldValues, application: GitApplicationEntity) => {
   const cloneApplication = Object.assign({}, application)
   cloneApplication.name = data['name']
+  cloneApplication.description = data['description']
 
   if ('build_mode' in cloneApplication) {
     cloneApplication.build_mode = data['build_mode']
@@ -49,6 +50,7 @@ export const handleContainerSubmit = (data: FieldValues, application: Applicatio
   return {
     ...application,
     name: data['name'],
+    description: data['description'] || '',
     tag: data['image_tag'] || '',
     image_name: data['image_name'] || '',
     arguments: (data['cmd_arguments'] && data['cmd_arguments'].length && eval(data['cmd_arguments'])) || [],
@@ -68,6 +70,7 @@ export const handleJobSubmit = (data: FieldValues, application: ApplicationEntit
     return {
       ...(application as JobApplicationEntity),
       name: data['name'],
+      description: data['description'],
       source: {
         docker: {
           git_repository,
@@ -78,6 +81,8 @@ export const handleJobSubmit = (data: FieldValues, application: ApplicationEntit
   } else {
     return {
       ...(application as JobApplicationEntity),
+      name: data['name'],
+      description: data['description'],
       source: {
         image: {
           tag: data['image_tag'] || '',
@@ -96,6 +101,7 @@ export function PageSettingsGeneralFeature() {
     (state) => getApplicationsState(state).entities[applicationId],
     (a, b) =>
       a?.name === b?.name &&
+      a?.description === b?.description &&
       (a as GitApplicationEntity)?.build_mode === (b as GitApplicationEntity)?.build_mode &&
       (a as GitApplicationEntity)?.buildpack_language === (b as GitApplicationEntity)?.buildpack_language &&
       (a as GitApplicationEntity)?.dockerfile_path === (b as GitApplicationEntity)?.dockerfile_path
@@ -123,7 +129,7 @@ export function PageSettingsGeneralFeature() {
     if (data && application) {
       let cloneApplication: ApplicationEntity
       if (isApplication(application)) {
-        cloneApplication = handleSubmit(data, application)
+        cloneApplication = handleGitApplicationSubmit(data, application)
       } else if (isJob(application)) {
         cloneApplication = handleJobSubmit(data, application)
       } else {
@@ -170,6 +176,8 @@ export function PageSettingsGeneralFeature() {
 
   useEffect(() => {
     methods.setValue('name', application?.name)
+    methods.setValue('description', application?.description)
+
     if (application) {
       if (isApplication(application)) {
         methods.setValue('build_mode', (application as GitApplicationEntity).build_mode)

libs/pages/application/src/lib/ui/page-settings-general/page-settings-general.spec.tsx

@@ -14,6 +14,7 @@ describe('PageSettingsGeneral', () => {
 
   const defaultValues = (mode = BuildModeEnum.DOCKER) => ({
     name: 'hello-world',
+    description: 'desc',
     build_mode: mode,
     buildpack_language: BuildPackLanguageEnum.CLOJURE,
     dockerfile_path: 'Dockerfile',

libs/pages/application/src/lib/ui/page-settings-general/page-settings-general.tsx

@@ -9,7 +9,16 @@ import {
 } from '@qovery/shared/console-shared'
 import { ServiceTypeEnum, isApplication, isContainer, isCronJob, isJob } from '@qovery/shared/enums'
 import { OrganizationEntity } from '@qovery/shared/interfaces'
-import { BlockContent, Button, ButtonSize, ButtonStyle, HelpSection, InputSelect, InputText } from '@qovery/shared/ui'
+import {
+  BlockContent,
+  Button,
+  ButtonSize,
+  ButtonStyle,
+  HelpSection,
+  InputSelect,
+  InputText,
+  InputTextArea,
+} from '@qovery/shared/ui'
 import { upperCaseFirstLetter } from '@qovery/shared/utils'
 
 export interface PageSettingsGeneralProps {
@@ -47,6 +56,7 @@ export function PageSettingsGeneral(props: PageSettingsGeneralProps) {
               render={({ field, fieldState: { error } }) => (
                 <InputText
                   dataTestId="input-name"
+                  className="mb-3"
                   name={field.name}
                   onChange={field.onChange}
                   value={field.value}
@@ -55,6 +65,13 @@ export function PageSettingsGeneral(props: PageSettingsGeneralProps) {
                 />
               )}
             />
+            <Controller
+              name="description"
+              control={control}
+              render={({ field }) => (
+                <InputTextArea name={field.name} onChange={field.onChange} value={field.value} label="Description" />
+              )}
+            />
           </BlockContent>
           {isJob(type) && (
             <JobGeneralSettings

libs/pages/clusters/src/lib/ui/card-cluster/card-cluster.spec.tsx

@@ -36,9 +36,9 @@ describe('CardCluster', () => {
   it('should have a status message', () => {
     const status = props.cluster.extendedStatus?.status?.status
 
-    const { baseElement } = render(<CardCluster {...props} />)
+    const { getByTestId } = render(<CardCluster {...props} />)
 
-    expect(baseElement.textContent).toContain(getStatusClusterMessage(status))
+    expect(getByTestId('status-message').textContent).toContain(getStatusClusterMessage(status))
   })
 
   it('should have a function to display color by status', () => {

libs/pages/clusters/src/lib/ui/card-cluster/card-cluster.tsx

@@ -48,7 +48,10 @@ export function CardCluster(props: CardClusterProps) {
               </h2>
             </div>
             <Skeleton height={12} width={100} show={!statusLoading}>
-              <p className={`text-xxs mt-0.5 font-medium ${getColorForStatus(cluster.extendedStatus?.status?.status)}`}>
+              <p
+                data-testid="status-message"
+                className={`text-xxs mt-0.5 font-medium ${getColorForStatus(cluster.extendedStatus?.status?.status)}`}
+              >
                 {getStatusClusterMessage(
                   cluster.extendedStatus?.status?.status,
                   cluster.extendedStatus?.status?.is_deployed

libs/pages/database/src/lib/feature/page-settings-general-feature/page-settings-general-feature.tsx

@@ -10,6 +10,7 @@ import PageSettingsGeneral from '../../ui/page-settings-general/page-settings-ge
 export const handleSubmit = (data: FieldValues, database: DatabaseEntity) => {
   const cloneDatabase = Object.assign({}, database as DatabaseEntity)
   cloneDatabase.name = data['name']
+  cloneDatabase.description = data['description']
   cloneDatabase.accessibility = data['accessibility']
 
   return cloneDatabase
@@ -50,12 +51,21 @@ export function PageSettingsGeneralFeature() {
   useEffect(() => {
     methods.reset({
       name: database?.name,
+      description: database?.description,
       type: database?.type,
       mode: database?.mode,
       version: database?.version,
       accessibility: database?.accessibility,
     })
-  }, [methods, database?.name, database?.type, database?.mode, database?.version, database?.accessibility])
+  }, [
+    methods,
+    database?.name,
+    database?.description,
+    database?.type,
+    database?.mode,
+    database?.version,
+    database?.accessibility,
+  ])
 
   return (
     <FormProvider {...methods}>

libs/pages/database/src/lib/ui/page-settings-general/page-settings-general.tsx

@@ -10,6 +10,7 @@ import {
   Icon,
   InputSelect,
   InputText,
+  InputTextArea,
   Link,
 } from '@qovery/shared/ui'
 import { upperCaseFirstLetter } from '@qovery/shared/utils'
@@ -61,6 +62,19 @@ export function PageSettingsGeneral(props: PageSettingsGeneralProps) {
                 />
               )}
             />
+            <Controller
+              name="description"
+              control={control}
+              render={({ field }) => (
+                <InputTextArea
+                  className="mb-3"
+                  name={field.name}
+                  onChange={field.onChange}
+                  value={field.value}
+                  label="Description"
+                />
+              )}
+            />
             <Controller
               name="type"
               control={control}

libs/pages/services/src/lib/feature/page-application-create-feature/page-application-post-feature/page-application-install-post.spec.tsx

@@ -118,6 +118,7 @@ describe('PageApplicationPostFeature', () => {
       environmentId: '',
       data: {
         name: 'test',
+        description: '',
         ports: [{ internal_port: 80, external_port: 443, publicly_accessible: true, protocol: 'HTTP' }],
         cpu: 500,
         memory: 512,
@@ -147,6 +148,7 @@ describe('PageApplicationPostFeature', () => {
           generalData: {
             ...mockContext.generalData,
             name: 'test',
+            description: '',
             serviceType: ServiceTypeEnum.CONTAINER,
             cmd_arguments: '["test"]',
             cmd: ['test'],
@@ -171,6 +173,7 @@ describe('PageApplicationPostFeature', () => {
       environmentId: '',
       data: {
         name: 'test',
+        description: '',
         ports: [{ internal_port: 80, external_port: 443, publicly_accessible: true, protocol: 'HTTP' }],
         cpu: 500,
         memory: 512,

libs/pages/services/src/lib/feature/page-application-create-feature/page-application-post-feature/page-application-post-feature.tsx

@@ -69,6 +69,7 @@ export function PageApplicationPostFeature() {
       if (isApplication(generalData.serviceType)) {
         const applicationRequest: ApplicationRequest = {
           name: generalData.name,
+          description: generalData.description || '',
           ports:
             portData.ports?.map((port) => ({
               internal_port: port.application_port || 80,
@@ -122,6 +123,7 @@ export function PageApplicationPostFeature() {
       } else {
         const containerRequest: ContainerRequest = {
           name: generalData.name,
+          description: generalData.description || '',
           ports:
             portData.ports?.map((port) => ({
               internal_port: port.application_port || 80,

libs/pages/services/src/lib/feature/page-database-create-feature/database-creation-flow.interface.ts

@@ -2,6 +2,7 @@ import { DatabaseAccessibilityEnum, DatabaseModeEnum, DatabaseTypeEnum } from 'q
 
 export interface GeneralData {
   name: string
+  description?: string
   mode: DatabaseModeEnum
   type: DatabaseTypeEnum
   version: string

libs/pages/services/src/lib/feature/page-database-create-feature/page-database-create-post-feature/page-database-create-post-feature.spec.tsx

@@ -95,6 +95,7 @@ describe('PageDatabaseCreatePostFeature', () => {
         storage: 1,
         type: DatabaseTypeEnum.MYSQL,
         version: '1',
+        description: '',
       },
     })
     expect(mockNavigate).toHaveBeenCalledWith('/organization/1/project/2/environment/3/services')

libs/pages/services/src/lib/feature/page-database-create-feature/page-database-create-post-feature/page-database-create-post-feature.tsx

@@ -57,6 +57,7 @@ export function PageDatabaseCreatePostFeature() {
 
       const databaseRequest: DatabaseRequest = {
         name: generalData.name,
+        description: generalData.description || '',
         type: generalData.type,
         version: generalData.version,
         accessibility: generalData.accessibility,

libs/pages/services/src/lib/ui/page-application-create/page-application-create-general/page-application-create-general.spec.tsx

@@ -23,6 +23,7 @@ describe('PageApplicationCreateGeneral', () => {
       wrapWithReactHookForm(<PageApplicationCreateGeneral {...props} />, {
         defaultValues: {
           name: 'test',
+          description: 'test',
           serviceType: ServiceTypeEnum.APPLICATION,
           build_mode: BuildModeEnum.DOCKER,
           branch: 'main',
@@ -51,6 +52,7 @@ describe('PageApplicationCreateGeneral', () => {
       wrapWithReactHookForm(<PageApplicationCreateGeneral {...props} />, {
         defaultValues: {
           name: 'test',
+          description: 'test',
           serviceType: ServiceTypeEnum.APPLICATION,
         },
       })
@@ -66,6 +68,7 @@ describe('PageApplicationCreateGeneral', () => {
       wrapWithReactHookForm(<PageApplicationCreateGeneral {...props} />, {
         defaultValues: {
           name: 'test',
+          description: 'test',
           serviceType: ServiceTypeEnum.CONTAINER,
         },
       })
@@ -81,6 +84,7 @@ describe('PageApplicationCreateGeneral', () => {
       wrapWithReactHookForm(<PageApplicationCreateGeneral {...props} />, {
         defaultValues: {
           name: 'test',
+          description: 'test',
           serviceType: undefined,
         },
       })