From a56e6332d29dfc7e13e3489fca3aeb1e79941471 Mon Sep 17 00:00:00 2001 From: Andrey Nenashev Date: Wed, 24 Jan 2024 15:01:32 +0100 Subject: [PATCH] bugfix: markdown is rendered correctly on dataset field overview page (#1595) --- odd-platform-ui/package.json | 2 +- odd-platform-ui/pnpm-lock.yaml | 71 ++++++++----------- .../DatasetFieldDescription.tsx | 30 ++++---- .../DatasetFieldDescriptionPreview.tsx | 19 +++-- .../DatasetFieldTerms/TermItem/TermItem.tsx | 12 ++-- .../InternalDescriptionPreview.tsx | 51 +++++++------ .../CollectorItem/CollectorItem.tsx | 1 - .../DataSourceItem/DataSourceItem.tsx | 1 - .../CollapsibleInfoContainer.styles.ts | 1 + .../shared/elements/InfoItem/InfoItem.tsx | 31 +++----- .../shared/elements/Markdown/Markdown.tsx | 18 ++--- 11 files changed, 107 insertions(+), 130 deletions(-) diff --git a/odd-platform-ui/package.json b/odd-platform-ui/package.json index 80c14b53a..1e6967093 100644 --- a/odd-platform-ui/package.json +++ b/odd-platform-ui/package.json @@ -48,7 +48,7 @@ "@tanstack/react-query": "^5.15.0", "@tanstack/react-virtual": "^3.0.1", "@tanstack/react-table": "^8.11.2", - "@uiw/react-md-editor": "^3.23.5", + "@uiw/react-md-editor": "^3.25.6", "@visx/curve": "^3.3.0", "@visx/event": "^3.3.0", "@visx/group": "^3.3.0", diff --git a/odd-platform-ui/pnpm-lock.yaml b/odd-platform-ui/pnpm-lock.yaml index fd2ac1be6..a2582161a 100644 --- a/odd-platform-ui/pnpm-lock.yaml +++ b/odd-platform-ui/pnpm-lock.yaml @@ -37,8 +37,8 @@ dependencies: specifier: ^3.0.1 version: 3.0.1(react-dom@18.2.0)(react@18.2.0) '@uiw/react-md-editor': - specifier: ^3.23.5 - version: 3.23.5(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0) + specifier: ^3.25.6 + version: 3.25.6(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0) '@visx/curve': specifier: ^3.3.0 version: 3.3.0 @@ -1833,8 +1833,8 @@ packages: /@types/lodash@4.14.202: resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==} - /@types/mdast@3.0.12: - resolution: {integrity: sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==} + /@types/mdast@3.0.15: + resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==} dependencies: '@types/unist': 2.0.7 dev: false @@ -1871,10 +1871,6 @@ packages: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} dev: false - /@types/prop-types@15.7.9: - resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==} - dev: false - /@types/react-dom@18.2.17: resolution: {integrity: sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==} dependencies: @@ -2102,13 +2098,13 @@ packages: resolution: {integrity: sha512-1bbGZ3T+SGmA07BoVPK4UCUDcowDN/moctviJGQexfOc9qL8TMLDQPr7mTPvDKhgJkgnlKkAQNFU8PiarIi9sQ==} dev: false - /@uiw/react-markdown-preview@4.1.15(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-N9itShGvsK5Bh5NETMK5l1nPK8l3iYuN6ygUdIgEHoN0xXkyiAYHP9jC6o8x6JYNWg8z+e0jSbLGjHlyBFO0SA==} + /@uiw/react-markdown-preview@4.2.2(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Jy3GtAqcF2pKgvFtgLUEwR8u2t0Yk/DAnLTl6cf1RzhNYcAxm1auDs3KndZRBDP01xhmYLX4KiOcOg/qv+Jc0A==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.23.5 '@uiw/copy-to-clipboard': 1.0.15 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -2116,7 +2112,7 @@ packages: rehype-attr: 2.1.4 rehype-autolink-headings: 6.1.1 rehype-ignore: 1.0.5 - rehype-prism-plus: 1.6.1 + rehype-prism-plus: 1.6.3 rehype-raw: 6.1.1 rehype-rewrite: 3.0.6 rehype-slug: 5.1.0 @@ -2127,14 +2123,14 @@ packages: - supports-color dev: false - /@uiw/react-md-editor@3.23.5(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-plghfA4BRKeJgwEBudLg7alLVXI2pVVMCesPeZDg3BfmaFpCwQZ3wTUh8y6Agjh/judMJPwuZdyBu4FISnSG6Q==} + /@uiw/react-md-editor@3.25.6(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-YuDv5KiM931WFYBDCyk9/HvtLdIWk9DXvzC6d1riaLufvchM7IUHkqTkSl3HqmTod1exSN+5ZsUtKZ+S+GAsug==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: - '@babel/runtime': 7.22.11 - '@uiw/react-markdown-preview': 4.1.15(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.5 + '@uiw/react-markdown-preview': 4.2.2(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) rehype: 12.0.1 @@ -5307,7 +5303,7 @@ packages: /mdast-util-definitions@5.1.2: resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 '@types/unist': 2.0.7 unist-util-visit: 4.1.2 dev: false @@ -5315,7 +5311,7 @@ packages: /mdast-util-find-and-replace@2.2.2: resolution: {integrity: sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 escape-string-regexp: 5.0.0 unist-util-is: 5.2.1 unist-util-visit-parents: 5.1.3 @@ -5324,7 +5320,7 @@ packages: /mdast-util-from-markdown@1.3.1: resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 '@types/unist': 2.0.7 decode-named-character-reference: 1.0.2 mdast-util-to-string: 3.2.0 @@ -5343,7 +5339,7 @@ packages: /mdast-util-gfm-autolink-literal@1.0.3: resolution: {integrity: sha512-My8KJ57FYEy2W2LyNom4n3E7hKTuQk/0SES0u16tjA9Z3oFkF4RrC/hPAPgjlSpezsOvI8ObcXcElo92wn5IGA==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 ccount: 2.0.1 mdast-util-find-and-replace: 2.2.2 micromark-util-character: 1.2.0 @@ -5352,7 +5348,7 @@ packages: /mdast-util-gfm-footnote@1.0.2: resolution: {integrity: sha512-56D19KOGbE00uKVj3sgIykpwKL179QsVFwx/DCW0u/0+URsryacI4MAdNJl0dh+u2PSsD9FtxPFbHCzJ78qJFQ==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 mdast-util-to-markdown: 1.5.0 micromark-util-normalize-identifier: 1.1.0 dev: false @@ -5360,14 +5356,14 @@ packages: /mdast-util-gfm-strikethrough@1.0.3: resolution: {integrity: sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 mdast-util-to-markdown: 1.5.0 dev: false /mdast-util-gfm-table@1.0.7: resolution: {integrity: sha512-jjcpmNnQvrmN5Vx7y7lEc2iIOEytYv7rTvu+MeyAsSHTASGCCRA79Igg2uKssgOs1i1po8s3plW0sTu1wkkLGg==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 markdown-table: 3.0.3 mdast-util-from-markdown: 1.3.1 mdast-util-to-markdown: 1.5.0 @@ -5378,7 +5374,7 @@ packages: /mdast-util-gfm-task-list-item@1.0.2: resolution: {integrity: sha512-PFTA1gzfp1B1UaiJVyhJZA1rm0+Tzn690frc/L8vNX1Jop4STZgOE6bxUhnzdVSB+vm2GU1tIsuQcA9bxTQpMQ==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 mdast-util-to-markdown: 1.5.0 dev: false @@ -5399,7 +5395,7 @@ packages: /mdast-util-phrasing@3.0.1: resolution: {integrity: sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 unist-util-is: 5.2.1 dev: false @@ -5407,7 +5403,7 @@ packages: resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==} dependencies: '@types/hast': 2.3.8 - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 mdast-util-definitions: 5.1.2 micromark-util-sanitize-uri: 1.2.0 trim-lines: 3.0.1 @@ -5419,7 +5415,7 @@ packages: /mdast-util-to-markdown@1.5.0: resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 '@types/unist': 2.0.7 longest-streak: 3.1.0 mdast-util-phrasing: 3.0.1 @@ -5432,7 +5428,7 @@ packages: /mdast-util-to-string@3.2.0: resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 dev: false /memoize-one@5.2.1: @@ -6259,7 +6255,7 @@ packages: react: '>=16' dependencies: '@types/hast': 2.3.8 - '@types/prop-types': 15.7.9 + '@types/prop-types': 15.7.11 '@types/react': 18.2.39 '@types/unist': 2.0.7 comma-separated-tokens: 2.0.3 @@ -6578,17 +6574,6 @@ packages: unified: 10.1.2 dev: false - /rehype-prism-plus@1.6.1: - resolution: {integrity: sha512-HCLGvrbn9J1FSvsHo3/mJstToVJGe8czeUULpgPZhc3X21XJHCjYlZSBL4dH784WPUz/sW4PCATf8J1o7fgblA==} - dependencies: - hast-util-to-string: 2.0.0 - parse-numeric-range: 1.3.0 - refractor: 4.8.1 - rehype-parse: 8.0.5 - unist-util-filter: 4.0.1 - unist-util-visit: 4.1.2 - dev: false - /rehype-prism-plus@1.6.3: resolution: {integrity: sha512-F6tn376zimnvy+xW0bSnryul+rvVL7NhDIkavc9kAuzDx5zIZW04A6jdXPkcFBhojcqZB8b6pHt6CLqiUx+Tbw==} dependencies: @@ -6649,7 +6634,7 @@ packages: /remark-gfm@3.0.1: resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 mdast-util-gfm: 2.0.2 micromark-extension-gfm: 2.0.3 unified: 10.1.2 @@ -6660,7 +6645,7 @@ packages: /remark-parse@10.0.2: resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==} dependencies: - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 mdast-util-from-markdown: 1.3.1 unified: 10.1.2 transitivePeerDependencies: @@ -6671,7 +6656,7 @@ packages: resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==} dependencies: '@types/hast': 2.3.8 - '@types/mdast': 3.0.12 + '@types/mdast': 3.0.15 mdast-util-to-hast: 12.3.0 unified: 10.1.2 dev: false diff --git a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescription.tsx b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescription.tsx index 4893b13ff..3f63761cc 100644 --- a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescription.tsx +++ b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescription.tsx @@ -76,20 +76,22 @@ const DatasetFieldDescription: FC = ({ /> )} - {editMode ? ( - - ) : ( - - )} + + {editMode ? ( + + ) : ( + + )} + ); }; diff --git a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescriptionPreview/DatasetFieldDescriptionPreview.tsx b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescriptionPreview/DatasetFieldDescriptionPreview.tsx index 18e039102..154c3cb84 100644 --- a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescriptionPreview/DatasetFieldDescriptionPreview.tsx +++ b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescriptionPreview/DatasetFieldDescriptionPreview.tsx @@ -10,16 +10,13 @@ interface DatasetFieldDescriptionPreviewProps { const DatasetFieldDescriptionPreview: FC = ({ isDescriptionEmpty, value, -}) => ( -
- {!isDescriptionEmpty ? ( - - ) : ( - - Description is not created yet - - )} -
-); +}) => + !isDescriptionEmpty ? ( + + ) : ( + + Description is not created yet + + ); export default DatasetFieldDescriptionPreview; diff --git a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx index 86a4d002d..88f1e94e9 100644 --- a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx +++ b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx @@ -1,5 +1,5 @@ import React, { type FC, useCallback } from 'react'; -import { Box } from '@mui/material'; +import { Box, Typography } from '@mui/material'; import { Permission, type TermRef } from 'generated-sources'; import { WithPermissions } from 'components/shared/contexts'; import { @@ -11,6 +11,7 @@ import { import { DeleteIcon, LinkedTermIcon } from 'components/shared/icons'; import { useDeleteDatasetFieldTerm } from 'lib/hooks'; import { termDetailsPath } from 'routes'; +import { Link } from 'react-router-dom'; interface TermItemProps { name: TermRef['name']; @@ -45,15 +46,18 @@ const TermItem: FC = ({ return ( -