-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix(28664): fix the edit button * feat(28664): add data-uri validation * feat(28664): redesign the schema manager * feat(28664): add schema validation * feat(28664): add schema manager for topic filters * feat(28664): add uploader for schemas * feat(28664): update translations * refactor(28664): refactor validation mark * fix(28664): fix translations * test(28664): add mocks * test(28664): fix tests * test(28664): add tests * test(28664): fix tests * test(28664): add tests * feat(28664): add remove schema * feat(28664): add data-url encoding * fix(28664): validation * refactor(28664): refactor the sampler and add assign CTA * refactor(28664): refactor uploader * fix(28664): fix translations * refactor(28664): refactor the schema manager * fix(28664): show examples
- Loading branch information
Showing
17 changed files
with
436 additions
and
52 deletions.
There are no files selected for viewing
5 changes: 5 additions & 0 deletions
5
hivemq-edge/src/frontend/src/api/hooks/useTopicFilters/__handlers__/index.ts
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
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
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
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
16 changes: 16 additions & 0 deletions
16
hivemq-edge/src/frontend/src/modules/TopicFilters/components/SchemaUploader.spec.cy.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,16 @@ | ||
| import SchemaUploader from '@/modules/TopicFilters/components/SchemaUploader.tsx' | ||
|
|
||
| describe('SchemaUploader', () => { | ||
| beforeEach(() => { | ||
| cy.viewport(800, 800) | ||
| }) | ||
|
|
||
| it('should render properly', () => { | ||
| const onUpload = cy.stub().as('onUpload') | ||
| cy.mountWithProviders(<SchemaUploader onUpload={onUpload} />) | ||
|
|
||
| cy.get('#dropzone').as('dropzone') | ||
| cy.get('#dropzone p').should('have.text', 'Upload a JSON-Schema file') | ||
| cy.get('#dropzone button').should('have.text', 'Select file') | ||
| }) | ||
| }) |
76 changes: 76 additions & 0 deletions
76
hivemq-edge/src/frontend/src/modules/TopicFilters/components/SchemaUploader.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,76 @@ | ||
| import { FC, useState } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { useDropzone } from 'react-dropzone' | ||
| import { AlertStatus, Button, Card, CardBody, Text, useToast } from '@chakra-ui/react' | ||
|
|
||
| import { DEFAULT_TOAST_OPTION } from '@/hooks/useEdgeToast/toast-utils.ts' | ||
| import { getDropZoneBorder } from '@/modules/Theme/utils.ts' | ||
| import { ACCEPT_JSON_SCHEMA } from '@/modules/TopicFilters/utils/topic-filter.schema.ts' | ||
|
|
||
| interface SchemaUploaderProps { | ||
| onUpload: (s: string) => void | ||
| } | ||
|
|
||
| const SchemaUploader: FC<SchemaUploaderProps> = ({ onUpload }) => { | ||
| const [loading, setLoading] = useState(false) | ||
| const { t } = useTranslation() | ||
| const toast = useToast() | ||
|
|
||
| const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ | ||
| noClick: true, | ||
| noKeyboard: true, | ||
| maxFiles: 1, | ||
| accept: ACCEPT_JSON_SCHEMA, | ||
| onDropRejected: (fileRejections) => { | ||
| const status: AlertStatus = 'error' | ||
| setLoading(false) | ||
| fileRejections.forEach((fileRejection) => { | ||
| toast({ | ||
| ...DEFAULT_TOAST_OPTION, | ||
| status, | ||
| title: t('rjsf.batchUpload.dropZone.status', { | ||
| ns: 'components', | ||
| context: status, | ||
| fileName: fileRejection.file.name, | ||
| }), | ||
| description: fileRejection.errors[0].message, | ||
| }) | ||
| }) | ||
| }, | ||
| onDropAccepted: async (files) => { | ||
| const [file] = files | ||
| const reader = new FileReader() | ||
| reader.readAsDataURL(file) | ||
| reader.onload = () => { | ||
| if (typeof reader.result === 'string') onUpload(reader.result as string) | ||
| } | ||
| }, | ||
| }) | ||
|
|
||
| return ( | ||
| <Card variant="filled"> | ||
| <CardBody | ||
| {...getRootProps()} | ||
| {...getDropZoneBorder('blue.500')} | ||
| minHeight="calc(250px - 2rem)" | ||
| display="flex" | ||
| flexDirection="column" | ||
| justifyContent="center" | ||
| alignItems="center" | ||
| id="dropzone" | ||
| > | ||
| <input {...getInputProps()} data-testid="schema-dropzone" /> | ||
| {isDragActive && <Text>{t('rjsf.batchUpload.dropZone.dropping', { ns: 'components' })}</Text>} | ||
| {loading && <Text>{t('rjsf.batchUpload.dropZone.loading', { ns: 'components' })}</Text>} | ||
| {!isDragActive && !loading && ( | ||
| <> | ||
| <Text>{t('topicFilter.schema.actions.upload')}</Text> | ||
| <Button onClick={open}>{t('rjsf.batchUpload.dropZone.selectFile', { ns: 'components' })}</Button> | ||
| </> | ||
| )} | ||
| </CardBody> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export default SchemaUploader |
7 changes: 0 additions & 7 deletions
7
...mq-edge/src/frontend/src/modules/TopicFilters/components/SchemaValidationMark.spec.cy.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 |
|---|---|---|
| @@ -1,21 +1,14 @@ | ||
| import { MOCK_TOPIC_FILTER } from '@/api/hooks/useTopicFilters/__handlers__' | ||
| import { GENERATE_DATA_MODELS } from '@/api/hooks/useDomainModel/__handlers__' | ||
| import SchemaValidationMark from '@/modules/TopicFilters/components/SchemaValidationMark.tsx' | ||
|
|
||
| describe('SchemaValidationMark', () => { | ||
| beforeEach(() => { | ||
| cy.viewport(800, 800) | ||
| cy.intercept('/api/v1/management/sampling/topic/**', { items: [] }).as('getTopic') | ||
|
|
||
| cy.intercept('/api/v1/management/sampling/schema/**', GENERATE_DATA_MODELS(true, MOCK_TOPIC_FILTER.topicFilter)).as( | ||
| 'getSchema' | ||
| ) | ||
| }) | ||
|
|
||
| it('should render properly', () => { | ||
| cy.mountWithProviders(<SchemaValidationMark topicFilter={MOCK_TOPIC_FILTER} />) | ||
|
|
||
| cy.getByTestId('validation-loading').should('be.visible') | ||
| cy.get('[role="alert"]').should('have.attr', 'data-status', 'success') | ||
| }) | ||
| }) |
16 changes: 7 additions & 9 deletions
16
hivemq-edge/src/frontend/src/modules/TopicFilters/components/SchemaValidationMark.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
Oops, something went wrong.