Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(settings-project): add general and danger zone (#403)
- Loading branch information
1 parent
8574d8a
commit 2c904ad
Showing
12 changed files
with
471 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
...rc/lib/feature/page-project-danger-zone-feature/page-project-danger-zone-feature.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { render } from '__tests__/utils/setup-jest' | ||
| import PageProjectDangerZoneFeature from './page-project-danger-zone-feature' | ||
|
|
||
| describe('PageProjectDangerZoneFeature', () => { | ||
| it('should render successfully', () => { | ||
| const { baseElement } = render(<PageProjectDangerZoneFeature />) | ||
| expect(baseElement).toBeTruthy() | ||
| }) | ||
| }) |
35 changes: 35 additions & 0 deletions
35
...ngs/src/lib/feature/page-project-danger-zone-feature/page-project-danger-zone-feature.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useState } from 'react' | ||
| import { useDispatch, useSelector } from 'react-redux' | ||
| import { useNavigate, useParams } from 'react-router-dom' | ||
| import { deleteProject, selectProjectById } from '@qovery/domains/projects' | ||
| import { SETTINGS_URL } from '@qovery/shared/router' | ||
| import { useDocumentTitle } from '@qovery/shared/utils' | ||
| import { AppDispatch, RootState } from '@qovery/store' | ||
| import PageProjectDangerZone from '../../ui/page-project-danger-zone/page-project-danger-zone' | ||
|
|
||
| export function PageProjectDangerZoneFeature() { | ||
| const { organizationId = '', projectId = '' } = useParams() | ||
| useDocumentTitle('Danger zone - Project settings') | ||
|
|
||
| const dispatch = useDispatch<AppDispatch>() | ||
| const navigate = useNavigate() | ||
|
|
||
| const [loading, setLoading] = useState(false) | ||
|
|
||
| const project = useSelector((state: RootState) => selectProjectById(state, organizationId, projectId)) | ||
|
|
||
| const deleteProjectAction = () => { | ||
| setLoading(true) | ||
|
|
||
| dispatch(deleteProject({ projectId })) | ||
| .unwrap() | ||
| .then(() => { | ||
| setLoading(false) | ||
| navigate(SETTINGS_URL(organizationId)) | ||
| }) | ||
| } | ||
|
|
||
| return <PageProjectDangerZone deleteProject={deleteProjectAction} project={project} loading={loading} /> | ||
| } | ||
|
|
||
| export default PageProjectDangerZoneFeature |
70 changes: 70 additions & 0 deletions
70
...ttings/src/lib/feature/page-project-general-feature/page-project-general-feature.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { act, fireEvent, render } from '__tests__/utils/setup-jest' | ||
| import { Project } from 'qovery-typescript-axios' | ||
| import * as storeProjects from '@qovery/domains/projects' | ||
| import PageProjectGeneralFeature from './page-project-general-feature' | ||
|
|
||
| import SpyInstance = jest.SpyInstance | ||
|
|
||
| const mockProject: Project = storeProjects.projectsFactoryMock(1)[0] | ||
|
|
||
| jest.mock('@qovery/domains/projects', () => { | ||
| return { | ||
| ...jest.requireActual('@qovery/domains/projects'), | ||
| editProject: jest.fn(), | ||
| selectProjectById: () => { | ||
| const currentMockProject = mockProject | ||
| mockProject.id = '0' | ||
| mockProject.description = 'description' | ||
| return currentMockProject | ||
| }, | ||
| } | ||
| }) | ||
|
|
||
| const mockDispatch = jest.fn() | ||
| jest.mock('react-redux', () => ({ | ||
| ...jest.requireActual('react-redux'), | ||
| useDispatch: () => mockDispatch, | ||
| })) | ||
|
|
||
| jest.mock('react-router-dom', () => ({ | ||
| ...(jest.requireActual('react-router-dom') as any), | ||
| useParams: () => ({ organizationId: '0', projectId: '0' }), | ||
| })) | ||
|
|
||
| describe('PageProjectGeneral', () => { | ||
| it('should render successfully', () => { | ||
| const { baseElement } = render(<PageProjectGeneralFeature />) | ||
| expect(baseElement).toBeTruthy() | ||
| }) | ||
|
|
||
| it('should dispatch editProject if form is submitted', async () => { | ||
| const editProjectSpy: SpyInstance = jest.spyOn(storeProjects, 'editProject') | ||
| mockDispatch.mockImplementation(() => ({ | ||
| unwrap: () => | ||
| Promise.resolve({ | ||
| data: {}, | ||
| }), | ||
| })) | ||
|
|
||
| const { getByTestId } = render(<PageProjectGeneralFeature />) | ||
|
|
||
| await act(() => { | ||
| const inputName = getByTestId('input-name') | ||
| fireEvent.input(inputName, { target: { value: 'hello-world' } }) | ||
| }) | ||
|
|
||
| expect(getByTestId('submit-button')).not.toBeDisabled() | ||
|
|
||
| await act(() => { | ||
| getByTestId('submit-button').click() | ||
| }) | ||
|
|
||
| expect(editProjectSpy).toHaveBeenCalledWith({ | ||
| data: { | ||
| name: 'hello-world', | ||
| description: 'description', | ||
| }, | ||
| projectId: '0', | ||
| }) | ||
| }) | ||
| }) |
56 changes: 56 additions & 0 deletions
56
...es/settings/src/lib/feature/page-project-general-feature/page-project-general-feature.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { useEffect, useState } from 'react' | ||
| import { FormProvider, useForm } from 'react-hook-form' | ||
| import { useDispatch, useSelector } from 'react-redux' | ||
| import { useParams } from 'react-router-dom' | ||
| import { editProject, selectProjectById } from '@qovery/domains/projects' | ||
| import { useDocumentTitle } from '@qovery/shared/utils' | ||
| import { AppDispatch, RootState } from '@qovery/store' | ||
| import PageProjectGeneral from '../../ui/page-project-general/page-project-general' | ||
|
|
||
| export function PageProjectGeneralFeature() { | ||
| const { organizationId = '', projectId = '' } = useParams() | ||
| useDocumentTitle('General - Project settings') | ||
|
|
||
| const project = useSelector((state: RootState) => selectProjectById(state, organizationId, projectId)) | ||
|
|
||
| const [loading, setLoading] = useState(false) | ||
| const dispatch = useDispatch<AppDispatch>() | ||
|
|
||
| const methods = useForm({ | ||
| mode: 'onChange', | ||
| }) | ||
|
|
||
| useEffect(() => { | ||
| methods.reset({ | ||
| name: project?.name || '', | ||
| description: project?.description || '', | ||
| }) | ||
| }, [methods, project?.name, project?.description]) | ||
|
|
||
| const onSubmit = methods.handleSubmit((data) => { | ||
| if (data && project) { | ||
| setLoading(true) | ||
|
|
||
| dispatch( | ||
| editProject({ | ||
| projectId, | ||
| data: { | ||
| name: data['name'], | ||
| description: data['description'], | ||
| }, | ||
| }) | ||
| ) | ||
| .unwrap() | ||
| .then(() => setLoading(false)) | ||
| .catch(() => setLoading(false)) | ||
| } | ||
| }) | ||
|
|
||
| return ( | ||
| <FormProvider {...methods}> | ||
| <PageProjectGeneral onSubmit={onSubmit} loading={loading} /> | ||
| </FormProvider> | ||
| ) | ||
| } | ||
|
|
||
| export default PageProjectGeneralFeature |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
libs/pages/settings/src/lib/ui/page-project-danger-zone/page-project-danger-zone.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { render } from '__tests__/utils/setup-jest' | ||
| import PageProjectDangerZone, { PageProjectDangerZoneProps } from './page-project-danger-zone' | ||
|
|
||
| const props: PageProjectDangerZoneProps = { | ||
| deleteProject: jest.fn(), | ||
| loading: false, | ||
| } | ||
|
|
||
| describe('PageProjectDangerZone', () => { | ||
| it('should render successfully', () => { | ||
| const { baseElement } = render(<PageProjectDangerZone {...props} />) | ||
| expect(baseElement).toBeTruthy() | ||
| }) | ||
| }) |
Oops, something went wrong.