mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-09-08 16:38:04 +00:00
Whats new feature modal (#442)
* added whats new feature * added Changes log feature in whats new modal * small fix * samll fixe * fixed parsing error issue and carousal dots issue * excluded node_modules from parsing in webpack
This commit is contained in:
Shailesh Parmar
GitHub
parent
60a0db9ad6
commit
5cde0bc1bc
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve">
|
||||
<path d="M460.896,241.842c0-25.724-19.396-46.99-44.329-49.977V62.755c0-7.905-5.128-14.599-12.761-16.656 c-7.631-2.055-15.428,1.153-19.4,7.986c-27.273,46.922-70.229,78.994-127.675,95.327c-43.439,12.35-79.285,10.56-79.631,10.539 c-0.526-0.03-1.049-0.005-1.567,0.047H83.682C37.54,159.998,0,197.538,0,243.68c0,43.461,33.307,79.277,75.734,83.294 l27.704,113.922c3.668,15.084,17.072,25.619,32.596,25.619h19.228c10.359,0,19.972-4.671,26.374-12.816s8.669-18.59,6.222-28.656 l-23.755-97.682h11.413c0.52,0.053,1.045,0.078,1.575,0.048c0.356-0.02,36.201-1.812,79.64,10.539 c57.445,16.333,100.401,48.405,127.675,95.326c3.171,5.457,8.78,8.602,14.796,8.602c1.52,0,3.065-0.201,4.604-0.615 c7.633-2.057,12.761-8.75,12.761-16.655V295.494c24.933-2.986,44.329-24.252,44.329-49.976V241.842z M165.264,416.777 l3.159,12.992c0.989,4.065,0.074,8.283-2.512,11.572c-2.584,3.289-6.466,5.175-10.649,5.175h-19.228 c-6.269,0-11.681-4.254-13.162-10.345L96.411,327.362h47.109l7.063,29.045h-4.78c-5.523,0-10,4.477-10,10s4.477,10,10,10h9.643 l4.954,20.37h-3.134c-5.523,0-10,4.477-10,10s4.477,10,10,10H165.264z M166.533,264.926h-62.146c-5.523,0-10,4.477-10,10 s4.477,10,10,10h62.146v22.436h-14.609c-0.183-0.01-0.365-0.023-0.551-0.023H83.682c-0.095,0-0.189,0.014-0.284,0.016 C48.415,307.2,20,278.699,20,243.68c0-35.114,28.568-63.682,63.682-63.682h82.851V264.926z M396.565,201.493v84.374v128.969 c-29.968-46.606-76.453-79.813-135.04-96.316c-32.439-9.138-60.458-10.963-74.992-11.2v-32.394V180.04 c14.536-0.237,42.556-2.063,74.992-11.2c58.586-16.504,105.072-49.71,135.04-96.316V201.493z M440.894,245.518 c0,14.674-10.467,26.949-24.329,29.749v-63.174c13.861,2.8,24.329,15.075,24.329,29.749V245.518z" fill="#000000" data-original="#000000" style=""></path>
|
||||
<path d="M463.889,185.337c2.403,0,4.814-0.861,6.73-2.606l28.843-26.268c4.083-3.719,4.379-10.043,0.66-14.127 c-3.719-4.083-10.043-4.378-14.127-0.66l-28.842,26.267c-4.083,3.719-4.379,10.043-0.66,14.127 C458.467,184.237,461.173,185.337,463.889,185.337z" fill="#000000" data-original="#000000" style=""></path>
|
||||
<path d="M470.62,304.63c-4.084-3.718-10.408-3.423-14.127,0.66c-3.719,4.083-3.423,10.408,0.66,14.127l28.842,26.267 c1.918,1.746,4.328,2.607,6.731,2.607c2.716,0,5.423-1.1,7.396-3.267c3.719-4.083,3.423-10.408-0.66-14.127L470.62,304.63z" fill="#000000" data-original="#000000" style=""></path>
|
||||
<path d="M502,233.68h-22.147c-5.523,0-10,4.477-10,10s4.477,10,10,10H502c5.523,0,10-4.477,10-10S507.523,233.68,502,233.68z" fill="#000000" data-original="#000000" style=""></path>
|
||||
<path d="M72.42,271.104c-0.25-0.61-0.56-1.19-0.92-1.73c-0.37-0.55-0.78-1.06-1.24-1.52c-0.47-0.46-0.98-0.88-1.53-1.24 c-0.54-0.36-1.12-0.67-1.72-0.92c-0.61-0.25-1.24-0.44-1.87-0.57c-1.29-0.26-2.62-0.26-3.91,0c-0.64,0.13-1.27,0.32-1.87,0.57 c-0.6,0.25-1.19,0.56-1.73,0.92c-0.55,0.36-1.06,0.78-1.52,1.24c-0.46,0.46-0.88,0.97-1.24,1.52c-0.36,0.54-0.67,1.12-0.92,1.73 c-0.25,0.6-0.44,1.23-0.57,1.87s-0.2,1.3-0.2,1.95s0.07,1.31,0.2,1.96c0.13,0.63,0.32,1.26,0.57,1.87 c0.25,0.6,0.56,1.18,0.92,1.72c0.36,0.55,0.78,1.06,1.24,1.52c0.46,0.46,0.97,0.88,1.52,1.25c0.54,0.36,1.13,0.67,1.73,0.92 c0.6,0.25,1.23,0.44,1.87,0.57c0.65,0.13,1.3,0.19,1.95,0.19c0.66,0,1.31-0.06,1.96-0.19c0.64-0.13,1.26-0.32,1.87-0.57 c0.6-0.25,1.18-0.56,1.72-0.92c0.55-0.37,1.06-0.79,1.53-1.25c0.46-0.46,0.87-0.97,1.24-1.52c0.36-0.54,0.67-1.12,0.92-1.72 c0.25-0.61,0.44-1.24,0.57-1.87c0.13-0.65,0.19-1.31,0.19-1.96c0-0.65-0.06-1.31-0.19-1.95S72.67,271.704,72.42,271.104z" fill="#000000" data-original="#000000" style=""></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -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 (
|
||||
<div>
|
||||
<div className="tw-mb-4">
|
||||
<div className="tw-border-b tw-mb-2.5 tw-border-text">
|
||||
<p className="tw-text-base tw-font-medium tw-mb-2.5">Highlights</p>
|
||||
</div>
|
||||
<RichTextEditorPreviewer markdown={data.highlight} />
|
||||
</div>
|
||||
<div className="tw-mb-4">
|
||||
<div className="tw-border-b tw-mb-2.5 tw-border-text">
|
||||
<p className="tw-text-base tw-font-medium tw-mb-2.5">Bug fixes</p>
|
||||
</div>
|
||||
<RichTextEditorPreviewer markdown={data.bugFix} />
|
||||
</div>
|
||||
<div className="tw-mb-4">
|
||||
<div className="tw-border-b tw-mb-2.5 tw-border-text">
|
||||
<p className="tw-text-base tw-font-medium tw-mb-2.5">Miscellaneous</p>
|
||||
</div>
|
||||
<RichTextEditorPreviewer markdown={data.miscellaneous} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangeLogs;
|
||||
@ -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<typeof Slider | null>(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 (
|
||||
<>
|
||||
<Slider ref={sliderRef} {...settings}>
|
||||
{data.map((d) => (
|
||||
<div className="tw-pr-2" key={uniqueId()}>
|
||||
<p className="tw-text-sm tw-font-medium tw-mb-2">{d.title}</p>
|
||||
<p className="tw-text-sm tw-mb-3">{d.description}</p>
|
||||
<div className="tw-max-w-3xl">
|
||||
<img alt="feature" className="tw-w-full" src={d.image} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeaturesCarousel;
|
||||
@ -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<Props> = ({
|
||||
header,
|
||||
onCancel,
|
||||
}: Props) => {
|
||||
const [activeData, setActiveData] = useState(WHATS_NEW[LATEST_VERSION_ID]);
|
||||
const [checkedValue, setCheckedValue] = useState<ToggleType>('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 (
|
||||
<dialog className="tw-modal">
|
||||
<div className="tw-modal-backdrop" />
|
||||
<div className="tw-modal-container tw-pb-0">
|
||||
<div className="tw-modal-header">
|
||||
<p className="tw-modal-title">{header}</p>
|
||||
|
||||
<div className="tw-flex">
|
||||
<svg
|
||||
className="tw-w-6 tw-h-6 tw-ml-1 tw-cursor-pointer"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
onClick={onCancel}>
|
||||
<path
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="tw-modal-body tw-p-0 tw-overflow-hidden"
|
||||
style={{ height: '550px' }}>
|
||||
{/* body */}
|
||||
<div className="tw-flex tw-w-auto tw-h-full">
|
||||
<div
|
||||
className="tw-border-r-2 tw-px-4 tw-py-4 tw-border-separate"
|
||||
style={{ width: '14%' }}>
|
||||
<div className="tw-mb-2.5 tw-flex tw-justify-end">
|
||||
<button
|
||||
className="tw-border tw-rounded-md tw-border-success tw-text-success tw-px-1.5 tw-py-1 tw-text-xs"
|
||||
onClick={() => setActiveData(WHATS_NEW[LATEST_VERSION_ID])}>
|
||||
Latest Release
|
||||
</button>
|
||||
</div>
|
||||
<div className="tw-flex tw-flex-col-reverse">
|
||||
{WHATS_NEW.map((d) => (
|
||||
<div
|
||||
className="tw-flex tw-items-center tw-justify-end tw-mb-2.5"
|
||||
key={d.id}>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 13 6"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d={iconString}
|
||||
fill={activeData.id === d.id ? '#7147E8' : '#6B7280'}
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<button
|
||||
className={classNames(
|
||||
'tw-ml-1',
|
||||
activeData.id === d.id ? 'tw-text-primary' : null
|
||||
)}
|
||||
onClick={() => setActiveData(d)}>
|
||||
{d.version}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tw-overflow-y-auto" style={{ width: '86%' }}>
|
||||
<div className="tw-pt-4 tw-px-10 ">
|
||||
<div className="tw-flex tw-justify-between tw-items-center tw-pb-3">
|
||||
<div>
|
||||
<p className="tw-text-base tw-font-medium">
|
||||
{activeData.version}
|
||||
</p>
|
||||
<p className="tw-text-grey-muted tw-text-xs">
|
||||
{activeData.description}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="tw-w-60 tw-inline-flex tw-border tw-border-primary
|
||||
tw-text-sm tw-rounded-md tw-h-8 tw-bg-white">
|
||||
<button
|
||||
className={getToggleButtonClasses('features')}
|
||||
onClick={() => handleToggleChange('features')}>
|
||||
Features
|
||||
</button>
|
||||
<button
|
||||
className={getToggleButtonClasses('change-log')}
|
||||
onClick={() => {
|
||||
handleToggleChange('change-log');
|
||||
}}>
|
||||
Change Logs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{checkedValue === 'features' && (
|
||||
<FeaturesCarousel data={activeData.features} />
|
||||
)}
|
||||
{checkedValue === 'change-log' && (
|
||||
<ChangeLogs data={activeData.changeLogs} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
);
|
||||
};
|
||||
@ -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
|
||||
`,
|
||||
},
|
||||
},
|
||||
];
|
||||
@ -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<boolean>(true);
|
||||
const [isFeatureModalOpen, setIsFeatureModalOpen] = useState<boolean>(false);
|
||||
const navStyle = (value: boolean) => {
|
||||
if (value) return { color: activeLink };
|
||||
|
||||
@ -131,6 +133,17 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="tw-nav focus:tw-no-underline hover:tw-underline"
|
||||
onClick={() => setIsFeatureModalOpen(true)}>
|
||||
<SVGIcons
|
||||
alt="Doc icon"
|
||||
className="tw-align-middle tw--mt-0.5 tw-mr-1"
|
||||
icon={Icons.WHATS_NEW}
|
||||
width="12"
|
||||
/>
|
||||
<span>What's new</span>
|
||||
</button>
|
||||
<NavLink
|
||||
className="tw-nav focus:tw-no-underline"
|
||||
data-testid="appbar-item"
|
||||
@ -178,6 +191,12 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isFeatureModalOpen && (
|
||||
<WhatsNewModal
|
||||
header="What’s new!"
|
||||
onCancel={() => setIsFeatureModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<Props> = ({
|
||||
case Icons.API:
|
||||
IconComponent = IconAPI;
|
||||
|
||||
break;
|
||||
case Icons.WHATS_NEW:
|
||||
IconComponent = IconWhatsNew;
|
||||
|
||||
break;
|
||||
case Icons.TABLE:
|
||||
IconComponent = IconTable;
|
||||
|
||||
@ -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],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user