From e2b0f632a687b6f2fbc37149b848fd0bab676934 Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 7 May 2024 14:16:55 +0100 Subject: [PATCH 01/73] set localStorage with changes from sharable URL Signed-off-by: huongg --- .../shareable-url-modal.js | 20 ++++++++++++++++--- src/config.js | 3 ++- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 9d58bee238..f492414eb6 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -4,9 +4,11 @@ import { connect } from 'react-redux'; import classnames from 'classnames'; import { toggleShareableUrlModal } from '../../actions'; import { fetchPackageCompatibilities } from '../../utils'; +import { saveLocalStorage } from '../../store/helpers'; import { - hostingPlatform, + hostingPlatforms, inputKeyToStateKeyMap, + localStorageSharableUrl, KEDRO_VIZ_PUBLISH_DOCS_URL, KEDRO_VIZ_PREVIEW_DATASETS_DOCS_URL, KEDRO_VIZ_PUBLISH_AWS_DOCS_URL, @@ -111,15 +113,27 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { if (request.ok) { setResponseUrl(response.url); setDeploymentState('success'); + + const localStorageValue = {}; + for (const platform in hostingPlatforms) { + if (inputValues.platform === platform) { + // to set the platform property based on the current playform value from inputValues + // expected output: { aws: { ...inputValues }} + localStorageValue[inputValues.platform] = { ...inputValues }; + } + } + saveLocalStorage(localStorageSharableUrl, localStorageValue); } else { setResponseUrl(null); setResponseError(response.message || 'Error occurred!'); setDeploymentState('failure'); + // saveLocalStorage(localStorageSharableUrl, null); } } catch (error) { console.error(error); setResponseError(error.message || 'Error occurred!'); setDeploymentState('failure'); + // saveLocalStorage(localStorageSharableUrl, null); } finally { setIsLoading(false); } @@ -387,14 +401,14 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Hosting platform { onChange('platform', selectedPlatform.value); }} width={null} > - {Object.entries(hostingPlatform).map(([value, label]) => ( + {Object.entries(hostingPlatforms).map(([value, label]) => ( Date: Thu, 9 May 2024 11:57:00 +0100 Subject: [PATCH 02/73] create shared URLBox component Signed-off-by: huongg --- .../shareable-url-modal.js | 31 +++++++++++++++ .../shareable-url-modal.scss | 29 +++++++++++++- .../shareable-url-modal/url-box/index.js | 3 ++ .../shareable-url-modal/url-box/url-box.js | 38 +++++++++++++++++++ .../shareable-url-modal/url-box/url-box.scss | 34 +++++++++++++++++ 5 files changed, 134 insertions(+), 1 deletion(-) create mode 100644 src/components/shareable-url-modal/url-box/index.js create mode 100644 src/components/shareable-url-modal/url-box/url-box.js create mode 100644 src/components/shareable-url-modal/url-box/url-box.scss diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index f492414eb6..75faaa0164 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -211,6 +211,37 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ) : null; }; + const renderPublishedContent = () => { + const storageURL = localStorageValue['aws']['endpoint']; + return Object.keys(localStorageValue).length > 0 ? ( + <> +
+
+ Publish and Share Kedro-Viz +
+ onCopyClick(storageURL)} + href={() => handleResponseUrl()} + showCopiedText={showCopied} + /> +
+
+ + Republish Kedro-Viz to push new updates + + +
+ + ) : null; + }; + const renderSuccessContent = () => { return responseUrl ? ( <> diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index a03602afcc..70e3b60e8b 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -210,7 +210,7 @@ } &__url-wrapper { - background: rgb(255 255 255 / 4%); + background-color: #{variables.$slate-700}; display: flex; height: 50px; justify-content: space-between; @@ -275,6 +275,33 @@ } } +.shareable-url-modal__published-url { + width: 100%; + padding: 48px; + background-color: #{variables.$slate-300}; +} + +.shareable-url-modal__republished-action { + align-items: baseline; + display: flex; + justify-content: space-between; + width: 100%; + padding: 48px 48px 56px; + background: var(--color-modal-bg-1); + border-top: 1px solid var(--color-footer-border); + + .button__btn--secondary { + // double check the hex colour with Step + background-color: #{variables.$black-600}; + } + + .shareable-url-modal__republished-action-text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + } +} + .shareable-url-timestamp { padding: 4px 8px 8px; position: absolute; diff --git a/src/components/shareable-url-modal/url-box/index.js b/src/components/shareable-url-modal/url-box/index.js new file mode 100644 index 0000000000..c5da153240 --- /dev/null +++ b/src/components/shareable-url-modal/url-box/index.js @@ -0,0 +1,3 @@ +import UrlBox from './url-box'; + +export default UrlBox; diff --git a/src/components/shareable-url-modal/url-box/url-box.js b/src/components/shareable-url-modal/url-box/url-box.js new file mode 100644 index 0000000000..2e8cba59d4 --- /dev/null +++ b/src/components/shareable-url-modal/url-box/url-box.js @@ -0,0 +1,38 @@ +import Tooltip from '../../ui/tooltip'; +import Button from '../../ui/button'; + +import './url-box.scss'; + +const UrlBox = ({ url, onClick, href, showCopiedText }) => ( +
+ + {url} + + {window.navigator.clipboard && ( +
+ + +
+ )} +
+); + +export default UrlBox; diff --git a/src/components/shareable-url-modal/url-box/url-box.scss b/src/components/shareable-url-modal/url-box/url-box.scss new file mode 100644 index 0000000000..38c77919e2 --- /dev/null +++ b/src/components/shareable-url-modal/url-box/url-box.scss @@ -0,0 +1,34 @@ +@use '../../../styles/variables' as variables; + +.url-box__wrapper { + background-color: #{variables.$slate-700}; + display: flex; + height: 50px; + justify-content: space-between; + margin-top: 32px; + text-overflow: ellipsis; + + a { + color: var(--color-deployed-link); + font-size: 16px; + line-height: 32px; + cursor: pointer; + display: flex; + align-items: center; + padding-left: 16px; + font-family: inherit; + text-decoration: underline; + width: 90%; + } +} + +.url-box___button { + position: relative; + display: flex; + align-items: center; + border: 1px solid white; + + .button__btn--secondary { + width: 100px; + } +} From c9c8a57479cd70187b0598d5c4656a65b18f5fcf Mon Sep 17 00:00:00 2001 From: huongg Date: Mon, 13 May 2024 21:17:46 +0100 Subject: [PATCH 03/73] first draft version of published content version Signed-off-by: huongg --- .../shareable-url-modal.js | 99 +++++++++++++------ .../shareable-url-modal.scss | 4 + .../shareable-url-modal/url-box/index.js | 3 - 3 files changed, 73 insertions(+), 33 deletions(-) delete mode 100644 src/components/shareable-url-modal/url-box/index.js diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 75faaa0164..a3bcb56422 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import classnames from 'classnames'; import { toggleShareableUrlModal } from '../../actions'; import { fetchPackageCompatibilities } from '../../utils'; -import { saveLocalStorage } from '../../store/helpers'; +import { saveLocalStorage, loadLocalStorage } from '../../store/helpers'; import { hostingPlatforms, inputKeyToStateKeyMap, @@ -28,6 +28,7 @@ import MenuOption from '../ui/menu-option'; import Tooltip from '../ui/tooltip'; import './shareable-url-modal.scss'; +import UrlBox from './url-box/url-box'; const modalMessages = (status, info = '') => { const messages = { @@ -55,7 +56,11 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const [showCopied, setShowCopied] = useState(false); const [compatibilityData, setCompatibilityData] = useState({}); const [canUseShareableUrls, setCanUseShareableUrls] = useState(true); - const [isDisclaimerViewed, setIsDisclaimerViewed] = useState(false); + const [showPublishedUrl, setShowPublishedUrl] = useState(false); + const [hostingPlatformLocalStorageVal, _] = useState( + loadLocalStorage(localStorageSharableUrl) || {} + ); + const [showPopulatedContent, setShowPopulatedContent] = useState(false); useEffect(() => { async function fetchPackageCompatibility() { @@ -84,6 +89,23 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { fetchPackageCompatibility(); }, []); + const toShowPublishedContent = () => { + if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { + setDeploymentState('published'); + setShowPublishedUrl(true); + } + }; + + const toShowMainContentWithPopulatedContent = () => { + setShowPopulatedContent(true); + setShowPublishedUrl(false); + setDeploymentState('default'); + }; + + useEffect(() => { + toShowPublishedContent(); + }, []); + const onChange = (key, value) => { setIsFormDirty((prevState) => ({ ...prevState, @@ -114,33 +136,31 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { setResponseUrl(response.url); setDeploymentState('success'); - const localStorageValue = {}; + const hostingPlatformVal = {}; for (const platform in hostingPlatforms) { if (inputValues.platform === platform) { // to set the platform property based on the current playform value from inputValues // expected output: { aws: { ...inputValues }} - localStorageValue[inputValues.platform] = { ...inputValues }; + hostingPlatformVal[inputValues.platform] = { ...inputValues }; } } - saveLocalStorage(localStorageSharableUrl, localStorageValue); + saveLocalStorage(localStorageSharableUrl, hostingPlatformVal); } else { setResponseUrl(null); setResponseError(response.message || 'Error occurred!'); setDeploymentState('failure'); - // saveLocalStorage(localStorageSharableUrl, null); } } catch (error) { console.error(error); setResponseError(error.message || 'Error occurred!'); setDeploymentState('failure'); - // saveLocalStorage(localStorageSharableUrl, null); } finally { setIsLoading(false); } }; - const onCopyClick = () => { - window.navigator.clipboard.writeText(responseUrl); + const onCopyClick = (url) => { + window.navigator.clipboard.writeText(url); setShowCopied(true); setTimeout(() => { @@ -157,7 +177,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { setIsLoading(false); setResponseUrl(null); setInputValues({}); - setIsDisclaimerViewed(false); + // setIsDisclaimerViewed(false); setIsFormDirty({ hasBucketName: false, hasPlatform: false, @@ -166,7 +186,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; const getDeploymentStateByType = (type) => { - if (deploymentState === 'default') { + if (deploymentState === 'default' || deploymentState === 'published') { return null; } @@ -188,8 +208,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { return responseUrl; }; - const clearDisclaimerMessage = () => setIsDisclaimerViewed(true); - const renderCompatibilityMessage = () => { return !canUseShareableUrls ? (
@@ -212,9 +230,13 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; const renderPublishedContent = () => { - const storageURL = localStorageValue['aws']['endpoint']; - return Object.keys(localStorageValue).length > 0 ? ( - <> + const storageURL = + Object.keys(hostingPlatformLocalStorageVal).length > 0 + ? hostingPlatformLocalStorageVal['aws']['endpoint'] + : ''; + + return showPublishedUrl ? ( +
Publish and Share Kedro-Viz @@ -232,13 +254,13 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
- +
) : null; }; @@ -347,7 +369,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { @@ -419,10 +441,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; const renderMainContent = () => { - return !isLoading && - !responseUrl && - canUseShareableUrls && - !responseError ? ( + return !isLoading && !responseUrl && !showPublishedUrl && !responseError ? ( <>
{renderTextContent()} @@ -432,10 +451,18 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Hosting platform
{ onChange('platform', selectedPlatform.value); + setShowPopulatedContent(false); }} width={null} > @@ -458,6 +485,11 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { onChange('bucket_name', value)} + defaultValue={ + showPopulatedContent + ? hostingPlatformLocalStorageVal['aws']['bucket_name'] + : undefined + } placeholder="Enter name" resetValueTrigger={visible} size="small" @@ -472,6 +504,11 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { onChange('endpoint', value)} + defaultValue={ + showPopulatedContent + ? hostingPlatformLocalStorageVal['aws']['endpoint'] + : undefined + } placeholder="Enter url" resetValueTrigger={visible} size="small" @@ -484,7 +521,10 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
- -
-
- ); - }; - const renderTextContent = () => { return (
From 644968c93540b640b498776e6c8657607c51c573 Mon Sep 17 00:00:00 2001 From: huongg Date: Mon, 13 May 2024 22:37:07 +0100 Subject: [PATCH 05/73] fix width for published content Signed-off-by: huongg --- src/components/shareable-url-modal/shareable-url-modal.js | 2 ++ src/components/shareable-url-modal/shareable-url-modal.scss | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 08a863dbda..c920727281 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -511,6 +511,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { className={classnames('shareable-url-modal', { 'shareable-url-modal__non-default-wrapper': deploymentState !== 'default', + 'shareable-url-modal__published-wrapper': + deploymentState === 'published', })} closeModal={handleModalClose} message={getDeploymentStateByType('message')} diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index 52b7818547..b89f7409cd 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -276,7 +276,10 @@ } .shareable-url-modal__published-wrapper { - width: 707px; + .modal__wrapper { + padding: 0; + width: 707px; + } } .shareable-url-modal__published-url { From af6f96f5d76c363d078fac1e8ae69bfc9ef22050 Mon Sep 17 00:00:00 2001 From: huongg Date: Mon, 13 May 2024 22:41:24 +0100 Subject: [PATCH 06/73] tidy up code Signed-off-by: huongg --- .../shareable-url-modal.js | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index c920727281..5552d34d8d 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -145,6 +145,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { } } saveLocalStorage(localStorageSharableUrl, hostingPlatformVal); + toShowPublishedContent(); } else { setResponseUrl(null); setResponseError(response.message || 'Error occurred!'); @@ -182,6 +183,13 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { hasPlatform: false, hasEndpoint: false, }); + + // TO FIX: bugging when close modal when showing published content + const delayShowingContent = setTimeout(() => { + toShowPublishedContent(); + }, 500); + + return () => clearTimeout(delayShowingContent); }; const getDeploymentStateByType = (type) => { @@ -235,7 +243,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { : ''; return showPublishedUrl ? ( -
+ <>
Publish and Share Kedro-Viz @@ -259,7 +267,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Republish
-
+ ) : null; }; @@ -482,14 +490,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
-
- +

Republish Kedro-Viz to push new updates - +

onChange('bucket_name', value)} defaultValue={ showPopulatedContent @@ -473,7 +472,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Endpoint Link
onChange('endpoint', value)} defaultValue={ showPopulatedContent From 3ad241831474d54a9d90821869594fc269d7860f Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 14 May 2024 10:38:17 +0100 Subject: [PATCH 08/73] update state name to showPublishedContent Signed-off-by: huongg --- .../shareable-url-modal.js | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 05bb07986d..792aacebd5 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -56,10 +56,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const [showCopied, setShowCopied] = useState(false); const [compatibilityData, setCompatibilityData] = useState({}); const [canUseShareableUrls, setCanUseShareableUrls] = useState(true); - const [showPublishedUrl, setShowPublishedUrl] = useState(false); - const [hostingPlatformLocalStorageVal, _] = useState( - loadLocalStorage(localStorageSharableUrl) || {} - ); + const [showPublishedContent, setShowPublishedContent] = useState(false); const [showPopulatedContent, setShowPopulatedContent] = useState(false); useEffect(() => { @@ -92,13 +89,13 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const toShowPublishedContent = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setDeploymentState('published'); - setShowPublishedUrl(true); + setShowPublishedContent(true); } }; const toShowMainContentWithPopulatedContent = () => { setShowPopulatedContent(true); - setShowPublishedUrl(false); + setShowPublishedContent(false); setDeploymentState('default'); }; @@ -242,7 +239,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ? hostingPlatformLocalStorageVal['aws']['endpoint'] : ''; - return showPublishedUrl ? ( + return showPublishedContent ? ( <>
@@ -411,8 +408,21 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ) : null; }; + const findHostingPlatform = (storage) => { + for (const key in storage) { + if (Object.hasOwnProperty.call(storage, key)) { + const platform = storage[key].platform; // Get the platform from the current object + const hostingPlatform = hostingPlatforms[platform]; // Access the corresponding platform from hostingPlatforms + return hostingPlatform; + } + } + }; + const renderMainContent = () => { - return !isLoading && !responseUrl && !showPublishedUrl && !responseError ? ( + return !isLoading && + !responseUrl && + !showPublishedContent && + !responseError ? ( <>
{renderTextContent()} @@ -424,7 +434,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Date: Tue, 14 May 2024 21:35:11 +0100 Subject: [PATCH 09/73] linking between dropdown and populated field Signed-off-by: huongg --- .../shareable-url-modal.js | 106 ++++++++++++++---- .../shareable-url-modal.scss | 12 +- .../shareable-url-modal/url-box/url-box.scss | 2 +- 3 files changed, 94 insertions(+), 26 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 792aacebd5..0e4ec0b5a0 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -42,6 +42,24 @@ const modalMessages = (status, info = '') => { return messages[status]; }; +const mockLocalStorage = { + aws: { + bucket_name: 'bucket-name-aws', + endpoint: 'http://test-aws.s3-website-us-east-1.amazonaws.com', + platform: 'aws', + }, + gcp: { + bucket_name: 'bucket-name-google-cloud', + endpoint: 'http://test-google.s3-website-us-east-1.amazonaws.com', + platform: 'gcp', + }, + azure: { + bucket_name: 'bucket-name-azure', + endpoint: 'http://test-azure.s3-website-us-east-1.amazonaws.com', + platform: 'azure', + }, +}; + const ShareableUrlModal = ({ onToggleModal, visible }) => { const [deploymentState, setDeploymentState] = useState('default'); const [inputValues, setInputValues] = useState({}); @@ -57,7 +75,9 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const [compatibilityData, setCompatibilityData] = useState({}); const [canUseShareableUrls, setCanUseShareableUrls] = useState(true); const [showPublishedContent, setShowPublishedContent] = useState(false); + const [hostingPlatformLocalStorageVal, _] = useState(mockLocalStorage); const [showPopulatedContent, setShowPopulatedContent] = useState(false); + const [populatedContentKey, setPopulatedContentKey] = useState(undefined); useEffect(() => { async function fetchPackageCompatibility() { @@ -90,6 +110,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setDeploymentState('published'); setShowPublishedContent(true); + // set the populatedContentKey as the first one from localStorage by default + setPopulatedContentKey(Object.keys(hostingPlatformLocalStorageVal)[0]); } }; @@ -234,23 +256,65 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; const renderPublishedContent = () => { - const storageURL = - Object.keys(hostingPlatformLocalStorageVal).length > 0 - ? hostingPlatformLocalStorageVal['aws']['endpoint'] - : ''; + const platformsKeys = Object.keys(hostingPlatformLocalStorageVal); + const platformsVal = Object.values(hostingPlatformLocalStorageVal); + + const url = platform + ? hostingPlatformLocalStorageVal[platform]['endpoint'] + : platformsVal[0]['endpoint']; + + const filteredPlatforms = {}; + platformsKeys.forEach((key) => { + if (hostingPlatforms.hasOwnProperty(key)) { + filteredPlatforms[key] = hostingPlatforms[key]; + } + }); return showPublishedContent ? ( <> -
+
Publish and Share Kedro-Viz
- onCopyClick(storageURL)} - href={() => handleResponseUrl()} - showCopiedText={showCopied} - /> + {platformsKeys.length === 1 ? ( + onCopyClick(url)} + href={() => handleResponseUrl()} + showCopiedText={showCopied} + /> + ) : ( +
+ { + onChange('platform', selectedPlatform.value); + setPopulatedContentKey(selectedPlatform.value); + }} + width={null} + > + {Object.entries(filteredPlatforms).map(([value, label]) => ( + + ))} + + onCopyClick(url)} + href={() => handleResponseUrl()} + showCopiedText={showCopied} + /> +
+ )}

@@ -408,16 +472,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ) : null; }; - const findHostingPlatform = (storage) => { - for (const key in storage) { - if (Object.hasOwnProperty.call(storage, key)) { - const platform = storage[key].platform; // Get the platform from the current object - const hostingPlatform = hostingPlatforms[platform]; // Access the corresponding platform from hostingPlatforms - return hostingPlatform; - } - } - }; - const renderMainContent = () => { return !isLoading && !responseUrl && @@ -434,7 +488,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { { onChange={(value) => onChange('bucket_name', value)} defaultValue={ showPopulatedContent - ? hostingPlatformLocalStorageVal['aws']['bucket_name'] + ? hostingPlatformLocalStorageVal[populatedContentKey][ + 'bucket_name' + ] : undefined } placeholder="Enter name" @@ -485,7 +541,9 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { onChange={(value) => onChange('endpoint', value)} defaultValue={ showPopulatedContent - ? hostingPlatformLocalStorageVal['aws']['endpoint'] + ? hostingPlatformLocalStorageVal[populatedContentKey][ + 'endpoint' + ] : undefined } placeholder="Enter url" diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index b89f7409cd..94aaf41679 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -282,12 +282,22 @@ } } -.shareable-url-modal__published-url { +.shareable-url-modal__published { width: 100%; padding: 48px; background-color: #{variables.$slate-300}; } +.shareable-url-modal__published-dropdown-wrapper { + display: flex; + flex-direction: row; + + .dropdown__label { + height: 100%; + width: 209px; + } +} + .shareable-url-modal__republished-action { align-items: baseline; display: flex; diff --git a/src/components/shareable-url-modal/url-box/url-box.scss b/src/components/shareable-url-modal/url-box/url-box.scss index 38c77919e2..5c68aa1e50 100644 --- a/src/components/shareable-url-modal/url-box/url-box.scss +++ b/src/components/shareable-url-modal/url-box/url-box.scss @@ -4,8 +4,8 @@ background-color: #{variables.$slate-700}; display: flex; height: 50px; + width: 100%; justify-content: space-between; - margin-top: 32px; text-overflow: ellipsis; a { From ed04b74aea2ec7925b227a9235b162e0eab6d6da Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 15 May 2024 09:10:31 +0100 Subject: [PATCH 10/73] un-disable button if populated content is ready Signed-off-by: huongg --- src/components/shareable-url-modal/shareable-url-modal.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 0e4ec0b5a0..9da9187d00 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -560,7 +560,10 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Cancel -

- - ) : null; + ) : ( +
+ { + onChange('platform', selectedPlatform.value); + setPopulatedContentKey(selectedPlatform.value); + }} + width={null} + > + {Object.entries(filteredPlatforms).map(([value, label]) => ( + + ))} + + onCopyClick(url)} + href={() => handleResponseUrl()} + showCopiedText={showCopied} + /> +
+ )} +
+
+

+ Republish Kedro-Viz to push new updates to the published link + above, or publish a new link to share. +

+ +
+ + ); + } else { + return null; + } }; const renderSuccessContent = () => { @@ -524,7 +529,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ? hostingPlatformLocalStorageVal[populatedContentKey][ 'bucket_name' ] - : undefined + : bucket_name } placeholder="Enter name" resetValueTrigger={visible} @@ -544,7 +549,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ? hostingPlatformLocalStorageVal[populatedContentKey][ 'endpoint' ] - : undefined + : endpoint } placeholder="Enter url" resetValueTrigger={visible} From 3b80352c2a0e3efd25fe80ecc96939b9d2df74c4 Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 15 May 2024 10:33:02 +0100 Subject: [PATCH 12/73] set over-hidden for the URL link Signed-off-by: huongg --- .../shareable-url-modal/url-box/url-box.js | 18 ++++++++++-------- .../shareable-url-modal/url-box/url-box.scss | 8 ++++++++ 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/shareable-url-modal/url-box/url-box.js b/src/components/shareable-url-modal/url-box/url-box.js index 2e8cba59d4..2e7f94cd50 100644 --- a/src/components/shareable-url-modal/url-box/url-box.js +++ b/src/components/shareable-url-modal/url-box/url-box.js @@ -5,14 +5,16 @@ import './url-box.scss'; const UrlBox = ({ url, onClick, href, showCopiedText }) => (
- - {url} - + {window.navigator.clipboard && (
@@ -493,6 +510,10 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; const renderMainContent = () => { + console.log('platform:', platform); + console.log('name:', bucket_name); + console.log('url:', endpoint); + return !isLoading && !responseUrl && !showPublishedContent && @@ -506,18 +527,10 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Hosting platform
{ onChange('platform', selectedPlatform.value); - setShowPopulatedContent(false); }} width={null} > @@ -539,13 +552,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
onChange('bucket_name', value)} - defaultValue={ - showPopulatedContent - ? hostingPlatformLocalStorageVal[populatedContentKey][ - 'bucket_name' - ] - : bucket_name - } + defaultValue={bucket_name} placeholder="Enter name" resetValueTrigger={visible} size="small" @@ -559,13 +566,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
onChange('endpoint', value)} - defaultValue={ - showPopulatedContent - ? hostingPlatformLocalStorageVal[populatedContentKey][ - 'endpoint' - ] - : endpoint - } + defaultValue={endpoint} placeholder="Enter url" resetValueTrigger={visible} size="small" @@ -580,10 +581,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Cancel
onChange('bucket_name', value)} defaultValue={bucket_name} + onChange={(value) => onChange('bucket_name', value)} placeholder="Enter name" resetValueTrigger={visible} size="small" @@ -546,8 +542,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { Endpoint Link onChange('endpoint', value)} defaultValue={endpoint} + onChange={(value) => onChange('endpoint', value)} placeholder="Enter url" resetValueTrigger={visible} size="small" From 332b41d5318d8c69023ddcbec304ea108f1e6f4b Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 16 May 2024 10:19:31 +0100 Subject: [PATCH 17/73] include preview dataset Signed-off-by: huongg --- .../shareable-url-modal.js | 62 +++++++++---------- .../shareable-url-modal.scss | 53 +++++++++++----- 2 files changed, 65 insertions(+), 50 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index f702472f98..45eae2a605 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -25,6 +25,7 @@ import LoadingIcon from '../icons/loading'; import Modal from '../ui/modal'; import MenuOption from '../ui/menu-option'; import Tooltip from '../ui/tooltip'; +import Toggle from '../ui/toggle'; import './shareable-url-modal.scss'; import UrlBox from './url-box/url-box'; @@ -59,6 +60,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const [hostingPlatformLocalStorageVal, setHostingPlatformLocalStorageVal] = useState(loadLocalStorage(localStorageSharableUrl) || {}); const [populatedContentKey, setPopulatedContentKey] = useState(undefined); + const [toggleValue, setTogleValue] = useState(false); useEffect(() => { async function fetchPackageCompatibility() { @@ -434,50 +436,39 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
Publish and Share Kedro-Viz
-

- Prerequisite: Deploying and hosting Kedro-Viz requires access keys or - user credentials, depending on the chosen cloud provider. To use this +

+ Prerequisite:{' '} +

+

+ Deploying and hosting Kedro-Viz requires access keys or user + credentials, depending on the chosen service provider. To use this feature, please add your access keys or credentials as environment - variables in your Kedro project. More information can be found in{' '} + variables in your project. More information can be found in the{' '} - docs + documentation .

+

+ Disclaimer:{' '} +

- Enter the required information and a hosted link will be generated. -

-

- For more information on obtaining the Endpoint URL, refer to{' '} - - AWS - - ,{' '} - - Azure - {' '} - and{' '} - - GCP - {' '} - docs. + Disclaimer Kedro-Viz contains preview data for multiple datasets. You + can enable or disable all previews when publishing Kedro-Viz.

+
+ All dataset previews + setTogleValue((prev) => !prev)} + /> +
); }; @@ -499,6 +490,9 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
{renderTextContent()}
+

+ Enter the required information. +

Hosting platform @@ -553,7 +547,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
-
+
diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index cd3d3dfb16..91d3792b96 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -3,11 +3,14 @@ .kui-theme--light { --color-description-text: #{variables.$black-300}; --color-deployed-link: #{variables.$black-900}; + --color-preview-data-text: #{variables.$black-900}; --color-modal-bg-1: #{variables.$grey-100}; --color-modal-bg-2: #{variables.$grey-0}; --color-footer-border: #{variables.$grey-300}; --color-text-doc-link: #{variables.$black-800}; --color-form-label: #{variables.$grey-700}; + + // --color-divider: #{variables.$black-500}; --input-bg: #{variables.$white-100}; --input-shadow: #{variables.$white-800}; } @@ -15,11 +18,13 @@ .kui-theme--dark { --color-description-text: #{variables.$white-900}; --color-deployed-link: #{variables.$white-0}; + --color-preview-data-text: #{variables.$white-0}; --color-modal-bg-1: #{variables.$slate-300}; --color-modal-bg-2: #{variables.$slate-100}; --color-footer-border: #{variables.$black-600}; --color-text-doc-link: #{variables.$white-600}; --color-form-label: #{variables.$grey-500}; + --color-divider: #{variables.$black-500}; --input-bg: #{variables.$slate-700}; --input-shadow: #{variables.$slate-900}; } @@ -71,6 +76,14 @@ display: flex; } + &__form-wrapper-title { + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + margin-bottom: 32px; + } + &__content-title { font-size: 20px; font-style: normal; @@ -91,6 +104,30 @@ } } + &__content-description-title:nth-of-type(2)::before { + display: block; + content: ''; + background: var(--color-divider); + height: 1px; + margin: 24px 0; + } + + &__content-preview-dataset { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + margin-top: 12px; + color: var(--color-preview-data-text); + } + + &__content-toggle { + margin: 0; + } + &__content-note { margin-top: 18px; color: var(--color-form-label); @@ -100,10 +137,6 @@ } } - &__paregraph-divider { - margin-bottom: 30px; - } - &__content-wrapper { padding: 48px; background: var(--color-modal-bg-2); @@ -157,18 +190,6 @@ background: var(--color-modal-bg-1); border-top: 1px solid var(--color-footer-border); - &--right { - justify-content: flex-end; - - .button:first-of-type { - margin-right: 32px; - } - - a .button:first-of-type { - margin-right: 0; - } - } - .button__btn--secondary { padding-left: 0; } From d8a6032771aebf66162d14de9d91a6e65751497a Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 16 May 2024 13:49:12 +0100 Subject: [PATCH 18/73] adding info tooltip Signed-off-by: huongg --- src/components/icons/info.js | 9 ++++ .../shareable-url-modal.js | 46 +++++++++++++++++-- .../shareable-url-modal.scss | 34 ++++++++++++++ 3 files changed, 84 insertions(+), 5 deletions(-) create mode 100644 src/components/icons/info.js diff --git a/src/components/icons/info.js b/src/components/icons/info.js new file mode 100644 index 0000000000..3c822d98a9 --- /dev/null +++ b/src/components/icons/info.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const InfoIcon = ({ className }) => ( + + + +); + +export default InfoIcon; diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 45eae2a605..293ec9bdb2 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -18,6 +18,7 @@ import { import Button from '../ui/button'; import CopyIcon from '../icons/copy'; +import InfoIcon from '../icons/info'; import Dropdown from '../ui/dropdown'; import IconButton from '../ui/icon-button'; import Input from '../ui/input'; @@ -357,7 +358,13 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { <>
Hosted link
- +
*/}
- Bucket Name + Bucket name
{ />
-
- Endpoint Link +
+
+ Endpoint URL +
+
Date: Mon, 20 May 2024 10:26:03 +0100 Subject: [PATCH 19/73] set max-width for url box Signed-off-by: huongg --- .../shareable-url-modal.js | 1 + .../shareable-url-modal/url-box/url-box.js | 9 +++-- .../shareable-url-modal/url-box/url-box.scss | 34 +++++++++++-------- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 293ec9bdb2..aba651767e 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -325,6 +325,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ))} onCopyClick(url)} href={handleResponseUrl()} diff --git a/src/components/shareable-url-modal/url-box/url-box.js b/src/components/shareable-url-modal/url-box/url-box.js index 2e7f94cd50..7a2f9575dc 100644 --- a/src/components/shareable-url-modal/url-box/url-box.js +++ b/src/components/shareable-url-modal/url-box/url-box.js @@ -1,10 +1,15 @@ +import classnames from 'classnames'; import Tooltip from '../../ui/tooltip'; import Button from '../../ui/button'; import './url-box.scss'; -const UrlBox = ({ url, onClick, href, showCopiedText }) => ( -
+const UrlBox = ({ className, url, onClick, href, showCopiedText }) => ( +
Date: Mon, 20 May 2024 11:02:05 +0100 Subject: [PATCH 20/73] fix sorting line for css Signed-off-by: huongg --- .../shareable-url-modal.scss | 2 +- .../shareable-url-modal/url-box/url-box.scss | 45 ++++++++++++------- 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index d991a5ae71..d0b6ca15a0 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -342,7 +342,7 @@ // check with Step since there's no timestamp atm, can we decrease the padding bottom from 84 to 48px padding: 48px; - background-color: #{variables.$slate-300}; + background-color: var(--color-modal-bg-1); .shareable-url-modal__content-title { padding-bottom: 32px; diff --git a/src/components/shareable-url-modal/url-box/url-box.scss b/src/components/shareable-url-modal/url-box/url-box.scss index 35cf6eb069..8eee838eb7 100644 --- a/src/components/shareable-url-modal/url-box/url-box.scss +++ b/src/components/shareable-url-modal/url-box/url-box.scss @@ -1,46 +1,61 @@ @use '../../../styles/variables' as variables; +.kui-theme--light { + --color-link: #{variables.$black-900}; + --color-divider: #{variables.$white-900}; + --color-bg: #{variables.$white-100}; + --color-border: #{variables.$black-900}; +} + +.kui-theme--dark { + --color-link: #{variables.$white-0}; + --color-divider: #{variables.$black-500}; + --color-bg: #{variables.$slate-700}; + --color-border: #{variables.$white-0}; +} + .url-box__wrapper { - background-color: #{variables.$slate-700}; + background-color: var(--color-bg); display: flex; height: 50px; - width: 100%; justify-content: space-between; text-overflow: ellipsis; + width: 100%; } .url-box__wrapper--half-width { + border-left: 1px solid var(--color-divider); width: 50%; } .url-box__result-url-wrapper { - display: flex; align-items: center; - width: 100%; + display: flex; max-width: 510px; + width: 100%; } .url-box__result-url { - color: var(--color-deployed-link); + align-items: center; + color: var(--color-link); + cursor: pointer; + display: block; + font-family: inherit; font-size: 16px; line-height: 32px; - cursor: pointer; - align-items: center; + overflow: hidden; padding-left: 16px; - font-family: inherit; text-decoration: underline; - width: 90%; - display: block; - white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; + width: 90%; } .url-box___button { - position: relative; - display: flex; align-items: center; - border: 1px solid white; + border: 1px solid var(--color-border); + display: flex; + position: relative; .button__btn--secondary { width: 100px; From 2199e0046cb6c8ba8afb72b71495fcf5cd735360 Mon Sep 17 00:00:00 2001 From: huongg Date: Mon, 20 May 2024 12:05:26 +0100 Subject: [PATCH 21/73] include tooltip Signed-off-by: huongg --- .../shareable-url-modal.js | 41 +++++++++++++++---- .../shareable-url-modal.scss | 8 +++- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index aba651767e..441bd37e7e 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -17,7 +17,6 @@ import { } from '../../config'; import Button from '../ui/button'; -import CopyIcon from '../icons/copy'; import InfoIcon from '../icons/info'; import Dropdown from '../ui/dropdown'; import IconButton from '../ui/icon-button'; @@ -25,7 +24,6 @@ import Input from '../ui/input'; import LoadingIcon from '../icons/loading'; import Modal from '../ui/modal'; import MenuOption from '../ui/menu-option'; -import Tooltip from '../ui/tooltip'; import Toggle from '../ui/toggle'; import './shareable-url-modal.scss'; @@ -563,12 +561,39 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { + The endpoint URL is the link to where your Kedro-Viz will + be hosted. For information on obtaining the endpoint URL, + please refer to the documentation for{' '} + + AWS + + ,{' '} + + Azure + + ,{' '} + + GCP + +

+ } icon={InfoIcon} />
diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index d0b6ca15a0..f2c236a096 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -13,6 +13,7 @@ // --color-divider: #{variables.$black-500}; --input-bg: #{variables.$white-100}; --input-shadow: #{variables.$white-800}; + --color-btn-bg: #{variables.$white-500}; } .kui-theme--dark { @@ -27,6 +28,7 @@ --color-divider: #{variables.$black-500}; --input-bg: #{variables.$slate-700}; --input-shadow: #{variables.$slate-900}; + --color-btn-bg: #{variables.$black-600}; } .shareable-url-modal { @@ -194,6 +196,10 @@ margin-bottom: 0; } + .shareable-url-modal__input-label-text { + color: inherit; + } + .shareable-url-modal__information-icon { height: 40px; @@ -370,7 +376,7 @@ .button__btn--secondary { // double check the hex colour with Step - background-color: #{variables.$black-600}; + background-color: var(--color-btn-bg); } .shareable-url-modal__republished-action-text { From 49003c19b3658df2652ee65eaaf952be9d658a70 Mon Sep 17 00:00:00 2001 From: huongg Date: Mon, 20 May 2024 13:21:14 +0100 Subject: [PATCH 22/73] update current test Signed-off-by: huongg --- src/components/shareable-url-modal/shareable-url-modal.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.test.js b/src/components/shareable-url-modal/shareable-url-modal.test.js index aaa85a2905..44cb4ab0a5 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.test.js +++ b/src/components/shareable-url-modal/shareable-url-modal.test.js @@ -5,7 +5,6 @@ import { setup } from '../../utils/state.mock'; describe('ShareableUrlModal', () => { it('renders without crashing', () => { const wrapper = setup.mount(); - wrapper.find('[data-test="disclaimerButton"]').simulate('click'); - expect(wrapper.find('.shareable-url-modal__input-wrapper').length).toBe(3); + expect(wrapper.exists()).toBe(true); }); }); From bd3c3ff818a243d0f6b0b7de0d82dd2d4b6e0958 Mon Sep 17 00:00:00 2001 From: huongg Date: Mon, 20 May 2024 14:14:25 +0100 Subject: [PATCH 23/73] remove unused code and classnames Signed-off-by: huongg --- .../shareable-url-modal.js | 58 ++----------------- .../shareable-url-modal.scss | 22 +++++-- 2 files changed, 21 insertions(+), 59 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 441bd37e7e..298ec67f18 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -215,13 +215,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { hasPlatform: false, hasEndpoint: false, }); - - // TO FIX: bugging when close modal when showing published content - const delayShowingContent = setTimeout(() => { - toShowPublishedContent(); - }, 500); - - return () => clearTimeout(delayShowingContent); + toShowPublishedContent(); }; const getDeploymentStateByType = (type) => { @@ -270,7 +264,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; const renderPublishedContent = () => { - if (showPublishedContent) { + if (showPublishedContent && !responseUrl && !responseError) { const platformsKeys = Object.keys(hostingPlatformLocalStorageVal); const platformsVal = Object.values(hostingPlatformLocalStorageVal); @@ -332,8 +326,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
)}
-
-

+

+

Republish Kedro-Viz to push new updates to the published link above, or publish a new link to share.

@@ -363,34 +357,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { href={handleResponseUrl()} showCopiedText={showCopied} /> - {/*
- - {responseUrl} - - {window.navigator.clipboard && ( -
- - -
- )} -
*/}
- -
- +
+ +
) : null; }; @@ -587,6 +564,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { deploymentState !== 'default', 'shareable-url-modal__published-wrapper': deploymentState === 'published', + 'shareable-url-modal__success-wrapper': deploymentState === 'success', })} closeModal={handleModalClose} message={getDeploymentStateByType('message')} diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index 7a4e3cf7c4..740ec1941c 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -253,21 +253,6 @@ width: 100%; } - &__result { - margin-bottom: 48px; - width: 100%; - - .toolbox { - margin: 0 4px 0 20px; - } - - .pipeline-icon { - position: relative; - top: unset; - right: unset; - } - } - &__error { display: flex; flex-direction: column; @@ -399,6 +384,25 @@ } } +.shareable-url-modal__success-wrapper { + .modal__content { + background-color: var(--color-modal-bg-1); + } + + .modal__wrapper { + width: 642px; + padding: 48px; + } + + .modal__description { + margin-top: 0; + } + + .shareable-url-modal__result { + width: 100%; + } +} + .shareable-url-timestamp { padding: 4px 8px 8px; position: absolute; diff --git a/src/components/ui/modal/modal.js b/src/components/ui/modal/modal.js index 0572f2882a..6eda0b9539 100644 --- a/src/components/ui/modal/modal.js +++ b/src/components/ui/modal/modal.js @@ -45,8 +45,8 @@ const Modal = ({ })} >
- {title &&
{title}
} - {message &&
{message}
} + {title &&

{title}

} + {message &&

{message}

} {children}
From 29dbc9f9707dcc0b7848acec2b9d961c639acc75 Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 21 May 2024 09:29:30 +0100 Subject: [PATCH 28/73] sorting lines Signed-off-by: huongg --- .../shareable-url-modal.scss | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index 740ec1941c..4427f1a06d 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -9,8 +9,6 @@ --color-footer-border: #{variables.$grey-300}; --color-text-doc-link: #{variables.$black-800}; --color-form-label: #{variables.$grey-700}; - - // --color-divider: #{variables.$black-500}; --input-bg: #{variables.$white-100}; --input-shadow: #{variables.$white-800}; --color-btn-bg: #{variables.$white-500}; @@ -25,7 +23,6 @@ --color-footer-border: #{variables.$black-600}; --color-text-doc-link: #{variables.$white-600}; --color-form-label: #{variables.$grey-500}; - --color-divider: #{variables.$black-500}; --input-bg: #{variables.$slate-700}; --input-shadow: #{variables.$slate-900}; --color-btn-bg: #{variables.$black-600}; @@ -107,23 +104,23 @@ } &__content-description-title:nth-of-type(2)::before { - display: block; - content: ''; background: var(--color-divider); + content: ''; + display: block; height: 1px; margin: 24px 0; } &__content-preview-dataset { - display: flex; - justify-content: space-between; align-items: center; + color: var(--color-preview-data-text); + display: flex; font-size: 14px; font-style: normal; font-weight: 400; + justify-content: space-between; line-height: 20px; margin-top: 12px; - color: var(--color-preview-data-text); } &__content-toggle { @@ -131,8 +128,8 @@ } &__content-note { - margin-top: 18px; color: var(--color-form-label); + margin-top: 18px; a { color: var(--color-form-label); @@ -140,15 +137,15 @@ } &__content-wrapper { - padding: 48px; background: var(--color-modal-bg-2); box-shadow: 0 0 16px 0 rgb(0 0 0 / 10%); + padding: 48px; } &__form-wrapper { - padding: 48px; background: var(--color-modal-bg-1); box-shadow: inset 0 0 16px 0 rgb(0 0 0 / 10%); + padding: 48px; } &__input-wrapper { @@ -184,9 +181,9 @@ } &__endpoint-url-wrapper { + align-items: center; display: flex; justify-content: space-between; - align-items: center; .pipeline-icon--container { list-style-type: none; @@ -209,10 +206,10 @@ } .pipeline-toolbar__label__visible { - width: 180px; max-width: 180px; - white-space: inherit; text-align: left; + white-space: inherit; + width: 180px; &::after { top: 5%; @@ -341,11 +338,10 @@ } .shareable-url-modal__published { - width: 100%; - // check with Step since there's no timestamp atm, can we decrease the padding bottom from 84 to 48px - padding: 48px; background-color: var(--color-modal-bg-1); + padding: 48px; + width: 100%; .shareable-url-modal__content-title { padding-bottom: 32px; From 57fa21c6195a9a8bc109a8fdb7516cb1f7f57a8b Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 21 May 2024 10:04:17 +0100 Subject: [PATCH 29/73] remove button wrapper from successContent test Signed-off-by: huongg --- cypress/tests/ui/flowchart/shareable-urls.cy.js | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js index 7704179cf5..c2b9450442 100644 --- a/cypress/tests/ui/flowchart/shareable-urls.cy.js +++ b/cypress/tests/ui/flowchart/shareable-urls.cy.js @@ -186,12 +186,10 @@ describe('Shareable URLs with empty localStorage', () => { }); }); - it('verifies that AWS link is generated with correct inputs on Republish button click #TC-61', () => { + it.only('verifies that AWS link is generated with correct inputs on Republish button click #TC-61', () => { const bucketName = 'myBucketName'; const endpointName = 'http://www.example.com'; const primaryButtonNodeText = 'Publish'; - const primaryButtonNodeTextVariant = 'Publish'; - const secondaryButtonNodeText = 'Link Settings'; // Intercept the network request to mock with a fixture cy.__interceptRest__( @@ -215,17 +213,6 @@ describe('Shareable URLs with empty localStorage', () => { .contains(primaryButtonNodeText) .click(); - // Wait for the POST request to complete - cy.wait('@publishRequest'); - - // Action - cy.get('.shareable-url-modal__button-wrapper button') - .contains(secondaryButtonNodeText) - .click(); - cy.get('.shareable-url-modal__button-wrapper button') - .contains(primaryButtonNodeTextVariant) - .click(); - // Wait for the POST request to complete and check the mocked response cy.wait('@publishRequest').then((interception) => { // Assert after action From 7d8b9ce510a285c6c2832338b2294141e1fd5a72 Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 21 May 2024 10:18:11 +0100 Subject: [PATCH 30/73] remove .only in test Signed-off-by: huongg --- cypress/tests/ui/flowchart/shareable-urls.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js index c2b9450442..0436baaf15 100644 --- a/cypress/tests/ui/flowchart/shareable-urls.cy.js +++ b/cypress/tests/ui/flowchart/shareable-urls.cy.js @@ -186,7 +186,7 @@ describe('Shareable URLs with empty localStorage', () => { }); }); - it.only('verifies that AWS link is generated with correct inputs on Republish button click #TC-61', () => { + it('verifies that AWS link is generated with correct inputs on Republish button click #TC-61', () => { const bucketName = 'myBucketName'; const endpointName = 'http://www.example.com'; const primaryButtonNodeText = 'Publish'; From cc89e87910ebeaa375bf489ac45043ee925bc78d Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 21 May 2024 15:53:20 +0100 Subject: [PATCH 31/73] update name for content to be view Signed-off-by: huongg --- .../shareable-url-modal.js | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 79e6d19038..38a8dbef8a 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -88,7 +88,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { fetchPackageCompatibility(); }, []); - const toShowPublishedContent = () => { + const setToDisplayPublishedView = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setDeploymentState('published'); setShowPublishedContent(true); @@ -97,7 +97,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { } }; - const toShowMainContentWithPopulatedContent = () => { + const setToDisplayMainViewWithPopulatedContent = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setShowPublishedContent(false); setDeploymentState('default'); @@ -122,7 +122,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; useEffect(() => { - toShowPublishedContent(); + setToDisplayPublishedView(); }, []); const onChange = (key, value) => { @@ -167,7 +167,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { if (request.ok) { setResponseUrl(response.url); setDeploymentState('success'); - toShowPublishedContent(); + setToDisplayPublishedView(); const hostingPlatformVal = {}; if (hostingPlatforms.hasOwnProperty(inputValues.platform)) { @@ -218,7 +218,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { hasPlatform: false, hasEndpoint: false, }); - toShowPublishedContent(); + setToDisplayPublishedView(); }; const getDeploymentStateByType = (type) => { @@ -266,7 +266,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ) : null; }; - const renderPublishedContent = () => { + const renderPublishedView = () => { if (showPublishedContent && !responseUrl && !responseError) { const platformsKeys = Object.keys(hostingPlatformLocalStorageVal); const platformsVal = Object.values(hostingPlatformLocalStorageVal); @@ -336,7 +336,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {

-
- - ); - } else { - return null; - } +
+ )} +
+
+

+ Republish Kedro-Viz to push new updates to the published link above, + or publish a new link to share. +

+ +
+ + ); }; const renderSuccessView = () => { @@ -434,10 +428,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; const renderMainView = () => { - return !isLoading && - !responseUrl && - !showPublishedContent && - !responseError ? ( + return !isLoading && !responseUrl && !responseError ? ( <>
{renderTextContent()} @@ -573,13 +564,16 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { > {renderCompatibilityMessage()} {canUseShareableUrls ? ( - <> - {renderPublishedView()} - {renderMainView()} - {renderLoadingView()} - {renderErrorView()} - {renderSuccessView()} - + showPublishedView ? ( + renderPublishedView() + ) : ( + <> + {renderMainView()} + {renderLoadingView()} + {renderErrorView()} + {renderSuccessView()} + + ) ) : null} ); From c246706dc9df0d15098a5c898b3f14d35c7d1316 Mon Sep 17 00:00:00 2001 From: Huong Nguyen <32060364+Huongg@users.noreply.github.com> Date: Tue, 21 May 2024 19:28:21 +0100 Subject: [PATCH 33/73] update name Co-authored-by: rashidakanchwala <37628668+rashidakanchwala@users.noreply.github.com> Signed-off-by: Huong Nguyen <32060364+Huongg@users.noreply.github.com> --- src/components/shareable-url-modal/shareable-url-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 5f187590b5..75a2ec7c6b 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -88,7 +88,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { fetchPackageCompatibility(); }, []); - const setToDisplayPublishedView = () => { + const displayPublishedView = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setDeploymentState('published'); setShowPublishedView(true); From aaf102b81e207a27f1fea48499648464d0557505 Mon Sep 17 00:00:00 2001 From: Huong Nguyen <32060364+Huongg@users.noreply.github.com> Date: Tue, 21 May 2024 19:28:46 +0100 Subject: [PATCH 34/73] update name Co-authored-by: rashidakanchwala <37628668+rashidakanchwala@users.noreply.github.com> Signed-off-by: Huong Nguyen <32060364+Huongg@users.noreply.github.com> --- src/components/shareable-url-modal/shareable-url-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 75a2ec7c6b..d87f32d75b 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -97,7 +97,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { } }; - const setToDisplayMainViewWithPopulatedContent = () => { + const displayMainViewWithStoredContent = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setShowPublishedView(false); setDeploymentState('default'); From c39b838f83bc5a18db9883accfcab62da3ecb8f0 Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 21 May 2024 19:35:14 +0100 Subject: [PATCH 35/73] update names Signed-off-by: huongg --- .../shareable-url-modal/shareable-url-modal.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index d87f32d75b..3aac4e918f 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -97,7 +97,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { } }; - const displayMainViewWithStoredContent = () => { + const displayMainViewWithPublishedContent = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setShowPublishedView(false); setDeploymentState('default'); @@ -122,7 +122,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; useEffect(() => { - setToDisplayPublishedView(); + displayPublishedView(); }, []); const onChange = (key, value) => { @@ -167,7 +167,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { if (request.ok) { setResponseUrl(response.url); setDeploymentState('success'); - setToDisplayPublishedView(); + displayPublishedView(); // const hostingPlatformVal = {}; // if (hostingPlatforms.hasOwnProperty(inputValues.platform)) { @@ -216,7 +216,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { hasPlatform: false, hasEndpoint: false, }); - setToDisplayPublishedView(); + displayPublishedView(); }; const getDeploymentStateByType = (type) => { @@ -333,7 +333,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {

{window.navigator.clipboard && ( -
+
+ + + +
+); + +export default CompatibilityView; diff --git a/src/components/shareable-url-modal/error-view/error-view.js b/src/components/shareable-url-modal/error-view/error-view.js new file mode 100644 index 0000000000..bb6de37fbc --- /dev/null +++ b/src/components/shareable-url-modal/error-view/error-view.js @@ -0,0 +1,12 @@ +import Button from '../../ui/button'; + +const ErrorView = ({ onClick, responseError }) => ( +
+

Error message: {responseError}

+ +
+); + +export default ErrorView; diff --git a/src/components/shareable-url-modal/loading-view/loading-view.js b/src/components/shareable-url-modal/loading-view/loading-view.js new file mode 100644 index 0000000000..5570cfc12b --- /dev/null +++ b/src/components/shareable-url-modal/loading-view/loading-view.js @@ -0,0 +1,9 @@ +import LoadingIcon from '../../icons/loading'; + +const LoadingView = ({ isLoading }) => ( +
+ +
+); + +export default LoadingView; diff --git a/src/components/shareable-url-modal/main-view/main-view.js b/src/components/shareable-url-modal/main-view/main-view.js new file mode 100644 index 0000000000..55ea85354e --- /dev/null +++ b/src/components/shareable-url-modal/main-view/main-view.js @@ -0,0 +1,187 @@ +/* eslint-disable camelcase */ +import classnames from 'classnames'; +import Dropdown from '../../ui/dropdown'; +import Button from '../../ui/button'; +import IconButton from '../../ui/icon-button'; +import InfoIcon from '../../icons/info'; +import Input from '../../ui/input'; +import MenuOption from '../../ui/menu-option'; +import Toggle from '../../ui/toggle'; +import { + hostingPlatforms, + KEDRO_VIZ_PUBLISH_AWS_DOCS_URL, + KEDRO_VIZ_PUBLISH_AZURE_DOCS_URL, + KEDRO_VIZ_PUBLISH_GCP_DOCS_URL, + KEDRO_VIZ_PUBLISH_DOCS_URL, +} from '../../../config'; + +const renderTextContent = (toggleValue, setTogleValue) => { + return ( +
+
+ Publish and Share Kedro-Viz +
+

+ Prerequisite:{' '} +

+

+ Deploying and hosting Kedro-Viz requires access keys or user + credentials, depending on the chosen service provider. To use this + feature, please add your access keys or credentials as environment + variables in your project. More information can be found in the{' '} + + documentation + + . +

+

+ Disclaimer:{' '} +

+

+ Disclaimer Kedro-Viz contains preview data for multiple datasets. You + can enable or disable all previews when publishing Kedro-Viz. +

+
+ All dataset previews + setTogleValue((prev) => !prev)} + /> +
+
+ ); +}; + +const MainView = ({ + handleModalClose, + handleSubmit, + inputValues, + isFormDirty, + onChange, + setTogleValue, + toggleValue, + visible, +}) => { + const { platform, bucket_name, endpoint } = inputValues || {}; + + return ( + <> +
+ {renderTextContent(toggleValue, setTogleValue)} +
+

+ Enter the required information. +

+
+
+ Hosting platform +
+ + {Object.entries(hostingPlatforms).map(([value, label]) => ( + + ))} + +
+
+
Bucket name
+ onChange('bucket_name', value)} + placeholder="Enter name" + resetValueTrigger={visible} + size="small" + type="input" + dataTest={'bucket_name'} + /> +
+
+
+
+ Endpoint URL +
+ + The endpoint URL is the link to where your Kedro-Viz will be + hosted. For information on obtaining the endpoint URL, + please refer to the documentation for{' '} + + AWS + + ,{' '} + + Azure + + ,{' '} + + GCP + +

+ } + icon={InfoIcon} + /> +
+ onChange('endpoint', value)} + placeholder="Enter url" + resetValueTrigger={visible} + size="small" + type="input" + dataTest={'endpoint_name'} + /> +
+
+
+
+ + +
+ + ); +}; + +export default MainView; diff --git a/src/components/shareable-url-modal/published-view/published-view.js b/src/components/shareable-url-modal/published-view/published-view.js new file mode 100644 index 0000000000..e0adafa8c5 --- /dev/null +++ b/src/components/shareable-url-modal/published-view/published-view.js @@ -0,0 +1,87 @@ +import classnames from 'classnames'; +import UrlBox from '../url-box/url-box'; +import Button from '../../ui/button'; +import Dropdown from '../../ui/dropdown'; +import MenuOption from '../../ui/menu-option'; + +import { getFilteredPlatforms } from '../utils'; + +const PublishedView = ({ + handleResponseUrl, + hostingPlatformLocalStorageVal, + hostingPlatforms, + onChange, + onCopyClick, + onRepublishClick, + platform, + showCopied, +}) => { + const platformsKeys = Object.keys(hostingPlatformLocalStorageVal); + const platformsVal = Object.values(hostingPlatformLocalStorageVal); + + const url = platform + ? hostingPlatformLocalStorageVal[platform]['endpoint'] + : platformsVal[0]['endpoint']; + + const filteredPlatforms = getFilteredPlatforms( + hostingPlatforms, + platformsKeys + ); + return ( + <> +
+
+ Publish and Share Kedro-Viz +
+ {platformsKeys.length === 1 ? ( + onCopyClick(url)} + href={handleResponseUrl} + showCopiedText={showCopied} + /> + ) : ( +
+ + {Object.entries(filteredPlatforms).map(([value, label]) => ( + + ))} + + +
+ )} +
+
+

+ Republish Kedro-Viz to push new updates to the published link above, + or publish a new link to share. +

+ +
+ + ); +}; + +export default PublishedView; diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 3aac4e918f..ee06e405b0 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -9,25 +9,19 @@ import { hostingPlatforms, inputKeyToStateKeyMap, localStorageSharableUrl, - KEDRO_VIZ_PUBLISH_DOCS_URL, - KEDRO_VIZ_PUBLISH_AWS_DOCS_URL, - KEDRO_VIZ_PUBLISH_AZURE_DOCS_URL, - KEDRO_VIZ_PUBLISH_GCP_DOCS_URL, PACKAGE_FSSPEC, } from '../../config'; - -import Button from '../ui/button'; -import InfoIcon from '../icons/info'; -import Dropdown from '../ui/dropdown'; -import IconButton from '../ui/icon-button'; -import Input from '../ui/input'; -import LoadingIcon from '../icons/loading'; import Modal from '../ui/modal'; -import MenuOption from '../ui/menu-option'; -import Toggle from '../ui/toggle'; + +import PublishedView from './published-view/published-view'; +import CompatibilityView from './compatibility-view/compatibility-view'; +import MainView from './main-view/main-view'; +import LoadingView from './loading-view/loading-view'; +import ErrorView from './error-view/error-view'; +import SuccessView from './success-view/success-view'; +import { getDeploymentStateByType } from './utils'; import './shareable-url-modal.scss'; -import UrlBox from './url-box/url-box'; const modalMessages = (status, info = '') => { const messages = { @@ -54,11 +48,11 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const [responseError, setResponseError] = useState(null); const [showCopied, setShowCopied] = useState(false); const [compatibilityData, setCompatibilityData] = useState({}); - const [canUseShareableUrls, setCanUseShareableUrls] = useState(true); + const [isCompatible, setIsCompatible] = useState(true); const [showPublishedView, setShowPublishedView] = useState(false); const [hostingPlatformLocalStorageVal, setHostingPlatformLocalStorageVal] = useState(loadLocalStorage(localStorageSharableUrl) || {}); - const [populatedContentKey, setPopulatedContentKey] = useState(undefined); + const [publishedPlatformKey, setPublishedPlatformKey] = useState(undefined); const [toggleValue, setTogleValue] = useState(false); useEffect(() => { @@ -72,7 +66,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { (pckg) => pckg.package_name === PACKAGE_FSSPEC ); setCompatibilityData(fsspecPackage); - setCanUseShareableUrls(fsspecPackage?.is_compatible || false); + setIsCompatible(fsspecPackage?.is_compatible || false); // User's fsspec package version isn't compatible, so set // the necessary state to reflect that in the UI. @@ -92,8 +86,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setDeploymentState('published'); setShowPublishedView(true); - // set the populatedContentKey as the first one from localStorage by default - setPopulatedContentKey(Object.keys(hostingPlatformLocalStorageVal)[0]); + // set the publishedPlatformKey as the first one from localStorage by default + setPublishedPlatformKey(Object.keys(hostingPlatformLocalStorageVal)[0]); } }; @@ -103,7 +97,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { setDeploymentState('default'); const populatedContent = - hostingPlatformLocalStorageVal[populatedContentKey]; + hostingPlatformLocalStorageVal[publishedPlatformKey]; setInputValues(populatedContent); @@ -142,7 +136,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { setIsLoading(true); // this logic is here to test locally without publishing anything - const hostingPlatformVal = {}; if (hostingPlatforms.hasOwnProperty(inputValues.platform)) { hostingPlatformVal[inputValues.platform] = { ...inputValues }; @@ -219,21 +212,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { displayPublishedView(); }; - const getDeploymentStateByType = (type) => { - // This is because the default and published view has its own style - if (deploymentState === 'default' || deploymentState === 'published') { - return null; - } - - if (type === 'title') { - return deploymentState === 'success' - ? 'Kedro-Viz successfully hosted and published' - : 'Publish and Share Kedro-Viz'; - } - - return modalMessages(deploymentState, compatibilityData.package_version); - }; - const handleResponseUrl = () => { // If the URL does not start with http:// or https://, append http:// to avoid relative path issue for GCP platform. if (!/^https?:\/\//.test(responseUrl) && inputValues.platform === 'gcp') { @@ -243,310 +221,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { return responseUrl; }; - const renderCompatibilityMessage = () => { - return !canUseShareableUrls ? ( -
- - - - -
- ) : null; - }; - - const renderPublishedView = () => { - const platformsKeys = Object.keys(hostingPlatformLocalStorageVal); - const platformsVal = Object.values(hostingPlatformLocalStorageVal); - - const url = platform - ? hostingPlatformLocalStorageVal[platform]['endpoint'] - : platformsVal[0]['endpoint']; - - const filteredPlatforms = {}; - platformsKeys.forEach((key) => { - if (hostingPlatforms.hasOwnProperty(key)) { - filteredPlatforms[key] = hostingPlatforms[key]; - } - }); - - return ( - <> -
-
- Publish and Share Kedro-Viz -
- {platformsKeys.length === 1 ? ( - onCopyClick(url)} - href={handleResponseUrl()} - showCopiedText={showCopied} - /> - ) : ( -
- { - onChange('platform', selectedPlatform.value); - setPopulatedContentKey(selectedPlatform.value); - }} - width={null} - > - {Object.entries(filteredPlatforms).map(([value, label]) => ( - - ))} - - onCopyClick(url)} - href={handleResponseUrl()} - showCopiedText={showCopied} - /> -
- )} -
-
-

- Republish Kedro-Viz to push new updates to the published link above, - or publish a new link to share. -

- -
- - ); - }; - - const renderSuccessView = () => { - return responseUrl ? ( -
- -
- ) : null; - }; - - const renderErrorView = () => { - return responseError ? ( -
-

Error message: {responseError}

- -
- ) : null; - }; - - const renderTextContent = () => { - return ( -
-
- Publish and Share Kedro-Viz -
-

- Prerequisite:{' '} -

-

- Deploying and hosting Kedro-Viz requires access keys or user - credentials, depending on the chosen service provider. To use this - feature, please add your access keys or credentials as environment - variables in your project. More information can be found in the{' '} - - documentation - - . -

-

- Disclaimer:{' '} -

-

- Disclaimer Kedro-Viz contains preview data for multiple datasets. You - can enable or disable all previews when publishing Kedro-Viz. -

-
- All dataset previews - setTogleValue((prev) => !prev)} - /> -
-
- ); - }; - - const renderLoadingView = () => { - return isLoading ? ( -
- -
- ) : null; - }; - - const renderMainView = () => { - return !isLoading && !responseUrl && !responseError ? ( - <> -
- {renderTextContent()} -
-

- Enter the required information. -

-
-
- Hosting platform -
- { - onChange('platform', selectedPlatform.value); - }} - width={null} - > - {Object.entries(hostingPlatforms).map(([value, label]) => ( - - ))} - -
-
-
- Bucket name -
- onChange('bucket_name', value)} - placeholder="Enter name" - resetValueTrigger={visible} - size="small" - type="input" - dataTest={'bucket_name'} - /> -
-
-
-
- Endpoint URL -
- - The endpoint URL is the link to where your Kedro-Viz will - be hosted. For information on obtaining the endpoint URL, - please refer to the documentation for{' '} - - AWS - - ,{' '} - - Azure - - ,{' '} - - GCP - -

- } - icon={InfoIcon} - /> -
- onChange('endpoint', value)} - placeholder="Enter url" - resetValueTrigger={visible} - size="small" - type="input" - dataTest={'endpoint_name'} - /> -
-
-
-
- - -
- - ) : null; - }; - - const { platform, bucket_name, endpoint } = inputValues || {}; + const { platform } = inputValues || {}; return ( { 'shareable-url-modal__success-wrapper': deploymentState === 'success', })} closeModal={handleModalClose} - message={getDeploymentStateByType('message')} - title={getDeploymentStateByType('title')} + message={getDeploymentStateByType( + 'message', + deploymentState, + compatibilityData, + modalMessages + )} + title={getDeploymentStateByType( + 'title', + deploymentState, + compatibilityData, + modalMessages + )} visible={visible.shareableUrlModal} > - {renderCompatibilityMessage()} - {canUseShareableUrls ? ( - showPublishedView ? ( - renderPublishedView() - ) : ( - <> - {renderMainView()} - {renderLoadingView()} - {renderErrorView()} - {renderSuccessView()} - - ) - ) : null} + {!isCompatible ? ( + + ) : showPublishedView ? ( + { + onChange('platform', selectedPlatform.value); + setPublishedPlatformKey(selectedPlatform.value); + }} + onCopyClick={onCopyClick} + onRepublishClick={displayMainViewWithPublishedContent} + platform={platform} + showCopied={showCopied} + /> + ) : ( + <> + {!isLoading && !responseUrl && !responseError && ( + + )} + {isLoading && } + {responseError && ( + { + setDeploymentState('default'); + setIsLoading(false); + setResponseUrl(null); + setResponseError(null); + }} + responseError={responseError} + /> + )} + {responseUrl && ( + + )} + + )} ); }; diff --git a/src/components/shareable-url-modal/success-view/success-view.js b/src/components/shareable-url-modal/success-view/success-view.js new file mode 100644 index 0000000000..65472a9ff7 --- /dev/null +++ b/src/components/shareable-url-modal/success-view/success-view.js @@ -0,0 +1,21 @@ +import UrlBox from '../url-box/url-box'; + +const SuccessView = ({ + handleResponseUrl, + onClick, + responseUrl, + showCopied, +}) => { + return responseUrl ? ( +
+ +
+ ) : null; +}; + +export default SuccessView; diff --git a/src/components/shareable-url-modal/utils.js b/src/components/shareable-url-modal/utils.js new file mode 100644 index 0000000000..11b13cbae5 --- /dev/null +++ b/src/components/shareable-url-modal/utils.js @@ -0,0 +1,41 @@ +export const getFilteredPlatforms = (hostingPlatforms, platformsKeys) => { + const filteredPlatforms = {}; + platformsKeys.forEach((key) => { + if (hostingPlatforms.hasOwnProperty(key)) { + filteredPlatforms[key] = hostingPlatforms[key]; + } + }); + + return filteredPlatforms; +}; + +/** + * Gets the deployment state message based on the type requested. + * + * @param {string} type - The type of message to return ('title' or 'message'). + * @param {string} deploymentState - The current deployment state. + * @param {Object} compatibilityData - Data containing the package version. + * @param {Function} modalMessages - Function to get modal messages based on deployment state and package version. + * @returns {string|null} - The message based on the deployment state and type, or null for default/published states. + */ +export const getDeploymentStateByType = ( + type, + deploymentState, + compatibilityData, + modalMessages +) => { + // This is because the default and published view has its own style + if (deploymentState === 'default' || deploymentState === 'published') { + return null; + } + + if (type === 'title') { + return deploymentState === 'success' + ? 'Kedro-Viz successfully hosted and published' + : 'Publish and Share Kedro-Viz'; + } + + if (type === 'message') { + return modalMessages(deploymentState, compatibilityData.package_version); + } +}; diff --git a/src/config.js b/src/config.js index c48995152d..ebaf2ed849 100644 --- a/src/config.js +++ b/src/config.js @@ -156,6 +156,18 @@ export const hostingPlatforms = { azure: 'Microsoft Azure', }; +export const shareableUrlMessages = (status, info = '') => { + const messages = { + failure: 'Something went wrong. Please try again later.', + loading: 'Shooting your files through space. Sit tight...', + success: + 'The deployment has been successful and Kedro-Viz is hosted via the link below..', + incompatible: `Publishing Kedro-Viz is only supported with fsspec>=2023.9.0. You are currently on version ${info}.\n\nPlease upgrade fsspec to a supported version and ensure you're using Kedro 0.18.2 or above.`, + }; + + return messages[status]; +}; + export const inputKeyToStateKeyMap = { // eslint-disable-next-line camelcase bucket_name: 'hasBucketName', From 9c3c0b1775e82393093020b1a3ee11eeaa57e3b1 Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 22 May 2024 13:51:37 +0100 Subject: [PATCH 38/73] use shareableUrlMessages from config Signed-off-by: huongg --- .../shareable-url-modal/shareable-url-modal.js | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index ee06e405b0..d2473c2dce 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -10,6 +10,7 @@ import { inputKeyToStateKeyMap, localStorageSharableUrl, PACKAGE_FSSPEC, + shareableUrlMessages, } from '../../config'; import Modal from '../ui/modal'; @@ -23,18 +24,6 @@ import { getDeploymentStateByType } from './utils'; import './shareable-url-modal.scss'; -const modalMessages = (status, info = '') => { - const messages = { - failure: 'Something went wrong. Please try again later.', - loading: 'Shooting your files through space. Sit tight...', - success: - 'The deployment has been successful and Kedro-Viz is hosted via the link below..', - incompatible: `Publishing Kedro-Viz is only supported with fsspec>=2023.9.0. You are currently on version ${info}.\n\nPlease upgrade fsspec to a supported version and ensure you're using Kedro 0.18.2 or above.`, - }; - - return messages[status]; -}; - const ShareableUrlModal = ({ onToggleModal, visible }) => { const [deploymentState, setDeploymentState] = useState('default'); const [inputValues, setInputValues] = useState({}); @@ -237,13 +226,13 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { 'message', deploymentState, compatibilityData, - modalMessages + shareableUrlMessages )} title={getDeploymentStateByType( 'title', deploymentState, compatibilityData, - modalMessages + shareableUrlMessages )} visible={visible.shareableUrlModal} > From f6e81e9f5f6157e5cfb610fa04ef9af5ff4a228e Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 22 May 2024 15:25:08 +0100 Subject: [PATCH 39/73] include gitpod in isRunningLocal Signed-off-by: huongg --- src/utils/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/index.js b/src/utils/index.js index b8cd1888bf..b904a2488d 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -189,7 +189,7 @@ export const formatNumberWithCommas = (number) => { * @returns {Boolean} True if the app is running locally. */ export const isRunningLocally = () => { - const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org']; + const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org', 'gitpod.io']; const itemFoundIndex = hosts.indexOf(window.location.hostname); if (itemFoundIndex === -1) { From cc4291dbe6db6af31c2e67993fac9e24d49d9f39 Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 22 May 2024 15:33:37 +0100 Subject: [PATCH 40/73] remove isRunningLocally for QA Signed-off-by: huongg --- src/components/wrapper/wrapper.js | 3 ++- src/utils/index.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/wrapper/wrapper.js b/src/components/wrapper/wrapper.js index a90e83778a..5d70b81aa8 100644 --- a/src/components/wrapper/wrapper.js +++ b/src/components/wrapper/wrapper.js @@ -52,7 +52,8 @@ export const Wrapper = ({ displayGlobalToolbar, theme }) => { isOutdated={isOutdated} latestVersion={latestVersion} /> - {isRunningLocally() ? : null} + {/* {isRunningLocally() ? : null} */} + {versionData && ( { * @returns {Boolean} True if the app is running locally. */ export const isRunningLocally = () => { - const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org', 'gitpod.io']; + const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org']; const itemFoundIndex = hosts.indexOf(window.location.hostname); if (itemFoundIndex === -1) { From ce61d28cfc264d5312bad3468111b8d10c2e78fa Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 22 May 2024 16:10:37 +0100 Subject: [PATCH 41/73] include check for gitpod Signed-off-by: huongg --- src/components/wrapper/wrapper.js | 3 +-- src/utils/index.js | 10 ++++------ 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/wrapper/wrapper.js b/src/components/wrapper/wrapper.js index 5d70b81aa8..a90e83778a 100644 --- a/src/components/wrapper/wrapper.js +++ b/src/components/wrapper/wrapper.js @@ -52,8 +52,7 @@ export const Wrapper = ({ displayGlobalToolbar, theme }) => { isOutdated={isOutdated} latestVersion={latestVersion} /> - {/* {isRunningLocally() ? : null} */} - + {isRunningLocally() ? : null} {versionData && ( { */ export const isRunningLocally = () => { const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org']; - const itemFoundIndex = hosts.indexOf(window.location.hostname); + const itemFound = hosts.some((host) => + window.location.hostname.includes(host) + ); - if (itemFoundIndex === -1) { - return false; // The hostname isn't in our list of local hosts - } else { - return true; - } + return itemFound; }; /** From f6ead60890629f61ece735a08561a6e9997463c7 Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 22 May 2024 16:20:15 +0100 Subject: [PATCH 42/73] update onChange name Signed-off-by: huongg --- .../shareable-url-modal/main-view/main-view.js | 10 ++++++---- .../shareable-url-modal/shareable-url-modal.js | 6 +++++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/shareable-url-modal/main-view/main-view.js b/src/components/shareable-url-modal/main-view/main-view.js index 55ea85354e..2568208915 100644 --- a/src/components/shareable-url-modal/main-view/main-view.js +++ b/src/components/shareable-url-modal/main-view/main-view.js @@ -63,7 +63,9 @@ const MainView = ({ handleSubmit, inputValues, isFormDirty, - onChange, + onPlatformChange, + onBuckNameChange, + onEndpointChange, setTogleValue, toggleValue, visible, @@ -85,7 +87,7 @@ const MainView = ({ {Object.entries(hostingPlatforms).map(([value, label]) => ( @@ -104,7 +106,7 @@ const MainView = ({
Bucket name
onChange('bucket_name', value)} + onChange={onBuckNameChange} placeholder="Enter name" resetValueTrigger={visible} size="small" @@ -158,7 +160,7 @@ const MainView = ({
onChange('endpoint', value)} + onChange={onEndpointChange} placeholder="Enter url" resetValueTrigger={visible} size="small" diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index d2473c2dce..609df33d13 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -260,7 +260,11 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { handleSubmit={handleSubmit} inputValues={inputValues} isFormDirty={isFormDirty} - onChange={onChange} + onPlatformChange={(selectedPlatform) => { + onChange('platform', selectedPlatform.value); + }} + onBuckNameChange={(value) => onChange('bucket_name', value)} + onEndpointChange={(value) => onChange('endpoint', value)} setTogleValue={setTogleValue} toggleValue={toggleValue} visible={visible} From 558a6beddc501fc7c1b9559fb70f5e094123b859 Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 22 May 2024 16:26:27 +0100 Subject: [PATCH 43/73] include gitpod in hosts Signed-off-by: huongg --- src/utils/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/index.js b/src/utils/index.js index d2feb809c9..e96187016b 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -189,7 +189,7 @@ export const formatNumberWithCommas = (number) => { * @returns {Boolean} True if the app is running locally. */ export const isRunningLocally = () => { - const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org']; + const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org', 'gitpod']; const itemFound = hosts.some((host) => window.location.hostname.includes(host) ); From 69ec462c2bb7f08b21204b18bf7236761e6dd31f Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 22 May 2024 19:10:34 +0100 Subject: [PATCH 44/73] revert changes Signed-off-by: huongg --- src/utils/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/utils/index.js b/src/utils/index.js index e96187016b..b8cd1888bf 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -189,12 +189,14 @@ export const formatNumberWithCommas = (number) => { * @returns {Boolean} True if the app is running locally. */ export const isRunningLocally = () => { - const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org', 'gitpod']; - const itemFound = hosts.some((host) => - window.location.hostname.includes(host) - ); + const hosts = ['localhost', '127.0.0.1', 'demo.kedro.org']; + const itemFoundIndex = hosts.indexOf(window.location.hostname); - return itemFound; + if (itemFoundIndex === -1) { + return false; // The hostname isn't in our list of local hosts + } else { + return true; + } }; /** From 58d29f1608677598c47891c4bd19c354919616e5 Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 23 May 2024 10:50:06 +0100 Subject: [PATCH 45/73] move handleResponseUrl to util Signed-off-by: huongg --- .../published-view/published-view.js | 14 ++++++++------ .../shareable-url-modal/shareable-url-modal.js | 14 ++------------ .../success-view/success-view.js | 2 +- .../shareable-url-modal/url-box/url-box.js | 2 +- src/components/shareable-url-modal/utils.js | 9 +++++++++ 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components/shareable-url-modal/published-view/published-view.js b/src/components/shareable-url-modal/published-view/published-view.js index e0adafa8c5..c989dc0ee7 100644 --- a/src/components/shareable-url-modal/published-view/published-view.js +++ b/src/components/shareable-url-modal/published-view/published-view.js @@ -4,10 +4,9 @@ import Button from '../../ui/button'; import Dropdown from '../../ui/dropdown'; import MenuOption from '../../ui/menu-option'; -import { getFilteredPlatforms } from '../utils'; +import { getFilteredPlatforms, handleResponseUrl } from '../utils'; const PublishedView = ({ - handleResponseUrl, hostingPlatformLocalStorageVal, hostingPlatforms, onChange, @@ -27,6 +26,9 @@ const PublishedView = ({ hostingPlatforms, platformsKeys ); + + const href = handleResponseUrl(url, platform || platformsVal[0]['platform']); + return ( <>
@@ -36,8 +38,8 @@ const PublishedView = ({ {platformsKeys.length === 1 ? ( onCopyClick(url)} - href={handleResponseUrl} + onCopyClick={onCopyClick} + href={href} showCopiedText={showCopied} /> ) : ( @@ -73,8 +75,8 @@ const PublishedView = ({

- Republish Kedro-Viz to push new updates to the published link above, - or publish a new link to share. + Republish Kedro-Viz to push new updates, or publish and host Kedro-Viz + with a new link.

diff --git a/src/components/shareable-url-modal/url-box/url-box.js b/src/components/shareable-url-modal/url-box/url-box.js index 917abe10b6..021ed387ca 100644 --- a/src/components/shareable-url-modal/url-box/url-box.js +++ b/src/components/shareable-url-modal/url-box/url-box.js @@ -28,7 +28,7 @@ const UrlBox = ({ className, url, onClick, href, showCopiedText }) => ( >

- Prerequisite:{' '} + Prerequisites{' '}

Deploying and hosting Kedro-Viz requires access keys or user @@ -38,8 +38,9 @@ const renderTextContent = (toggleValue, setTogleValue) => { .

-

- Disclaimer:{' '} + {/* To be commented out until the preview disable is ready */} + {/*

+ Disclaimer{' '}

Disclaimer Kedro-Viz contains preview data for multiple datasets. You @@ -53,7 +54,7 @@ const renderTextContent = (toggleValue, setTogleValue) => { checked={toggleValue} onChange={() => setTogleValue((prev) => !prev)} /> - + */} ); }; @@ -78,7 +79,7 @@ const MainView = ({ {renderTextContent(toggleValue, setTogleValue)}

- Enter the required information. + Please enter the required information below.

diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index 4427f1a06d..bfe3991b8a 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -103,7 +103,15 @@ } } - &__content-description-title:nth-of-type(2)::before { + &__content-description-title { + color: var(--color-deployed-link); + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + } + + &__content-description-title--disclaimer::before { background: var(--color-divider); content: ''; display: block; From 96d650d8732c0f6fb3dd1c5f4159b26ac83f52c6 Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 23 May 2024 16:08:40 +0100 Subject: [PATCH 48/73] fix some design issue Signed-off-by: huongg --- .../main-view/main-view.js | 4 +-- .../shareable-url-modal.scss | 26 +++++++++++++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/shareable-url-modal/main-view/main-view.js b/src/components/shareable-url-modal/main-view/main-view.js index ce9193251f..2474498451 100644 --- a/src/components/shareable-url-modal/main-view/main-view.js +++ b/src/components/shareable-url-modal/main-view/main-view.js @@ -6,7 +6,7 @@ import IconButton from '../../ui/icon-button'; import InfoIcon from '../../icons/info'; import Input from '../../ui/input'; import MenuOption from '../../ui/menu-option'; -import Toggle from '../../ui/toggle'; +// import Toggle from '../../ui/toggle'; import { hostingPlatforms, KEDRO_VIZ_PUBLISH_AWS_DOCS_URL, @@ -124,7 +124,7 @@ const MainView = ({ ariaLabel="The endpoint URL information" className="shareable-url-modal__information-icon" labelText={ -

+

The endpoint URL is the link to where your Kedro-Viz will be hosted. For information on obtaining the endpoint URL, please refer to the documentation for{' '} diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index bfe3991b8a..a50403b703 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -40,7 +40,7 @@ } .modal__title { - margin-bottom: 24px; + margin: 0 0 24px; } .modal__description { @@ -92,6 +92,7 @@ } &__content-description { + color: var(--color-description-text); font-size: 14px; font-style: normal; font-weight: 400; @@ -105,7 +106,7 @@ &__content-description-title { color: var(--color-deployed-link); - font-size: 16px; + font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; @@ -177,6 +178,11 @@ text-decoration: none; border: 1px solid variables.$blue-300; } + + &::placeholder { + color: #{variables.$black-500}; + opacity: 1; + } } } @@ -223,6 +229,18 @@ top: 5%; } } + + .pipeline-toolbar__label-right { + margin-left: 2em; + + .shareable-url-modal__information-text { + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; + margin: 0; + } + } } } @@ -336,6 +354,10 @@ .menu-option__content { font-size: 14px; } + + .dropdown__placeholder { + color: #{variables.$black-500}; + } } .shareable-url-modal__published-wrapper { From d6054f54a81e0114f7b15210127aed29deb0da62 Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 23 May 2024 16:53:16 +0100 Subject: [PATCH 49/73] fix hover state for copy button Signed-off-by: huongg --- src/components/shareable-url-modal/shareable-url-modal.scss | 4 ++-- src/components/shareable-url-modal/url-box/url-box.js | 1 - src/components/shareable-url-modal/url-box/url-box.scss | 4 +--- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index a50403b703..add8d6695c 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -8,7 +8,7 @@ --color-modal-bg-2: #{variables.$grey-0}; --color-footer-border: #{variables.$grey-300}; --color-text-doc-link: #{variables.$black-800}; - --color-form-label: #{variables.$grey-700}; + --color-form-label: #{variables.$black-200}; --input-bg: #{variables.$white-100}; --input-shadow: #{variables.$white-800}; --color-btn-bg: #{variables.$white-500}; @@ -22,7 +22,7 @@ --color-modal-bg-2: #{variables.$slate-100}; --color-footer-border: #{variables.$black-600}; --color-text-doc-link: #{variables.$white-600}; - --color-form-label: #{variables.$grey-500}; + --color-form-label: #{variables.$black-0}; --input-bg: #{variables.$slate-700}; --input-shadow: #{variables.$slate-900}; --color-btn-bg: #{variables.$black-600}; diff --git a/src/components/shareable-url-modal/url-box/url-box.js b/src/components/shareable-url-modal/url-box/url-box.js index 021ed387ca..cbaf5462ef 100644 --- a/src/components/shareable-url-modal/url-box/url-box.js +++ b/src/components/shareable-url-modal/url-box/url-box.js @@ -27,7 +27,6 @@ const UrlBox = ({ className, url, onClick, href, showCopiedText }) => ( })} >

diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index 7daee9789c..ee1c0d9343 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -114,6 +114,7 @@ font-style: normal; font-weight: 400; line-height: 20px; + margin-top: 0; } &__content-description-title--disclaimer::before { diff --git a/src/components/shareable-url-modal/url-box/url-box.js b/src/components/shareable-url-modal/url-box/url-box.js index cbaf5462ef..391bfa8aea 100644 --- a/src/components/shareable-url-modal/url-box/url-box.js +++ b/src/components/shareable-url-modal/url-box/url-box.js @@ -4,7 +4,7 @@ import Button from '../../ui/button'; import './url-box.scss'; -const UrlBox = ({ className, url, onClick, href, showCopiedText }) => ( +const UrlBox = ({ className, url, onCopyClick, href, showCopiedText }) => (
( })} >

- Republish Kedro-Viz to push new updates, or publish and host Kedro-Viz - with a new link. + Republish Kedro-Viz to push new updates, +
+ or publish and host Kedro-Viz with a new link.

*/} +
); }; diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 7e3dc5bd6c..92b9b0d362 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -124,6 +124,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const handleSubmit = async () => { setDeploymentState('loading'); setIsLoading(true); + setShowPublishedView(false); // this logic is here to test locally without publishing anything const hostingPlatformVal = {}; diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index 6eef7a3dae..6a31f2e9a2 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -451,6 +451,10 @@ .shareable-url-modal__result { width: 100%; + + .url-box__result-url-wrapper { + width: 440px; + } } } diff --git a/src/components/shareable-url-modal/success-view/success-view.js b/src/components/shareable-url-modal/success-view/success-view.js index 309fad3c0b..e2217d2999 100644 --- a/src/components/shareable-url-modal/success-view/success-view.js +++ b/src/components/shareable-url-modal/success-view/success-view.js @@ -11,7 +11,7 @@ const SuccessView = ({
From 042e7154bd826322992314b3b43cfad74cf70906 Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 4 Jun 2024 14:37:11 +0100 Subject: [PATCH 56/73] remove updatelocalstorage outside success Signed-off-by: huongg --- .../shareable-url-modal/shareable-url-modal.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 92b9b0d362..fa65526711 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -126,18 +126,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { setIsLoading(true); setShowPublishedView(false); - // this logic is here to test locally without publishing anything - const hostingPlatformVal = {}; - if (hostingPlatforms.hasOwnProperty(inputValues.platform)) { - hostingPlatformVal[inputValues.platform] = { ...inputValues }; - } - saveLocalStorage(localStorageSharableUrl, hostingPlatformVal); - const newState = { - ...hostingPlatformLocalStorageVal, - ...hostingPlatformVal, - }; - setHostingPlatformLocalStorageVal(newState); - try { const request = await retrieveHostingPlatformData(inputValues); const response = await request.json(); From 4b55a8892ee59d1beadec37ca7a93eab7e6b7c07 Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 4 Jun 2024 14:39:53 +0100 Subject: [PATCH 57/73] remove css comments Signed-off-by: huongg --- src/components/shareable-url-modal/shareable-url-modal.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index 6a31f2e9a2..337250382e 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.scss +++ b/src/components/shareable-url-modal/shareable-url-modal.scss @@ -375,7 +375,6 @@ } .shareable-url-modal__published { - // check with Step since there's no timestamp atm, can we decrease the padding bottom from 84 to 48px background-color: var(--color-modal-bg-1); padding: 48px; width: 100%; @@ -423,7 +422,6 @@ width: 100%; .button__btn--secondary { - // double check the hex colour with Step background-color: var(--color-btn-bg); } From 580f15dcbb6277624d3de0d7010965c2a479d27e Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 4 Jun 2024 14:46:44 +0100 Subject: [PATCH 58/73] update release note Signed-off-by: huongg --- RELEASE.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/RELEASE.md b/RELEASE.md index 8da48896b5..c5a5aa9e9b 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -7,6 +7,11 @@ Please follow the established format: --> # Next release +## Major features and improvements +- Display previously published URLs. (#1907) + +## Bug fixes and other changes + # Release 9.1.0 ## Major features and improvements From d60167cddb61fd2c8ce24d70fb2c964333958bbe Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 4 Jun 2024 15:40:21 +0100 Subject: [PATCH 59/73] update e2e tests Signed-off-by: huongg --- cypress/tests/ui/flowchart/shareable-urls.cy.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js index 9963d9e83e..639e8dcab5 100644 --- a/cypress/tests/ui/flowchart/shareable-urls.cy.js +++ b/cypress/tests/ui/flowchart/shareable-urls.cy.js @@ -282,9 +282,15 @@ describe('Shareable URLs with valid localStorage', () => { // Fill in the form with second option fillFormAndSubmit(secondBucketName, secondEndpointName); + // Close the modal once it publishes successfully + cy.get('body').click(0, 0); + + cy.get('.pipeline-menu-button--deploy').click(); + cy.get( '.shareable-url-modal__published-dropdown-wrapper [data-test=kedro-pipeline-selector]' ).click(); + cy.get( '.shareable-url-modal__published-dropdown-wrapper .dropdown__options section div' ) From 8c06a8dbccd27b51d1a76a42385d97dcc3d88508 Mon Sep 17 00:00:00 2001 From: huongg Date: Tue, 4 Jun 2024 16:47:17 +0100 Subject: [PATCH 60/73] update toggle value name Signed-off-by: huongg --- src/components/shareable-url-modal/shareable-url-modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index fa65526711..7ef957b30e 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -43,7 +43,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const [hostingPlatformLocalStorageVal, setHostingPlatformLocalStorageVal] = useState(loadLocalStorage(localStorageSharableUrl) || {}); const [publishedPlatformKey, setPublishedPlatformKey] = useState(undefined); - const [toggleValue, setTogleValue] = useState(false); + const [isPreviewEnabled, setIsPreviewEnabled] = useState(true); useEffect(() => { async function fetchPackageCompatibility() { @@ -238,8 +238,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }} onBuckNameChange={(value) => onChange('bucket_name', value)} onEndpointChange={(value) => onChange('endpoint', value)} - setTogleValue={setTogleValue} - toggleValue={toggleValue} + setTogleValue={setIsPreviewEnabled} + toggleValue={isPreviewEnabled} visible={visible} /> )} From 4431ff0ab07d681fff089a1f45997b4b49dcbc07 Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 5 Jun 2024 13:48:42 +0100 Subject: [PATCH 61/73] update component name and fix compatible issue Signed-off-by: huongg --- .../compatibility-error-view.js} | 4 ++-- .../shareable-url-modal/shareable-url-modal.js | 15 +++++++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) rename src/components/shareable-url-modal/{compatibility-view/compatibility-view.js => compatibility-error-view/compatibility-error-view.js} (84%) diff --git a/src/components/shareable-url-modal/compatibility-view/compatibility-view.js b/src/components/shareable-url-modal/compatibility-error-view/compatibility-error-view.js similarity index 84% rename from src/components/shareable-url-modal/compatibility-view/compatibility-view.js rename to src/components/shareable-url-modal/compatibility-error-view/compatibility-error-view.js index e594fc8ac9..d728f9787f 100644 --- a/src/components/shareable-url-modal/compatibility-view/compatibility-view.js +++ b/src/components/shareable-url-modal/compatibility-error-view/compatibility-error-view.js @@ -1,7 +1,7 @@ import React from 'react'; import Button from '../../ui/button'; -const CompatibilityView = ({ onClick }) => ( +const CompatibilityErrorView = ({ onClick }) => (
); -export default CompatibilityView; +export default CompatibilityErrorView; diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 7ef957b30e..a603f6530c 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -15,7 +15,7 @@ import { import Modal from '../ui/modal'; import PublishedView from './published-view/published-view'; -import CompatibilityView from './compatibility-view/compatibility-view'; +import CompatibilityErrorView from './compatibility-error-view/compatibility-error-view'; import MainView from './main-view/main-view'; import LoadingView from './loading-view/loading-view'; import ErrorView from './error-view/error-view'; @@ -170,8 +170,16 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const handleModalClose = () => { onToggleModal(false); if (deploymentState !== 'incompatible') { - setDeploymentState('default'); + // reset the state to default as long as the user's fsspec package version is compatible + // and there are nothing stored in localStorage + if (Object.keys(hostingPlatformLocalStorageVal).length === 0) { + setDeploymentState('default'); + } + + // if there are items stored in localStorage, display the published view + displayPublishedView(); } + setResponseError(null); setIsLoading(false); setResponseUrl(null); @@ -181,7 +189,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { hasPlatform: false, hasEndpoint: false, }); - displayPublishedView(); }; const { platform } = inputValues || {}; @@ -211,7 +218,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { visible={visible.shareableUrlModal} > {!isCompatible ? ( - + ) : showPublishedView ? ( Date: Wed, 5 Jun 2024 16:28:45 +0100 Subject: [PATCH 62/73] push the current state to the first of localStorage list Signed-off-by: huongg --- src/components/shareable-url-modal/shareable-url-modal.js | 2 +- src/store/helpers.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index a603f6530c..a78d851d0b 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -140,8 +140,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { } saveLocalStorage(localStorageSharableUrl, hostingPlatformVal); const newState = { - ...hostingPlatformLocalStorageVal, ...hostingPlatformVal, + ...hostingPlatformLocalStorageVal, }; setHostingPlatformLocalStorageVal(newState); } else { diff --git a/src/store/helpers.js b/src/store/helpers.js index 84755880ad..835c4efe98 100644 --- a/src/store/helpers.js +++ b/src/store/helpers.js @@ -33,7 +33,7 @@ export const saveLocalStorage = (itemKey = localStorageName, state) => { return; } try { - const newState = Object.assign(loadLocalStorage(itemKey), state); + const newState = Object.assign(state, loadLocalStorage(itemKey)); // Remove deprecated key from localStorage to suppress error. // This can be removed in future versions of KedroViz: if (newState.hasOwnProperty('nodeTypeDisabled')) { From 2422739491fb542d445fe21d557fd12ee5680d1e Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 5 Jun 2024 16:31:01 +0100 Subject: [PATCH 63/73] update local variable names Signed-off-by: huongg --- .../published-view/published-view.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/shareable-url-modal/published-view/published-view.js b/src/components/shareable-url-modal/published-view/published-view.js index 48de06cec1..dc4d93f13e 100644 --- a/src/components/shareable-url-modal/published-view/published-view.js +++ b/src/components/shareable-url-modal/published-view/published-view.js @@ -16,19 +16,26 @@ const PublishedView = ({ platform, showCopied, }) => { - const platformsKeys = Object.keys(hostingPlatformLocalStorageVal); - const platformsVal = Object.values(hostingPlatformLocalStorageVal); + const platformsKeysFromLocalStorage = Object.keys( + hostingPlatformLocalStorageVal + ); + const platformsValFromLocalStorage = Object.values( + hostingPlatformLocalStorageVal + ); const url = platform ? hostingPlatformLocalStorageVal[platform]['endpoint'] - : platformsVal[0]['endpoint']; + : platformsValFromLocalStorage[0]['endpoint']; const filteredPlatforms = getFilteredPlatforms( hostingPlatforms, - platformsKeys + platformsKeysFromLocalStorage ); - const href = handleResponseUrl(url, platform || platformsVal[0]['platform']); + const href = handleResponseUrl( + url, + platform || platformsValFromLocalStorage[0]['platform'] + ); return ( <> @@ -36,7 +43,7 @@ const PublishedView = ({
Publish and Share Kedro-Viz
- {platformsKeys.length === 1 ? ( + {platformsKeysFromLocalStorage.length === 1 ? ( Date: Wed, 5 Jun 2024 16:57:59 +0100 Subject: [PATCH 64/73] revert the update localStorage state Signed-off-by: huongg --- src/store/helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/helpers.js b/src/store/helpers.js index 835c4efe98..84755880ad 100644 --- a/src/store/helpers.js +++ b/src/store/helpers.js @@ -33,7 +33,7 @@ export const saveLocalStorage = (itemKey = localStorageName, state) => { return; } try { - const newState = Object.assign(state, loadLocalStorage(itemKey)); + const newState = Object.assign(loadLocalStorage(itemKey), state); // Remove deprecated key from localStorage to suppress error. // This can be removed in future versions of KedroViz: if (newState.hasOwnProperty('nodeTypeDisabled')) { From a15492ba6494eb9e9c01d5ec791838bef3fdef5a Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 5 Jun 2024 16:59:24 +0100 Subject: [PATCH 65/73] update release note Signed-off-by: huongg --- RELEASE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/RELEASE.md b/RELEASE.md index c5a5aa9e9b..81f3a63be9 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -8,7 +8,7 @@ Please follow the established format: # Next release ## Major features and improvements -- Display previously published URLs. (#1907) +- Display published URLs. (#1907) ## Bug fixes and other changes From 4c01960ddb28bab2c09342696eff151a5e4025e0 Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 5 Jun 2024 17:07:25 +0100 Subject: [PATCH 66/73] update name deployVix Signed-off-by: huongg --- src/components/shareable-url-modal/shareable-url-modal.js | 4 ++-- src/utils/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index a78d851d0b..40360df14b 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -21,7 +21,7 @@ import LoadingView from './loading-view/loading-view'; import ErrorView from './error-view/error-view'; import SuccessView from './success-view/success-view'; import { getDeploymentStateByType, handleResponseUrl } from './utils'; -import { retrieveHostingPlatformData } from '../../utils'; +import { deployViz } from '../../utils'; import './shareable-url-modal.scss'; @@ -127,7 +127,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { setShowPublishedView(false); try { - const request = await retrieveHostingPlatformData(inputValues); + const request = await deployViz(inputValues); const response = await request.json(); if (request.ok) { diff --git a/src/utils/index.js b/src/utils/index.js index 6b2689a8a6..72fe34af97 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -227,7 +227,7 @@ export async function fetchPackageCompatibilities() { return request; } -export async function retrieveHostingPlatformData(inputValues) { +export async function deployViz(inputValues) { const request = await fetch('/api/deploy', { headers: { 'Content-Type': 'application/json', From 09648e634c215f999098078f4da8a5582d87a714 Mon Sep 17 00:00:00 2001 From: huongg Date: Wed, 5 Jun 2024 17:13:16 +0100 Subject: [PATCH 67/73] update setToggle name Signed-off-by: huongg --- .../shareable-url-modal/main-view/main-view.js | 14 +++++++------- .../shareable-url-modal/shareable-url-modal.js | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/shareable-url-modal/main-view/main-view.js b/src/components/shareable-url-modal/main-view/main-view.js index 8bb31b89ea..c0c9fadfe2 100644 --- a/src/components/shareable-url-modal/main-view/main-view.js +++ b/src/components/shareable-url-modal/main-view/main-view.js @@ -16,7 +16,7 @@ import { KEDRO_VIZ_PUBLISH_DOCS_URL, } from '../../../config'; -const renderTextContent = (toggleValue, setTogleValue) => { +const renderTextContent = (isPreviewEnabled, setIsPreviewEnabled) => { return (
@@ -50,9 +50,9 @@ const renderTextContent = (toggleValue, setTogleValue) => { All dataset previews setTogleValue((prev) => !prev)} + title={isPreviewEnabled ? 'On' : 'Off'} + checked={isPreviewEnabled} + onChange={() => setIsPreviewEnabled((prev) => !prev)} />
@@ -67,8 +67,8 @@ const MainView = ({ onPlatformChange, onBuckNameChange, onEndpointChange, - setTogleValue, - toggleValue, + setIsPreviewEnabled, + isPreviewEnabled, visible, }) => { const { platform, bucket_name, endpoint } = inputValues || {}; @@ -76,7 +76,7 @@ const MainView = ({ return ( <>
- {renderTextContent(toggleValue, setTogleValue)} + {renderTextContent(isPreviewEnabled, setIsPreviewEnabled)}

Please enter the required information below. diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 40360df14b..9528a2a471 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -245,8 +245,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }} onBuckNameChange={(value) => onChange('bucket_name', value)} onEndpointChange={(value) => onChange('endpoint', value)} - setTogleValue={setIsPreviewEnabled} - toggleValue={isPreviewEnabled} + setIsPreviewEnabled={setIsPreviewEnabled} + isPreviewEnabled={isPreviewEnabled} visible={visible} /> )} From 242d38cf1ee3c9990469fb8861674f472416770f Mon Sep 17 00:00:00 2001 From: Huong Nguyen <32060364+Huongg@users.noreply.github.com> Date: Wed, 5 Jun 2024 17:19:33 +0100 Subject: [PATCH 68/73] fix typo Co-authored-by: Ravi Kumar Pilla Signed-off-by: Huong Nguyen <32060364+Huongg@users.noreply.github.com> --- src/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config.js b/src/config.js index ebaf2ed849..d68b1f9655 100644 --- a/src/config.js +++ b/src/config.js @@ -4,7 +4,7 @@ export const localStorageName = 'KedroViz'; export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart'; export const localStorageMetricsSelect = 'KedroViz-metrics-chart-select'; export const localStorageRunsMetadata = 'KedroViz-runs-metadata'; -export const localStorageSharableUrl = 'KedroViz-sharable-url'; +export const localStorageShareableUrl = 'KedroViz-shareable-url'; export const linkToFlowchartInitialVal = { fromURL: null, From 0543139dcb53fe17a111224dc68d9ba010c05f51 Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 6 Jun 2024 08:40:40 +0100 Subject: [PATCH 69/73] fix typo and update variables names Signed-off-by: huongg --- .../shareable-url-modal/shareable-url-modal.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 9528a2a471..82783eb676 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -8,7 +8,7 @@ import { saveLocalStorage, loadLocalStorage } from '../../store/helpers'; import { hostingPlatforms, inputKeyToStateKeyMap, - localStorageSharableUrl, + localStorageShareableUrl, PACKAGE_FSSPEC, shareableUrlMessages, } from '../../config'; @@ -41,7 +41,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const [isCompatible, setIsCompatible] = useState(true); const [showPublishedView, setShowPublishedView] = useState(false); const [hostingPlatformLocalStorageVal, setHostingPlatformLocalStorageVal] = - useState(loadLocalStorage(localStorageSharableUrl) || {}); + useState(loadLocalStorage(localStorageShareableUrl) || {}); const [publishedPlatformKey, setPublishedPlatformKey] = useState(undefined); const [isPreviewEnabled, setIsPreviewEnabled] = useState(true); @@ -72,7 +72,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { fetchPackageCompatibility(); }, []); - const displayPublishedView = () => { + const setStateForPublishedView = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setDeploymentState('published'); setShowPublishedView(true); @@ -81,7 +81,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { } }; - const displayMainViewWithPublishedContent = () => { + const setStateForMainViewWithPublishedContent = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setShowPublishedView(false); setDeploymentState('default'); @@ -106,7 +106,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { }; useEffect(() => { - displayPublishedView(); + setStateForPublishedView(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const onChange = (key, value) => { @@ -138,7 +139,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { if (hostingPlatforms.hasOwnProperty(inputValues.platform)) { hostingPlatformVal[inputValues.platform] = { ...inputValues }; } - saveLocalStorage(localStorageSharableUrl, hostingPlatformVal); + saveLocalStorage(localStorageShareableUrl, hostingPlatformVal); const newState = { ...hostingPlatformVal, ...hostingPlatformLocalStorageVal, @@ -177,7 +178,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { } // if there are items stored in localStorage, display the published view - displayPublishedView(); + setStateForPublishedView(); } setResponseError(null); @@ -228,7 +229,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { setPublishedPlatformKey(selectedPlatform.value); }} onCopyClick={onCopyClick} - onRepublishClick={displayMainViewWithPublishedContent} + onRepublishClick={setStateForMainViewWithPublishedContent} platform={platform} showCopied={showCopied} /> From f7e486a6c178661b8763a7e24d76049b1efaa366 Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 6 Jun 2024 09:35:26 +0100 Subject: [PATCH 70/73] update the order in test Signed-off-by: huongg --- cypress/tests/ui/flowchart/shareable-urls.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js index 639e8dcab5..76926073db 100644 --- a/cypress/tests/ui/flowchart/shareable-urls.cy.js +++ b/cypress/tests/ui/flowchart/shareable-urls.cy.js @@ -294,7 +294,7 @@ describe('Shareable URLs with valid localStorage', () => { cy.get( '.shareable-url-modal__published-dropdown-wrapper .dropdown__options section div' ) - .eq(2) + .eq(1) .click(); cy.get('.url-box__result-url').contains(secondEndpointName); From 1d0668c894a2523b7487d3ea32707fee5c9c6f67 Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 6 Jun 2024 18:28:05 +0100 Subject: [PATCH 71/73] set form with localStorage data Signed-off-by: huongg --- .../shareable-url-modal.js | 48 +++++++++++++++---- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 82783eb676..f01cd5c8f3 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -72,6 +72,15 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { fetchPackageCompatibility(); }, []); + const createUpdatedFormDirtyState = (populatedContent) => { + return Object.fromEntries( + Object.entries(populatedContent).map(([key, value]) => [ + inputKeyToStateKeyMap[key], + !!value, + ]) + ); + }; + const setStateForPublishedView = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setDeploymentState('published'); @@ -88,16 +97,11 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const populatedContent = hostingPlatformLocalStorageVal[publishedPlatformKey]; + const updatedFormDirtyState = + createUpdatedFormDirtyState(populatedContent); setInputValues(populatedContent); - const updatedFormDirtyState = Object.fromEntries( - Object.entries(populatedContent).map(([key, value]) => [ - inputKeyToStateKeyMap[key], - !!value, - ]) - ); - setIsFormDirty((prevState) => ({ ...prevState, ...updatedFormDirtyState, @@ -122,6 +126,34 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { ); }; + const updateFormWithLocalStorageData = (platformKey) => { + // if the selected platform is stored in localStorage, populate the form with the stored data + if (hostingPlatformLocalStorageVal[platformKey]) { + const populatedContent = hostingPlatformLocalStorageVal[platformKey]; + const updatedFormDirtyState = + createUpdatedFormDirtyState(populatedContent); + + setInputValues(populatedContent); + setIsFormDirty((prevState) => ({ + ...prevState, + ...updatedFormDirtyState, + })); + } else { + // if not, only set the platform and reset the rest + const emptyContent = { + platform: platformKey, + bucket_name: '', + endpoint: '', + }; + setInputValues(emptyContent); + setIsFormDirty({ + hasBucketName: false, + hasPlatform: true, + hasEndpoint: false, + }); + } + }; + const handleSubmit = async () => { setDeploymentState('loading'); setIsLoading(true); @@ -242,7 +274,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { inputValues={inputValues} isFormDirty={isFormDirty} onPlatformChange={(selectedPlatform) => { - onChange('platform', selectedPlatform.value); + updateFormWithLocalStorageData(selectedPlatform.value); }} onBuckNameChange={(value) => onChange('bucket_name', value)} onEndpointChange={(value) => onChange('endpoint', value)} From 381c261b6fe9eb877dee629889b88d4f4f5ed2a8 Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 6 Jun 2024 19:25:14 +0100 Subject: [PATCH 72/73] remove create fucntion and set the state directly Signed-off-by: huongg --- .../shareable-url-modal.js | 31 ++++++------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index f01cd5c8f3..588d991ecd 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -72,15 +72,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { fetchPackageCompatibility(); }, []); - const createUpdatedFormDirtyState = (populatedContent) => { - return Object.fromEntries( - Object.entries(populatedContent).map(([key, value]) => [ - inputKeyToStateKeyMap[key], - !!value, - ]) - ); - }; - const setStateForPublishedView = () => { if (Object.keys(hostingPlatformLocalStorageVal).length > 0) { setDeploymentState('published'); @@ -97,15 +88,14 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { const populatedContent = hostingPlatformLocalStorageVal[publishedPlatformKey]; - const updatedFormDirtyState = - createUpdatedFormDirtyState(populatedContent); setInputValues(populatedContent); - setIsFormDirty((prevState) => ({ - ...prevState, - ...updatedFormDirtyState, - })); + setIsFormDirty({ + hasBucketName: true, + hasPlatform: true, + hasEndpoint: true, + }); } }; @@ -130,14 +120,13 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { // if the selected platform is stored in localStorage, populate the form with the stored data if (hostingPlatformLocalStorageVal[platformKey]) { const populatedContent = hostingPlatformLocalStorageVal[platformKey]; - const updatedFormDirtyState = - createUpdatedFormDirtyState(populatedContent); setInputValues(populatedContent); - setIsFormDirty((prevState) => ({ - ...prevState, - ...updatedFormDirtyState, - })); + setIsFormDirty({ + hasBucketName: true, + hasPlatform: true, + hasEndpoint: true, + }); } else { // if not, only set the platform and reset the rest const emptyContent = { From 54cf5ee50dc02c0a45cd38295e0a3ee4e285a5be Mon Sep 17 00:00:00 2001 From: huongg Date: Thu, 6 Jun 2024 20:57:57 +0100 Subject: [PATCH 73/73] fix the order not updated Signed-off-by: huongg --- .../shareable-url-modal.js | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index 588d991ecd..f65cdd07af 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -143,6 +143,28 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { } }; + const updateLocalStorageState = () => { + const selectedHostingPlatformVal = {}; + if (hostingPlatforms.hasOwnProperty(inputValues.platform)) { + selectedHostingPlatformVal[inputValues.platform] = { ...inputValues }; + } + saveLocalStorage(localStorageShareableUrl, selectedHostingPlatformVal); + + // filtering out the pairs where the key is in selectedHostingPlatformVal + const localStorageExcludingSelectedPlatform = Object.fromEntries( + Object.entries(hostingPlatformLocalStorageVal).filter( + ([key]) => !(key in selectedHostingPlatformVal) + ) + ); + + // set the new state with selectedHostingPlatformVal as the first value and localStorageExcludingSelectedPlatform + const newState = { + ...selectedHostingPlatformVal, + ...localStorageExcludingSelectedPlatform, + }; + setHostingPlatformLocalStorageVal(newState); + }; + const handleSubmit = async () => { setDeploymentState('loading'); setIsLoading(true); @@ -155,17 +177,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => { if (request.ok) { setResponseUrl(response.url); setDeploymentState('success'); - - const hostingPlatformVal = {}; - if (hostingPlatforms.hasOwnProperty(inputValues.platform)) { - hostingPlatformVal[inputValues.platform] = { ...inputValues }; - } - saveLocalStorage(localStorageShareableUrl, hostingPlatformVal); - const newState = { - ...hostingPlatformVal, - ...hostingPlatformLocalStorageVal, - }; - setHostingPlatformLocalStorageVal(newState); + updateLocalStorageState(); } else { setResponseUrl(null); setResponseError(response.message || 'Error occurred!');