Skip to content

Commit

Permalink
Merge pull request #1072 from InseeFr/1071-enregistrement-de-la-taill…
Browse files Browse the repository at this point in the history
…e-dune-distribution

1071 enregistrement de la taille dune distribution
  • Loading branch information
PierreVasseur authored Nov 15, 2024
2 parents fb1d4eb + 8b3fd89 commit 28175d8
Show file tree
Hide file tree
Showing 8 changed files with 208 additions and 94 deletions.
2 changes: 1 addition & 1 deletion src/packages/auth/hoc.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { getPermission } from '../redux/selectors';
import { ReduxModel } from '../redux/model';
import { useOidc } from './create-oidc';

const auth = (WrappedComponent: any) => {
const auth = (WrappedComponent: () => JSX.Element) => {
const AuthComponent = ({
authType,
roles,
Expand Down
7 changes: 7 additions & 0 deletions src/packages/model/Dataset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,13 @@ export type CatalogRecord = {
export type Distribution = {
id?: string;
validationState: ValidationState;
descriptionLg1: string;
descriptionLg2: string;
created: string;
updated: string;
format: string;
byteSize: string;
url: string;
};

export type PartialDistribution = {
Expand Down
45 changes: 18 additions & 27 deletions src/packages/modules-datasets/distributions/edit.jsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { D1, D2 } from '../../deprecated-locales';
import { default as ReactSelect } from 'react-select';
import D from '../../deprecated-locales/build-dictionary';
import { useDatasetsForDistributions, useDistribution } from '../datasets';
import { validate } from './validation';
import {
TextInput,
Loading,
Row,
ClientSideError,
GlobalClientSideErrorBloc,
Loading,
PageTitleBlock,
NumberInput,
Row,
TextInput,
UrlInput,
} from '../../components';
import { EditorMarkdown } from '../../components/rich-editor/editor-markdown';
import { useGoBack } from '../../utils/hooks/useGoBack';
import { useTitle } from '../../utils/hooks/useTitle';
import { DistributionApi } from '../../sdk';
import LabelRequired from '../../components/label-required';
import { ActionToolbar } from '../../components/action-toolbar';
import {
CancelButton,
SaveButton,
} from '../../components/buttons/buttons-with-icons';
import LabelRequired from '../../components/label-required';
import { EditorMarkdown } from '../../components/rich-editor/editor-markdown';
import { D1, D2 } from '../../deprecated-locales';
import D from '../../deprecated-locales/build-dictionary';
import { DistributionApi } from '../../sdk';
import { useGoBack } from '../../utils/hooks/useGoBack';
import { useTitle } from '../../utils/hooks/useTitle';
import { useDatasetsForDistributions, useDistribution } from '../datasets';
import { ByteSizeInput } from './edit/byte-size-input';
import { validate } from './validation';

export const Component = () => {
const { id } = useParams();
Expand Down Expand Up @@ -230,19 +230,10 @@ export const Component = () => {
</div>
</Row>
<Row>
<div className="col-md-12 form-group">
<label htmlFor="taille">{D1.tailleTitle}</label>
<NumberInput
id="taille"
value={editingDistribution.taille}
onChange={(e) =>
setEditingDistribution({
...editingDistribution,
taille: e.target.value,
})
}
/>
</div>
<ByteSizeInput
value={editingDistribution}
onChange={setEditingDistribution}
/>
</Row>
<Row>
<div className="col-md-12 form-group">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { D1 } from '../../../deprecated-locales';
import { Distribution } from '../../../model/Dataset';
import { ByteSizeInput } from './byte-size-input';

describe('ByteSizeInput', () => {
const mockDistribution = { byteSize: '1024', id: '1' } as Distribution;
const mockOnChange = vi.fn();

beforeEach(() => {
vi.clearAllMocks();
});

it('should render the label and input with correct initial value', () => {
render(<ByteSizeInput value={mockDistribution} onChange={mockOnChange} />);

expect(screen.getByLabelText(D1.tailleTitle)).not.toBeNull();
expect(screen.getByDisplayValue(mockDistribution.byteSize)).not.toBeNull();
});

it('should call onChange with updated byteSize when input changes', () => {
render(<ByteSizeInput value={mockDistribution} onChange={mockOnChange} />);

const input = screen.getByLabelText(D1.tailleTitle);
fireEvent.change(input, { target: { value: '2048' } });

expect(mockOnChange).toHaveBeenCalledWith({
...mockDistribution,
byteSize: '2048',
});
});

it('should update input value when value prop changes', () => {
const { rerender } = render(
<ByteSizeInput value={mockDistribution} onChange={mockOnChange} />,
);

expect(screen.getByDisplayValue('1024')).not.toBeNull();

const updatedDistribution = { ...mockDistribution, byteSize: '4096' };
rerender(
<ByteSizeInput value={updatedDistribution} onChange={mockOnChange} />,
);

expect(screen.getByDisplayValue('4096')).not.toBeNull();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { NumberInput } from '../../../components';
import { D1 } from '../../../deprecated-locales';
import { Distribution } from '../../../model/Dataset';

export const ByteSizeInput = ({
value,
onChange,
}: Readonly<{
value: Distribution;
onChange: (distribution: Distribution) => void;
}>) => {
return (
<div className="col-md-12 form-group">
<label htmlFor="taille">{D1.tailleTitle}</label>
<NumberInput
id="taille"
value={value.byteSize}
onChange={(e) =>
onChange({
...value,
byteSize: e.target.value,
})
}
/>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { render, screen } from '@testing-library/react';
import { describe, expect, it, Mock, vi } from 'vitest';
import D from '../../../deprecated-locales/build-dictionary';
import { Distribution } from '../../../model/Dataset';
import { useSecondLang } from '../../../utils/hooks/second-lang';
import { ViewMainBlock } from './view-main-block';

vi.mock('../../../utils/hooks/second-lang', () => ({
useSecondLang: vi.fn(),
}));

describe('ViewMainBlock', () => {
const mockDistribution = {
created: '2023-01-01',
updated: '2023-02-01',
format: 'PDF',
byteSize: '15MB',
url: 'http://example.com',
descriptionLg1: 'Description content',
} as Distribution;

beforeEach(() => {
vi.clearAllMocks();
(useSecondLang as Mock).mockReturnValue([false]);
});

it('should render creation, modification, format, size, and URL information', () => {
render(<ViewMainBlock distribution={mockDistribution} />);

expect(screen.getByText(D.tailleTitle, { exact: false })).not.toBeNull();
expect(screen.getByText(/15MB/, { exact: false })).not.toBeNull();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { PublicationFemale, Row } from '../../../components';
import { Note } from '../../../components/note';
import D, { D1, D2 } from '../../../deprecated-locales/build-dictionary';
import { Distribution } from '../../../model/Dataset';
import { stringToDate } from '../../../utils/date-utils';
import { useSecondLang } from '../../../utils/hooks/second-lang';
import { renderMarkdownElement } from '../../../utils/html-utils';

export const ViewMainBlock = ({
distribution,
}: Readonly<{ distribution: Distribution }>) => {
const [secondLang] = useSecondLang();

return (
<>
<Row>
<Note
text={
<ul>
<li>
{D.createdDateTitle} : {stringToDate(distribution.created)}{' '}
</li>
<li>
{D.modifiedDateTitle} : {stringToDate(distribution.updated)}{' '}
</li>
<li>
{D.distributionStatus} :
<PublicationFemale object={distribution} />
</li>
<li>
{D.formatTitle} : {distribution.format}{' '}
</li>
<li>
{D.tailleTitle} : {distribution.byteSize}{' '}
</li>
<li>
{D.downloadUrlTitle} :{' '}
<a
target="_blank"
rel="noreferrer noopener"
href={distribution.url}
>
{distribution.url}{' '}
</a>
</li>
</ul>
}
title={D1.globalInformationsTitle}
alone={true}
/>
</Row>
<Row>
<Note
text={renderMarkdownElement(distribution.descriptionLg1)}
title={D1.descriptionTitle}
alone={!secondLang}
allowEmpty={true}
/>
{secondLang && (
<Note
text={renderMarkdownElement(distribution.descriptionLg1)}
title={D2.descriptionTitle}
alone={false}
allowEmpty={true}
/>
)}
</Row>
</>
);
};
70 changes: 4 additions & 66 deletions src/packages/modules-datasets/distributions/view/view.jsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useNavigate, useParams } from 'react-router-dom';
import {
CheckSecondLang,
Loading,
PageTitleBlock,
PublicationFemale,
Row,
} from '../../../components';
import { Note } from '../../../components/note';
import D, { D1, D2 } from '../../../deprecated-locales/build-dictionary';
import { CheckSecondLang, Loading, PageTitleBlock } from '../../../components';
import D from '../../../deprecated-locales/build-dictionary';
import { DistributionApi } from '../../../sdk';
import { stringToDate } from '../../../utils/date-utils';
import { useSecondLang } from '../../../utils/hooks/second-lang';
import { useTitle } from '../../../utils/hooks/useTitle';
import { renderMarkdownElement } from '../../../utils/html-utils';
import { useDataset, useDistribution } from '../../datasets';
import { ViewMenu } from './menu';
import { ViewMainBlock } from './view-main-block';

export const Component = (props) => {
const { id } = useParams();
Expand All @@ -27,8 +18,6 @@ export const Component = (props) => {
distribution?.idDataset,
);

const [secondLang] = useSecondLang();

const queryClient = useQueryClient();

const { isPending: isPublishing, mutate: publish } = useMutation({
Expand Down Expand Up @@ -76,58 +65,7 @@ export const Component = (props) => {

<CheckSecondLang />

<Row>
<Note
text={
<ul>
<li>
{D.createdDateTitle} : {stringToDate(distribution.created)}{' '}
</li>
<li>
{D.modifiedDateTitle} : {stringToDate(distribution.updated)}{' '}
</li>
<li>
{D.distributionStatus} :
<PublicationFemale object={distribution} />
</li>
<li>
{D.formatTitle} : {distribution.format}{' '}
</li>
<li>
{D.tailleTitle} : {distribution.taille}{' '}
</li>
<li>
{D.downloadUrlTitle} :{' '}
<a
target="_blank"
rel="noreferrer noopener"
href={distribution.url}
>
{distribution.url}{' '}
</a>
</li>
</ul>
}
title={D1.globalInformationsTitle}
alone={true}
/>
</Row>
<Row>
<Note
text={renderMarkdownElement(distribution.descriptionLg1)}
title={D1.descriptionTitle}
alone={!secondLang}
allowEmpty={true}
/>
{secondLang && (
<Note
text={renderMarkdownElement(distribution.descriptionLg1)}
title={D2.descriptionTitle}
alone={false}
allowEmpty={true}
/>
)}
</Row>
<ViewMainBlock distribution={distribution} />
</div>
);
};

0 comments on commit 28175d8

Please sign in to comment.