Retrieve viz url

[Huongg]

Description

Fixes #1851 Design is here

Development notes

• we store store the fields including hosting platform, bucket name and endpoint URL in localStorage once the user publishes it. The format is as follow

  {
  aws: {
     bucket_name: ...,
     platform: 'aws',
     endpoint: '....',
  },
  gcp: {....},
  azure: {....}
  }

• Render the published content view will depends on whether there's only 1 hosting platform stored in localStorage or more than 1

• Current logic is summarised as the chart below

QA notes

You can test the UI using Gitpod. I've implemented the logic prior to the check that validates whether the submitted platform is valid or not. As a result, you can use any fabricated names and URLs, the system will display an error message.

Checklist

• [ ] Read the contributing guidelines
• [ ] Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• [ ] Updated the documentation to reflect the code changes
• [x] Added new entries to the RELEASE.md file
• [x] Added tests to cover my changes

[jitu5]

@Huongg As we discuss we need to refactor or break down shareable-url-modal.js component as its getting bigger and difficult to read.

[jitu5]

@Huongg When I was testing locally, For the first time after successful deployment I got below screen. Is it expected to have no close or cancel button on success screen ?

Also after refresh I opened publish popup again I got below screen, here also we don't have no close or cancel button. Thanks.

[Huongg]

@Huongg When I was testing locally, For the first time after successful deployment I got below screen. Is it expected to have no close or cancel button on success screen ?

Also after refresh I opened publish popup again I got below screen, here also we don't have no close or cancel button. Thanks.

hey @jitu5 yes it is expected, according to the design here

[Huongg]

@Huongg As we discuss we need to refactor or break down shareable-url-modal.js component as its getting bigger and difficult to read.

hey agree, I've done some refactoring by separating the components and simplifying its logic so we don't return null too much. Please take a look when you have time @rashidakanchwala @jitu5

[stephkaiser]

thanks @Huongg!

Design QA notes below:

• padding between modal title and 'Prerequisites' text should be 24px
• Text fixes - -- Prerequisite(s) is missing an 's' -- both Prerequisites and Disclaimer doesn't have the semicolon : -- both Prerequisites and Disclaimer subtitles have regular font weight, in white-0 colour (#FFFFFF 100%) -- Body text under Prerequisites and Disclaimer colour should be white-900 (#C6CACE 100%) -- 'Enter the required information' should be 'Please enter the required information below.' -- 'Hosting platform' empty state text has a different colour to the other two text inputs, it looks a little blue. Empty state text should be black-500 (#424242 100%) -- Text field labels (Hosting platform, Bucket name, Endpoint URL) should be in black-0 (#989898 100%) -- Republish text should be "Republish Kedro-Viz to push new updates, or publish and host Kedro-Viz with a new link."
• Dataset preview toggle text and toggle component is not aligned, text is slightly higher
• Endpoint URL (i) tooltip - position is too close to the (i) icon. Padding is too much on the top + bottom, and size is smaller
• Loading modal & Error modal - padding is too much above the title, should be 48px
• Copy link button - -- On hover state button turns white, and on click only the 'Copied!' tooltip appears above -- Currently, after clicking on the button the size and shape of the button changes, it should stay the same
• Multiple hosted link dropdown (next to link) - left side padding should be 20px
• Light Mode - dropdown menus should be white, they are currently grey

[Huongg]

Hey @stephkaiser thank you, I believed I have addressed all your design comments apart from the one that bolded, Im not sure which padding you mentioned here Multiple hosted link dropdown (next to link) - left side padding should be 20px

let me know if you spotted anything else

• [x] padding between modal title and 'Prerequisites' text should be 24px
• Text fixes -
• [x] -- Prerequisite(s) is missing an 's'
• [x] -- both Prerequisites and Disclaimer doesn't have the semicolon :
• [x] -- both Prerequisites and Disclaimer subtitles have regular font weight, in white-0 colour (#FFFFFF 100%)
• [x] -- Body text under Prerequisites and Disclaimer colour should be white-900 (#C6CACE 100%)
• [x] -- 'Enter the required information' should be 'Please enter the required information below.'
• [x] -- 'Hosting platform' empty state text has a different colour to the other two text inputs, it looks a little blue. Empty state text should be black-500 (#424242 100%)
• [x] -- Text field labels (Hosting platform, Bucket name, Endpoint URL) should be in black-0 (#989898 100%)
• [x] -- Republish text should be "Republish Kedro-Viz to push new updates, or publish and host Kedro-Viz with a new link."
• [x] Dataset preview toggle text and toggle component is not aligned, text is slightly higher (done, even though we turned it off for now so you might not be able to see it)
• [x] Endpoint URL (i) tooltip - position is too close to the (i) icon. Padding is too much on the top + bottom, and size is smaller
• [x] Loading modal & Error modal - padding is too much above the title, should be 48px
• [Copy link button -
• [x] -- On hover state button turns white, and on click only the 'Copied!' tooltip appears above
• [x] -- Currently, after clicking on the button the size and shape of the button changes, it should stay the same
• []Multiple hosted link dropdown (next to link) - left side padding should be 20px
• [x] Light Mode - dropdown menus should be white, they are currently grey

[stephkaiser]

Nice work! thank you very much @Huongg!

To clarify the one in bold - Multiple hosted link dropdown (next to link) - left side padding should be 20px - I was referring to this dropdown in the retrieving url modal, the left side padding of the dropdown should be 20px so that the text aligns with the text in the dropdown menu.

Also, the same dropdown menus in light mode have a black border, can we remove this please?

Thank you for fixing the "padding is too much above the title, should be 48px". Can we do the same for the right section (with the form) as well so that it is also aligned with the title? Also the title should always be in white-0 colour (#FFFFFF 100%) to match the subtitles.

And last one - would it be possible to move the 'or publish...' text to the next line so that it reads better? Implementation -

Design -

Thank you!

[jitu5]

@Huongg I see underline on hover republish button, is it expected ?

[stephkaiser]

@Huongg I see underline on hover republish button, is it expected ?

thanks @jitu5, the underline for the hover state on the button is fine thanks!

[Huongg]

thanks @stephkaiser I've just addressed the rest of your comment Step, Let me know if you're happy with all the design

[stephkaiser]

thanks @stephkaiser I've just addressed the rest of your comment Step, Let me know if you're happy with all the design

looks perfect, no more comments from me. Thank you so much Huong! 🙏

[ravi-kumar-pilla]

Hi @Huongg , Apologies for the delay in reviewing the PR. Most of the code looks good. I had a first pass and left few comments and questions. Please have a look. Thank you

[ravi-kumar-pilla]

Hi @Huongg , Thanks for addressing all the comments. There are some minor observations and I would like to know what the team thinks @stephkaiser @jitu5 -

1. When closing the modal of published view - It changes the form before closing the modal (minor thing but seems like something is changing on the screen)
2. When closing the modal of main content from published view - It changes the modal to publish view before closing (minor thing but seems like something is changing on the screen)

3. When I click on republish, the form data gets filled based on the selected provider, but if I change the dropdown source, even if the provider is in localStorage, the form is not populated.

   Let me know if you need more info. Thank you

[Huongg]

Hi @Huongg , Thanks for addressing all the comments. There are some minor observations and I would like to know what the team thinks @stephkaiser @jitu5 -

1. When closing the modal of published view - It changes the form before closing the modal (minor thing but seems like something is changing on the screen)
2. When closing the modal of main content from published view - It changes the modal to publish view before closing (minor thing but seems like something is changing on the screen)
3. When I click on republish, the form data gets filled based on the selected provider, but if I change the dropdown source, even if the provider is in localStorage, the form is not populated.

Let me know if you need more info. Thank you

hey so for point 1 and 2, it has been a behaviour of the form, if we think this is not right then we can create a separate issue for it. And for point 3, when you're in the form, it does not read from the localStorage anymore so when you change to a different platform, it wont be re-populated

[Huongg]

FYI: link to the bug report for @ravi-kumar-pilla's comment 1 and 2: https://github.com/kedro-org/kedro-viz/issues/1936