diff --git a/catalog-rest-service/src/main/resources/ui/package-lock.json b/catalog-rest-service/src/main/resources/ui/package-lock.json index 4d994670389..d9b80b02900 100644 --- a/catalog-rest-service/src/main/resources/ui/package-lock.json +++ b/catalog-rest-service/src/main/resources/ui/package-lock.json @@ -3804,6 +3804,15 @@ "@types/react-router": "*" } }, + "@types/react-slick": { + "version": "0.23.5", + "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.5.tgz", + "integrity": "sha512-dQ/HwsLpnWXD5d+52WwXIQTfNCRpgd+0CKb+aA8g2CaIpA9T9COdjVYb9KI40Osb4rIgqR7u2AqtL2/HGbBMpg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-test-renderer": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz", @@ -7027,6 +7036,11 @@ "tapable": "^1.0.0" } }, + "enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=" + }, "enquirer": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", @@ -14564,6 +14578,14 @@ "grapheme-splitter": "^1.0.4" } }, + "json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=", + "requires": { + "string-convert": "^0.2.0" + } + }, "json3": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz", @@ -17469,6 +17491,18 @@ "react-transition-group": "^4.3.0" } }, + "react-slick": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.28.1.tgz", + "integrity": "sha512-JwRQXoWGJRbUTE7eZI1rGIHaXX/4YuwX6gn7ulfvUZ4vFDVQAA25HcsHSYaUiRCduTr6rskyIuyPMpuG6bbluw==", + "requires": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + } + }, "react-smooth": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.6.tgz", @@ -18966,6 +19000,11 @@ } } }, + "slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==" + }, "slugify": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.0.tgz", @@ -19401,6 +19440,11 @@ "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", "dev": true }, + "string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=" + }, "string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", diff --git a/catalog-rest-service/src/main/resources/ui/package.json b/catalog-rest-service/src/main/resources/ui/package.json index 152cb9008e1..03c2f1475bd 100644 --- a/catalog-rest-service/src/main/resources/ui/package.json +++ b/catalog-rest-service/src/main/resources/ui/package.json @@ -62,6 +62,7 @@ "react-oidc": "^1.0.3", "react-router-dom": "^5.2.0", "react-select": "^3.1.1", + "react-slick": "^0.28.1", "react-syntax-highlighter": "^15.4.4", "react-tippy": "^1.4.0", "reactjs-localstorage": "^1.0.1", @@ -74,6 +75,7 @@ "slate-history": "^0.59.0", "slate-hyperscript": "^0.59.0", "slate-react": "^0.59.0", + "slick-carousel": "^1.8.1", "stream-http": "^3.2.0", "styled-components": "^5.2.3", "tailwindcss": "^2.1.4", @@ -122,6 +124,7 @@ "@types/react": "^16.9.56", "@types/react-dom": "^16.9.9", "@types/react-router-dom": "^5.1.7", + "@types/react-slick": "^0.23.5", "@types/react-test-renderer": "^17.0.0", "@types/reactjs-localstorage": "^1.0.0", "@types/testing-library__jest-dom": "^5.9.5", diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/ic-whats-new.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/ic-whats-new.svg new file mode 100644 index 00000000000..d6a9a78026c --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/ic-whats-new.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/ChangeLogs.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/ChangeLogs.tsx new file mode 100644 index 00000000000..3f77f556272 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/ChangeLogs.tsx @@ -0,0 +1,56 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + + * http://www.apache.org/licenses/LICENSE-2.0 + + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ + +/* eslint-disable max-len */ + +import React from 'react'; +import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer'; + +type Props = { + data: { + highlight: string; + bugFix: string; + miscellaneous: string; + }; +}; + +const ChangeLogs = ({ data }: Props) => { + return ( +
+
+
+

Highlights

+
+ +
+
+
+

Bug fixes

+
+ +
+
+
+

Miscellaneous

+
+ +
+
+ ); +}; + +export default ChangeLogs; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx new file mode 100644 index 00000000000..52b14ee9221 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx @@ -0,0 +1,67 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + + * http://www.apache.org/licenses/LICENSE-2.0 + + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ + +/* eslint-disable max-len */ + +import { uniqueId } from 'lodash'; +import React, { useEffect, useRef, useState } from 'react'; +import Slider from 'react-slick'; + +type Props = { + data: { title: string; description: string; image: string }[]; +}; + +const FeaturesCarousel = ({ data }: Props) => { + const [currentSlide, setCurrentSlide] = useState(0); + const sliderRef = useRef(null); + + const settings = { + dots: true, + arrows: false, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + initialSlide: 0, + afterChange: (currentSlide: number) => setCurrentSlide(currentSlide), + }; + + useEffect(() => { + if (currentSlide > 0 && sliderRef.current) { + sliderRef.current.slickGoTo(0, true); + setCurrentSlide(0); + } + }, [data]); + + return ( + <> + + {data.map((d) => ( +
+

{d.title}

+

{d.description}

+
+ feature +
+
+ ))} + + + ); +}; + +export default FeaturesCarousel; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx new file mode 100644 index 00000000000..012d061c478 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx @@ -0,0 +1,169 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + + * http://www.apache.org/licenses/LICENSE-2.0 + + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ + +import classNames from 'classnames'; +import React, { FunctionComponent, useState } from 'react'; +import ChangeLogs from './ChangeLogs'; +import FeaturesCarousel from './FeaturesCarousel'; +import { LATEST_VERSION_ID, WHATS_NEW } from './whatsNewData'; +// import { Button } from '../../buttons/Button/Button'; + +type Props = { + header: string; + onCancel: () => void; +}; + +type ToggleType = 'features' | 'change-log'; + +const iconString = `M7.878 3.002a1.876 1.876 0 11-3.751 0 1.876 1.876 0 013.751 0zm1.073.562a3.003 + 3.003 0 01-5.897 0H.563a.563.563 0 010-1.125h2.49a3.002 3.002 0 015.898 0h2.491a.563.563 0 010 1.125H8.951z`; + +export const WhatsNewModal: FunctionComponent = ({ + header, + onCancel, +}: Props) => { + const [activeData, setActiveData] = useState(WHATS_NEW[LATEST_VERSION_ID]); + const [checkedValue, setCheckedValue] = useState('features'); + + const getToggleButtonClasses = (type: string): string => { + return ( + 'tw-flex-1 tw-font-medium tw-border tw-border-transparent tw-rounded tw-py-1 tw-px-2 focus:tw-outline-none' + + (type === checkedValue + ? ' tw-bg-primary tw-border-primary tw-text-white' + : ' tw-text-primary ') + ); + }; + + const handleToggleChange = (type: ToggleType) => { + setCheckedValue(type); + }; + + return ( + +
+
+
+

{header}

+ +
+ + + +
+
+
+ {/* body */} +
+
+
+ +
+
+ {WHATS_NEW.map((d) => ( +
+ + + + +
+ ))} +
+
+
+
+
+
+

+ {activeData.version} +

+

+ {activeData.description} +

+
+
+
+ + +
+
+
+
+ {checkedValue === 'features' && ( + + )} + {checkedValue === 'change-log' && ( + + )} +
+
+
+
+
+
+
+ ); +}; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts new file mode 100644 index 00000000000..7506032e0af --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts @@ -0,0 +1,129 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + + * http://www.apache.org/licenses/LICENSE-2.0 + + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ + +/* eslint-disable max-len */ + +export const LATEST_VERSION_ID = 2; + +const dummyImg = 'https://via.placeholder.com/720x270'; + +export const WHATS_NEW = [ + { + id: 0, + version: 'v4.00', + description: 'Released on 4 Aug 2021.', + features: [ + { + title: 'lorem ipsum v4.00', + description: `It is a long established fact that a reader will be distracted by the readable content + of a page when looking at its layout. The point of using Lorem Ipsum is that it has a + more-or-less normal distribution of letters, as opposed to using 'Content here, content + here', making it look like readable English. Many desktop publishing packages and web + page editors now use Lorem Ipsum as their default model text, and a search for 'lorem + ipsum' will uncover many web sites still in their infancy.`, + image: dummyImg, + }, + { + title: 'lorem ipsum v4.00', + description: `It is a long established fact that a reader will be distracted by the readable content + of a page when looking at its layout. The point of using Lorem Ipsum is that it has a + more-or-less normal distribution of letters, as opposed to using 'Content here, content + here', making it look like readable English. Many desktop publishing packages and web + page editors now use Lorem Ipsum as their default model text, and a search for 'lorem + ipsum' will uncover many web sites still in their infancy.`, + image: dummyImg, + }, + ], + changeLogs: { + highlight: `- Added experimental, opt-in CSS Grid support\n- Added support for responsive offcanvas components in navbars\n- Added new placeholders component for skeleton loading screens\n- Added support for horizontal collapsing in the collapse component\n- Added new stack and vertical rule helpers\n- Added tons of new CSS variables for body styles, colors, RGB colors, and more\n- Updated .bg-* and .text-* utilities to use CSS variables and new RGB CSS variables for real-time customization`, + bugFix: `- [#31813](https://www.github.com): Add optional CSS grid\n- [#31859](https://github.com): Add a "skeletons" component\n- [#32319](https://github.com): Add maps for all colors, document how to extend color utilities\n- [#33403](https://github.com): modal: change data-dismiss so that it can be outside of a modal using bs-target\n- [#33781](https://github.com): Add utility classes for opacity\n- [#33986](https://github.com): New helpers: .hstack, .vstack, and .vr\n- [#34253](https://github.com): Add horizontal collapse support\n + `, + miscellaneous: `- [#31813](https://www.github.com): Add optional CSS grid\n- [#31859](https://github.com): Add a "skeletons" component\n- [#32319](https://github.com): Add maps for all colors, document how to extend color utilities\n- [#33403](https://github.com): modal: change data-dismiss so that it can be outside of a modal using bs-target\n- [#33781](https://github.com): Add utility classes for opacity\n- [#33986](https://github.com): New helpers: .hstack, .vstack, and .vr\n- [#34253](https://github.com): Add horizontal collapse support\n + `, + }, + }, + { + id: 1, + version: 'v4.50', + description: 'Released on 8 Aug 2021.', + features: [ + { + title: 'lorem ipsum v4.50', + description: + "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ", + image: dummyImg, + }, + { + title: 'lorem ipsum v4.50', + description: + "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ", + image: dummyImg, + }, + { + title: 'lorem ipsum v4.50', + description: + "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ", + image: dummyImg, + }, + { + title: 'lorem ipsum v4.50', + description: + "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ", + image: dummyImg, + }, + ], + changeLogs: { + highlight: `- Added experimental, opt-in CSS Grid support\n- Added support for responsive offcanvas components in navbars\n- Added new placeholders component for skeleton loading screens\n- Added support for horizontal collapsing in the collapse component\n- Added new stack and vertical rule helpers\n- Added tons of new CSS variables for body styles, colors, RGB colors, and more\n- Updated .bg-* and .text-* utilities to use CSS variables and new RGB CSS variables for real-time customization`, + bugFix: `- [#31813](https://www.github.com): Add optional CSS grid\n- [#31859](https://github.com): Add a "skeletons" component\n- [#32319](https://github.com): Add maps for all colors, document how to extend color utilities\n- [#33403](https://github.com): modal: change data-dismiss so that it can be outside of a modal using bs-target\n- [#33781](https://github.com): Add utility classes for opacity\n- [#33986](https://github.com): New helpers: .hstack, .vstack, and .vr\n- [#34253](https://github.com): Add horizontal collapse support\n + `, + miscellaneous: `- [#31813](https://www.github.com): Add optional CSS grid\n- [#31859](https://github.com): Add a "skeletons" component\n- [#32319](https://github.com): Add maps for all colors, document how to extend color utilities\n- [#33403](https://github.com): modal: change data-dismiss so that it can be outside of a modal using bs-target\n- [#33781](https://github.com): Add utility classes for opacity\n- [#33986](https://github.com): New helpers: .hstack, .vstack, and .vr\n- [#34253](https://github.com): Add horizontal collapse support\n + `, + }, + }, + { + id: 2, + version: 'v5.01', + description: 'Released on 20 Aug 2021.', + features: [ + { + title: 'lorem ipsum v5.01 slide 1', + description: + "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ", + image: dummyImg, + }, + { + title: 'lorem ipsum v5.01 slide 2', + description: + "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ", + image: dummyImg, + }, + { + title: 'lorem ipsum v5.01 slide 3', + description: + "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ", + image: dummyImg, + }, + ], + changeLogs: { + highlight: `- Added experimental, opt-in CSS Grid support\n- Added support for responsive offcanvas components in navbars\n- Added new placeholders component for skeleton loading screens\n- Added support for horizontal collapsing in the collapse component\n- Added new stack and vertical rule helpers\n- Added tons of new CSS variables for body styles, colors, RGB colors, and more\n- Updated .bg-* and .text-* utilities to use CSS variables and new RGB CSS variables for real-time customization`, + bugFix: `- [#31813](https://www.github.com): Add optional CSS grid\n- [#31859](https://github.com): Add a "skeletons" component\n- [#32319](https://github.com): Add maps for all colors, document how to extend color utilities\n- [#33403](https://github.com): modal: change data-dismiss so that it can be outside of a modal using bs-target\n- [#33781](https://github.com): Add utility classes for opacity\n- [#33986](https://github.com): New helpers: .hstack, .vstack, and .vr\n- [#34253](https://github.com): Add horizontal collapse support\n + `, + miscellaneous: `- [#31813](https://www.github.com): Add optional CSS grid\n- [#31859](https://github.com): Add a "skeletons" component\n- [#32319](https://github.com): Add maps for all colors, document how to extend color utilities\n- [#33403](https://github.com): modal: change data-dismiss so that it can be outside of a modal using bs-target\n- [#33781](https://github.com): Add utility classes for opacity\n- [#33986](https://github.com): New helpers: .hstack, .vstack, and .vr\n- [#34253](https://github.com): Add horizontal collapse support\n + `, + }, + }, +]; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx index 4563c8de244..61e464b8e99 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx @@ -40,6 +40,7 @@ import { import { activeLink, normalLink } from '../../utils/styleconstant'; import SVGIcons, { Icons } from '../../utils/SvgUtils'; import DropDown from '../dropdown/DropDown'; +import { WhatsNewModal } from '../Modals/WhatsNewModal'; import { ReactComponent as IconDefaultUserProfile } from './../../assets/svg/ic-default-profile.svg'; import SearchOptions from './SearchOptions'; import Suggestions from './Suggestions'; @@ -54,6 +55,7 @@ const Appbar: React.FC = (): JSX.Element => { const searchQuery = match?.params?.searchQuery; const [searchValue, setSearchValue] = useState(searchQuery); const [isOpen, setIsOpen] = useState(true); + const [isFeatureModalOpen, setIsFeatureModalOpen] = useState(false); const navStyle = (value: boolean) => { if (value) return { color: activeLink }; @@ -131,6 +133,17 @@ const Appbar: React.FC = (): JSX.Element => { /> + { /> + {isFeatureModalOpen && ( + setIsFeatureModalOpen(false)} + /> + )} ) : null} diff --git a/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts b/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts index b87fbcc5ca7..dd9ad3eebcf 100644 --- a/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts +++ b/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts @@ -25,3 +25,5 @@ declare module 'markdown-draft-js'; declare module 'react-syntax-highlighter'; declare module 'rehype-raw'; declare module 'react-codemirror2'; +declare module 'react-slick'; +declare module 'slick-carousel'; diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/index.js b/catalog-rest-service/src/main/resources/ui/src/styles/index.js index 38df5ea3285..98f91901963 100644 --- a/catalog-rest-service/src/main/resources/ui/src/styles/index.js +++ b/catalog-rest-service/src/main/resources/ui/src/styles/index.js @@ -19,6 +19,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'; import 'tailwindcss/tailwind.css'; import './fonts.css'; import './myDataDetailsTemp.css'; +import './slick-carousel.scss'; import './stepper.css'; import './tailwind.css'; import './temp.css'; diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/slick-carousel.scss b/catalog-rest-service/src/main/resources/ui/src/styles/slick-carousel.scss new file mode 100644 index 00000000000..a71ba832d4b --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/styles/slick-carousel.scss @@ -0,0 +1,4 @@ +$slick-font-path: '~slick-carousel/slick/fonts/'; +$slick-loader-path: '~slick-carousel/slick/'; + +@import '~slick-carousel/slick/slick', '~slick-carousel/slick/slick-theme'; diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css index e22689bf1e7..1de3835f886 100644 --- a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css +++ b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css @@ -117,7 +117,7 @@ background-position-x: center; } .tw-modal-backdrop { - @apply tw-opacity-60 tw-bg-body-hover tw-absolute tw-inset-0; + @apply tw-opacity-60 tw-bg-grey-backdrop tw-absolute tw-inset-0; } .tw-modal-container { @apply tw-flex tw-flex-col tw-absolute tw-py-5 tw-bg-white tw-w-11/12 tw-max-w-screen-lg tw-max-h-screen tw-mx-auto tw-rounded-lg tw-border tw-border-main tw-shadow-modal; @@ -299,4 +299,18 @@ .text-highlighter { @apply tw-bg-warning-lite tw-p-1; } + + /* react-slick */ + + .slick-dots { + @apply tw--bottom-10 !important; + } + + .slick-dots li button:before { + @apply tw-text-sm tw-text-separator tw-opacity-100 !important; + } + + .slick-dots li.slick-active button:before { + @apply tw-text-primary tw-opacity-100 !important; + } } diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx index 97dcabc3957..93ebebe2978 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx @@ -40,6 +40,7 @@ import IconTimesCircle from '../assets/svg/ic-times-circle.svg'; import IconTrends from '../assets/svg/ic-trends.svg'; import IconUpArrow from '../assets/svg/ic-up-arrow.svg'; import IconVEllipsis from '../assets/svg/ic-v-ellipsis.svg'; +import IconWhatsNew from '../assets/svg/ic-whats-new.svg'; import IconWorkflows from '../assets/svg/ic-workflows.svg'; import IconKey from '../assets/svg/icon-key.svg'; import IconNotNull from '../assets/svg/icon-notnull.svg'; @@ -113,6 +114,7 @@ export const Icons = { TERMS: 'terms', DOC: 'doc', API: 'api', + WHATS_NEW: 'whats-new', TABLE: 'table', TOPIC: 'topic', DASHBOARD: 'dashboard', @@ -329,6 +331,10 @@ const SVGIcons: FunctionComponent = ({ case Icons.API: IconComponent = IconAPI; + break; + case Icons.WHATS_NEW: + IconComponent = IconWhatsNew; + break; case Icons.TABLE: IconComponent = IconTable; diff --git a/catalog-rest-service/src/main/resources/ui/tailwind.config.js b/catalog-rest-service/src/main/resources/ui/tailwind.config.js index 377923ad446..81944954311 100644 --- a/catalog-rest-service/src/main/resources/ui/tailwind.config.js +++ b/catalog-rest-service/src/main/resources/ui/tailwind.config.js @@ -26,7 +26,7 @@ const secondary = '#B02AAC'; const secondaryBG = '#B02AAC40'; // state colors -const success = '#51C41A'; +const success = '#008376'; const error = '#FF4C3B'; const info = '#1890FF'; const warning = '#FFC34E'; @@ -37,6 +37,7 @@ const bodyBG = '#FCFBFE'; const bodyHoverBG = '#F9F8FD'; const tagBG = '#EEEAF8'; const primaryBG = '#7147E840'; // 'rgba(113, 71, 232, 0.25)'; +const backdropBG = '#302E36'; // Borders and Separators const mainBorder = '#E2DCE4'; @@ -63,7 +64,6 @@ module.exports = { borderColor: { 'orange-400': '#F9826C', main: mainBorder, - separator: mainSeparator, text: textBody, hover: textBody, focus: primary, @@ -77,6 +77,7 @@ module.exports = { 'grey-muted': textMuted, 'grey-muted-lite': textMutedLite, 'grey-dark': textDark, + 'grey-backdrop': backdropBG, 'primary-lite': primaryBG, primary: primary, 'primary-hover': primaryHover, @@ -92,6 +93,7 @@ module.exports = { warning: warning, 'warning-lite': warningBG, info: info, + separator: mainSeparator, }, fontFamily: { sans: ['Inter', ...defaultTheme.fontFamily.sans],