From 1bdd7ae5b0ea1ec2066de34bc5a85be383c8c615 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 24 Jan 2024 21:16:57 +0000
Subject: [PATCH 01/21] shareable viz with multiple platform UI

---
 src/components/metadata/metadata.js           |  33 ++--
 .../settings-modal/settings-modal.js          |  41 ++--
 .../shareable-url-modal.js                    | 177 +++++++++++-------
 .../shareable-url-modal.scss                  | 102 +++++++++-
 .../ui/dropdown/dropdown-renderer.js          |  12 +-
 src/components/ui/dropdown/dropdown.js        |   7 +
 src/components/ui/dropdown/dropdown.scss      |   8 +-
 src/components/ui/input/index.js              |   2 +-
 .../ui/menu-option/menu-option.scss           |   1 -
 src/components/ui/modal/modal.js              |   2 +-
 src/config.js                                 |  35 +---
 11 files changed, 281 insertions(+), 139 deletions(-)

diff --git a/src/components/metadata/metadata.js b/src/components/metadata/metadata.js
index 71f181c8bd..f2904b1c59 100644
--- a/src/components/metadata/metadata.js
+++ b/src/components/metadata/metadata.js
@@ -25,6 +25,7 @@ import {
 
 import './styles/metadata.scss';
 import MetaDataStats from './metadata-stats';
+import { isRunningLocally } from '../../utils';
 
 /**
  * Shows node meta data
@@ -291,21 +292,23 @@ const MetaData = ({
                   </button>
                 </>
               )}
-              {hasTrackingData && (
-                <button
-                  className="pipeline-metadata__link"
-                  onClick={
-                    isMetricsTrackingDataset
-                      ? toMetricsViewPath
-                      : toExperimentTrackingPath
-                  }
-                >
-                  <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
-                  <span className="pipeline-metadata__link-text">
-                    Open in Experiment Tracking
-                  </span>
-                </button>
-              )}
+              {isRunningLocally()
+                ? hasTrackingData && (
+                    <button
+                      className="pipeline-metadata__link"
+                      onClick={
+                        isMetricsTrackingDataset
+                          ? toMetricsViewPath
+                          : toExperimentTrackingPath
+                      }
+                    >
+                      <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
+                      <span className="pipeline-metadata__link-text">
+                        Open in Experiment Tracking
+                      </span>
+                    </button>
+                  )
+                : null}
               {hasPreviewData && (
                 <>
                   <div className="pipeline-metadata__preview">
diff --git a/src/components/settings-modal/settings-modal.js b/src/components/settings-modal/settings-modal.js
index 181b999c0d..e0bffc5b70 100644
--- a/src/components/settings-modal/settings-modal.js
+++ b/src/components/settings-modal/settings-modal.js
@@ -16,6 +16,7 @@ import Button from '../ui/button';
 import Modal from '../ui/modal';
 
 import './settings-modal.scss';
+import { isRunningLocally } from '../../utils';
 
 /**
  * Modal to allow users to change the flag settings
@@ -157,25 +158,27 @@ const SettingsModal = ({
                 toggleValue={toggleFlags[value]}
               />
             ))}
-            {isOutdated ? (
-              <div className="pipeline-settings-modal__upgrade-reminder">
-                <span>&#8226; Kedro-Viz {latestVersion} is here! </span>
-                <a
-                  href="https://github.com/kedro-org/kedro-viz/releases"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  View release notes
-                </a>
-              </div>
-            ) : (
-              <div className="pipeline-settings-modal__already-latest">
-                <span>
-                  &#8226; You are on the latest version of Kedro-Viz (
-                  {latestVersion})
-                </span>
-              </div>
-            )}
+            {isRunningLocally() ? (
+              isOutdated ? (
+                <div className="pipeline-settings-modal__upgrade-reminder">
+                  <span>&#8226; Kedro-Viz {latestVersion} is here! </span>
+                  <a
+                    href="https://github.com/kedro-org/kedro-viz/releases"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    View release notes
+                  </a>
+                </div>
+              ) : (
+                <div className="pipeline-settings-modal__already-latest">
+                  <span>
+                    &#8226; You are on the latest version of Kedro-Viz (
+                    {latestVersion})
+                  </span>
+                </div>
+              )
+            ) : null}
           </div>
           <div className="run-details-modal-button-wrapper">
             <Button
diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index 312dd10ff5..e5184dfdae 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { toggleShareableUrlModal } from '../../actions';
-import { s3BucketRegions } from '../../config';
+import { hostingPlatform } from '../../config';
 
 import Button from '../ui/button';
 import CopyIcon from '../icons/copy';
@@ -18,8 +18,6 @@ import './shareable-url-modal.scss';
 
 const modalMessages = (status, info = '') => {
   const messages = {
-    default:
-      'Prerequisite: Deploying and sharing Kedro-Viz requires AWS access keys. To use this feature, please add your AWS access keys as environment variables in your project.',
     failure: 'Something went wrong. Please try again later.',
     loading: 'Shooting your files through space. Sit tight...',
     success:
@@ -36,7 +34,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const [isFormDirty, setIsFormDirty] = useState({
     /* eslint-disable camelcase */
     bucket_name: false,
-    region: false,
+    platform: false,
+    endpoint: false,
   });
   const [isLoading, setIsLoading] = useState(false);
   const [responseUrl, setResponseUrl] = useState(null);
@@ -103,7 +102,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
         setDeploymentState('success');
       } else {
         setResponseUrl(null);
-        setResponseError(response.message);
+        setResponseError(response.message || 'Error occurred!');
         setDeploymentState('failure');
       }
     } catch (error) {
@@ -125,7 +124,9 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
 
   const handleModalClose = () => {
     onToggleModal(false);
-    setDeploymentState('default');
+    if (deploymentState !== 'incompatible') {
+      setDeploymentState('default');
+    }
     setResponseError(null);
     setIsLoading(false);
     setResponseUrl(null);
@@ -133,75 +134,123 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     setInputValues({});
     setIsFormDirty({
       bucket_name: false,
-      region: false,
+      platform: false,
+      endpoint: false,
     }); /* eslint-disable camelcase */
   };
 
+  const getModalHeading = (type) => {
+    if (type === 'title' && deploymentState !== 'default') {
+      if (deploymentState === 'success') {
+        return 'Kedro-Viz Published and Hosted';
+      } else {
+        return 'Publish and Share Kedro-Viz';
+      }
+    } else {
+      if (deploymentState !== 'default') {
+        return modalMessages(
+          deploymentState,
+          compatibilityData.package_version
+        );
+      }
+
+      return null;
+    }
+  };
+
   return (
     <Modal
-      className="shareable-url-modal"
+      className={classnames('shareable-url-modal', {
+        'shareable-url-modal__non-default-wrapper':
+          deploymentState !== 'default',
+      })}
       closeModal={handleModalClose}
-      message={modalMessages(
-        deploymentState,
-        compatibilityData.package_version
-      )}
-      title={
-        deploymentState === 'success'
-          ? 'Kedro-Viz Published and Hosted'
-          : 'Publish and Share Kedro-Viz'
-      }
+      message={getModalHeading('message')}
+      title={getModalHeading('title')}
       visible={visible.shareableUrlModal}
     >
       {!isLoading && !responseUrl && canUseShareableUrls && !responseError ? (
         <>
-          <div className="modal__description">
-            Enter your AWS information below and a hosted link will be
-            generated. View the{' '}
-            <a
-              className="link"
-              href="https://docs.kedro.org/en/latest/visualisation/share_kedro_viz.html"
-              rel="noreferrer"
-              target="_blank"
-            >
-              docs
-            </a>{' '}
-            for more information.
-          </div>
-          <div className="shareable-url-modal__input-wrapper">
-            <div className="shareable-url-modal__input-label">
-              AWS Bucket Region
+          <div className="shareable-url-modal__content-form-wrapper">
+            <div className="shareable-url-modal__content-wrapper">
+              <div className="shareable-url-modal__content-title">
+                Publish and Share Kedro-Viz
+              </div>
+              <p className="shareable-url-modal__content-description">
+                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{' '}
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://docs.kedro.org/projects/kedro-viz/en/latest/share_kedro_viz.html"
+                >
+                  docs
+                </a>
+                .<br />
+                <br />
+                <br />
+                Enter the required information and a hosted link will be
+                generated.
+              </p>
+            </div>
+            <div className="shareable-url-modal__form-wrapper">
+              <div className="shareable-url-modal__input-wrapper">
+                <div className="shareable-url-modal__input-label">
+                  Hosting platform
+                </div>
+                <Dropdown
+                  defaultText={inputValues?.platform}
+                  placeholderText={
+                    !inputValues?.platform ? 'Select a hosting platform' : null
+                  }
+                  onChanged={(selectedPlatform) => {
+                    onChange('platform', selectedPlatform.value);
+                  }}
+                  width={null}
+                >
+                  {hostingPlatform.map((platform) => {
+                    return (
+                      <MenuOption
+                        className={classnames({
+                          'pipeline-list__option--active':
+                            inputValues.platform === platform.value,
+                        })}
+                        key={platform.value}
+                        primaryText={platform.label}
+                        value={platform.label}
+                      />
+                    );
+                  })}
+                </Dropdown>
+              </div>
+              <div className="shareable-url-modal__input-wrapper">
+                <div className="shareable-url-modal__input-label">
+                  Bucket Name
+                </div>
+                <Input
+                  defaultValue={inputValues.bucket_name}
+                  onChange={(value) => onChange('bucket_name', value)}
+                  placeholder="Enter name"
+                  resetValueTrigger={visible}
+                  size="small"
+                />
+              </div>
+              <div className="shareable-url-modal__input-wrapper">
+                <div className="shareable-url-modal__input-label">
+                  Endpoint Link
+                </div>
+                <Input
+                  defaultValue={inputValues.endpoint}
+                  onChange={(value) => onChange('endpoint', value)}
+                  placeholder="Enter url"
+                  resetValueTrigger={visible}
+                  size="small"
+                />
+              </div>
             </div>
-            <Dropdown
-              defaultText={inputValues?.region || 'Select a region'}
-              onChanged={(selectedRegion) => {
-                onChange('region', selectedRegion.value);
-              }}
-              width={null}
-            >
-              {s3BucketRegions.map((region) => {
-                return (
-                  <MenuOption
-                    className={classnames({
-                      'pipeline-list__option--active':
-                        inputValues.region === region,
-                    })}
-                    key={region}
-                    primaryText={region}
-                    value={region}
-                  />
-                );
-              })}
-            </Dropdown>
-          </div>
-          <div className="shareable-url-modal__input-wrapper">
-            <div className="shareable-url-modal__input-label">Bucket Name</div>
-            <Input
-              defaultValue={inputValues.bucket_name}
-              onChange={(value) => onChange('bucket_name', value)}
-              placeholder="my-bucket-name"
-              resetValueTrigger={visible}
-              size="large"
-            />
           </div>
           <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
             <Button
diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss
index 4dd47fbfa6..66a3e529df 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.scss
+++ b/src/components/shareable-url-modal/shareable-url-modal.scss
@@ -3,21 +3,35 @@
 .kui-theme--light {
   --color-description-text: #{variables.$black-300};
   --color-deployed-link: #{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};
+  --input-bg: #{variables.$white-100};
+  --input-shadow: #{variables.$white-800};
 }
 
 .kui-theme--dark {
   --color-description-text: #{variables.$white-900};
   --color-deployed-link: #{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};
+  --input-bg: #{variables.$slate-700};
+  --input-shadow: #{variables.$slate-900};
 }
 
 .shareable-url-modal {
   .modal__content {
-    max-width: 640px;
+    max-width: 790px;
   }
 
   .modal__wrapper {
     align-items: flex-start;
-    padding: 48px;
+    padding: 0;
     text-align: left;
   }
 
@@ -37,20 +51,88 @@
     }
   }
 
+  &__non-default-wrapper {
+    .modal__wrapper {
+      padding: 48px;
+    }
+
+    .modal__content {
+      max-width: 640px;
+    }
+
+    .shareable-url-modal__button-wrapper {
+      background: none;
+      border: 0;
+      padding: 0;
+    }
+  }
+
+  &__content-form-wrapper {
+    display: flex;
+  }
+
+  &__content-title {
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+    padding-bottom: 24px;
+  }
+
+  &__content-description {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    margin: 0;
+
+    a {
+      color: var(--color-text-doc-link);
+    }
+  }
+
+  &__content-wrapper {
+    padding: 48px;
+    background: var(--color-modal-bg-2);
+    box-shadow: 0 0 16px 0 rgb(0 0 0 / 10%);
+  }
+
+  &__form-wrapper {
+    padding: 48px;
+    background: var(--color-modal-bg-1);
+    box-shadow: inset 0 0 16px 0 rgb(0 0 0 / 10%);
+  }
+
   &__input-wrapper {
     margin-bottom: 32px;
     width: 100%;
 
     .dropdown {
-      width: 240px;
+      width: 264px;
+    }
+
+    .input {
+      padding: 8px 12px;
+      background: var(--input-bg);
+      line-height: 20px;
+      height: auto;
+      white-space: nowrap;
+      box-shadow: 0 1px 1px 0 var(--input-shadow);
+
+      &:focus-visible {
+        outline: none;
+        text-decoration: none;
+        border: 1px solid variables.$blue-300;
+      }
     }
   }
 
   &__input-label {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 400;
     line-height: 20px;
     margin-bottom: 12px;
+    color: var(--color-form-label);
   }
 
   &__button-wrapper {
@@ -58,6 +140,9 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
+    padding: 20px 48px;
+    background: var(--color-modal-bg-1);
+    border-top: 1px solid var(--color-footer-border);
 
     &--right {
       justify-content: flex-end;
@@ -164,6 +249,15 @@
     position: relative;
     margin: 0 12px 0 16px;
   }
+
+  .dropdown__label {
+    background: var(--input-bg);
+  }
+
+  .dropdown__label span,
+  .menu-option__content {
+    font-size: 14px;
+  }
 }
 
 .shareable-url-timestamp {
diff --git a/src/components/ui/dropdown/dropdown-renderer.js b/src/components/ui/dropdown/dropdown-renderer.js
index a6b5e17dd0..423e70afc0 100644
--- a/src/components/ui/dropdown/dropdown-renderer.js
+++ b/src/components/ui/dropdown/dropdown-renderer.js
@@ -26,6 +26,7 @@ const DropdownRenderer = ({
   showCancelApplyBtns,
   title,
   width,
+  placeholderText,
 }) => {
   const wrapperClasses = classnames('kedro', 'dropdown', {
     'dropdown--open': open,
@@ -135,7 +136,11 @@ const DropdownRenderer = ({
         className="dropdown__label"
         onClick={onLabelClicked}
       >
-        <span>{selectedOption.label || defaultText}</span>
+        {placeholderText ? (
+          <span className="dropdown__placeholder">{placeholderText}</span>
+        ) : (
+          <span>{selectedOption.label || defaultText}</span>
+        )}
         <span className="dropdown__icon">
           <DropdownArrow />
         </span>
@@ -178,6 +183,7 @@ DropdownRenderer.defaultProps = {
   selectedOption: null,
   title: null,
   width: 160,
+  placeholderText: null,
 };
 
 DropdownRenderer.propTypes = {
@@ -247,6 +253,10 @@ DropdownRenderer.propTypes = {
    * The width for the component. Both the label and options are the same width
    */
   width: PropTypes.number,
+  /**
+   * Placeholder text when value from dropdown is not selected
+   */
+  placeholderText: PropTypes.string,
 };
 
 export default DropdownRenderer;
diff --git a/src/components/ui/dropdown/dropdown.js b/src/components/ui/dropdown/dropdown.js
index c046bef3d0..ed81f91f75 100644
--- a/src/components/ui/dropdown/dropdown.js
+++ b/src/components/ui/dropdown/dropdown.js
@@ -21,6 +21,7 @@ const Dropdown = (props) => {
     onOpened,
     showCancelApplyBtns,
     width,
+    placeholderText,
   } = props;
 
   /**
@@ -310,6 +311,7 @@ const Dropdown = (props) => {
       focusedOption={focusedOption}
       handleRef={_handleRef}
       haveSelectedValues={haveSelectedValues}
+      placeholderText={placeholderText}
       onApplyAndClose={() => {
         setOpen(false);
         onApplyAndClose();
@@ -340,6 +342,7 @@ Dropdown.defaultProps = {
   onClosed: null,
   onOpened: null,
   width: 160,
+  placeholderText: null,
 };
 
 Dropdown.propTypes = {
@@ -383,6 +386,10 @@ Dropdown.propTypes = {
    * The width for the component. Both the label and options are the same width
    */
   width: PropTypes.number,
+  /**
+   * Placeholder text when value from dropdown is not selected
+   */
+  placeholderText: PropTypes.string,
 };
 
 export default Dropdown;
diff --git a/src/components/ui/dropdown/dropdown.scss b/src/components/ui/dropdown/dropdown.scss
index ccaf6e233b..9942ec0d5f 100644
--- a/src/components/ui/dropdown/dropdown.scss
+++ b/src/components/ui/dropdown/dropdown.scss
@@ -6,7 +6,7 @@
 $menu-max-height: 300px;
 
 /* the height of each item/row */
-$menu-item-height: 40px;
+$menu-item-height: 36px;
 
 /* padding at the top and bottom of each group of items */
 $menu-group-padding: 4px;
@@ -83,6 +83,10 @@ $menu-item-padding: 12px;
     }
   }
 
+  .dropdown__placeholder {
+    color: #{variables.$grey-700};
+  }
+
   .dropdown__icon {
     height: 24px;
     margin: 0 8px 0 12px;
@@ -112,7 +116,7 @@ $menu-item-padding: 12px;
   width: 100%;
   max-height: $menu-max-height;
   overflow: auto;
-  margin: 0;
+  margin-top: 1px;
   transition: opacity ease 0.2s, transform ease 0.2s, visibility ease 0.2s;
   transform: translateY(-10px);
   opacity: 0;
diff --git a/src/components/ui/input/index.js b/src/components/ui/input/index.js
index 49ad9b58e7..ed11374b85 100644
--- a/src/components/ui/input/index.js
+++ b/src/components/ui/input/index.js
@@ -47,7 +47,7 @@ const Input = ({
 
   return (
     <>
-      <textarea
+      <input
         className={`input input--${size}`}
         onChange={handleChange}
         placeholder={placeholder}
diff --git a/src/components/ui/menu-option/menu-option.scss b/src/components/ui/menu-option/menu-option.scss
index 7393070e26..16587c599a 100644
--- a/src/components/ui/menu-option/menu-option.scss
+++ b/src/components/ui/menu-option/menu-option.scss
@@ -19,7 +19,6 @@ $menu-item-height: 40px;
 
 .menu-option {
   align-items: center;
-  border-bottom: 1px solid var(--menu-option-divider);
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
diff --git a/src/components/ui/modal/modal.js b/src/components/ui/modal/modal.js
index 5293984f1c..0572f2882a 100644
--- a/src/components/ui/modal/modal.js
+++ b/src/components/ui/modal/modal.js
@@ -45,7 +45,7 @@ const Modal = ({
         })}
       >
         <div className="modal__wrapper">
-          <div className="modal__title">{title}</div>
+          {title && <div className="modal__title">{title}</div>}
           {message && <div className="modal__description">{message}</div>}
           {children}
         </div>
diff --git a/src/config.js b/src/config.js
index 0dcd774430..409714e704 100644
--- a/src/config.js
+++ b/src/config.js
@@ -152,37 +152,10 @@ export const datasetStatLabels = ['rows', 'columns', 'file_size'];
 
 export const statsRowLen = 33;
 
-export const s3BucketRegions = [
-  'us-east-2',
-  'us-east-1',
-  'us-west-1',
-  'us-west-2',
-  'af-south-1',
-  'ap-east-1',
-  'ap-south-2',
-  'ap-southeast-3',
-  'ap-southeast-4',
-  'ap-south-1',
-  'ap-northeast-3',
-  'ap-northeast-2',
-  'ap-southeast-1',
-  'ap-southeast-2',
-  'ap-northeast-1',
-  'ca-central-1',
-  'cn-north-1',
-  'cn-northwest-1',
-  'eu-central-1',
-  'eu-west-1',
-  'eu-west-2',
-  'eu-south-1',
-  'eu-west-3',
-  'eu-north-1',
-  'eu-south-2',
-  'eu-central-2',
-  'sa-east-1',
-  'me-south-1',
-  'me-central-1',
-  'il-central-1',
+export const hostingPlatform = [
+  { label: 'Amazon Web Services', value: 'aws' },
+  { label: 'Google Cloud', value: 'gs' },
+  { label: 'Microsoft Azure', value: 'az' },
 ];
 
 export const RUN_TITLE = 'title';

From bfb8a661e5452dea87f67fef2327904f51fbfd6a Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 25 Jan 2024 15:02:22 +0000
Subject: [PATCH 02/21] test fix

---
 .../shareable-url-modal.js                    | 29 ++++++++++---------
 .../shareable-url-modal.test.js               |  2 +-
 src/components/ui/input/input.test.js         |  2 +-
 src/config.js                                 | 10 +++----
 4 files changed, 22 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 e5184dfdae..31806e0d5a 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -202,7 +202,10 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Hosting platform
                 </div>
                 <Dropdown
-                  defaultText={inputValues?.platform}
+                  defaultText={
+                    inputValues?.platform &&
+                    hostingPlatform[inputValues?.platform]
+                  }
                   placeholderText={
                     !inputValues?.platform ? 'Select a hosting platform' : null
                   }
@@ -211,19 +214,17 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   }}
                   width={null}
                 >
-                  {hostingPlatform.map((platform) => {
-                    return (
-                      <MenuOption
-                        className={classnames({
-                          'pipeline-list__option--active':
-                            inputValues.platform === platform.value,
-                        })}
-                        key={platform.value}
-                        primaryText={platform.label}
-                        value={platform.label}
-                      />
-                    );
-                  })}
+                  {Object.entries(hostingPlatform).map(([value, label]) => (
+                    <MenuOption
+                      className={classnames({
+                        'pipeline-list__option--active':
+                          inputValues.platform === value,
+                      })}
+                      key={value}
+                      primaryText={label}
+                      value={value}
+                    />
+                  ))}
                 </Dropdown>
               </div>
               <div className="shareable-url-modal__input-wrapper">
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 7df3d32a3e..c4f9f163b4 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.test.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.test.js
@@ -5,6 +5,6 @@ import { setup } from '../../utils/state.mock';
 describe('ShareableUrlModal', () => {
   it('renders without crashing', () => {
     const wrapper = setup.mount(<ShareableUrlModal />);
-    expect(wrapper.find('.shareable-url-modal__input-wrapper').length).toBe(2);
+    expect(wrapper.find('.shareable-url-modal__input-wrapper').length).toBe(3);
   });
 });
diff --git a/src/components/ui/input/input.test.js b/src/components/ui/input/input.test.js
index b646dc0054..c16db6c8a4 100644
--- a/src/components/ui/input/input.test.js
+++ b/src/components/ui/input/input.test.js
@@ -20,7 +20,7 @@ describe('Input', () => {
 
   it('renders with a default text value', () => {
     const wrapper = mount(<Input defaultValue="Default!" />);
-    const defaultInputValue = wrapper.find('textarea').prop('value');
+    const defaultInputValue = wrapper.find('input').prop('value');
 
     expect(wrapper.props().defaultValue).toEqual(defaultInputValue);
   });
diff --git a/src/config.js b/src/config.js
index 409714e704..712bf8d188 100644
--- a/src/config.js
+++ b/src/config.js
@@ -152,11 +152,11 @@ export const datasetStatLabels = ['rows', 'columns', 'file_size'];
 
 export const statsRowLen = 33;
 
-export const hostingPlatform = [
-  { label: 'Amazon Web Services', value: 'aws' },
-  { label: 'Google Cloud', value: 'gs' },
-  { label: 'Microsoft Azure', value: 'az' },
-];
+export const hostingPlatform = {
+  aws: 'Amazon Web Services',
+  gcp: 'Google Cloud',
+  azure: 'Microsoft Azure',
+};
 
 export const RUN_TITLE = 'title';
 export const RUN_NOTES = 'notes';

From ecbcdbb72d3e06c21128c96b14a008dda635898e Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 25 Jan 2024 18:09:56 +0000
Subject: [PATCH 03/21] Relative path fix for user entered url

---
 .../shareable-url-modal/shareable-url-modal.js        | 11 ++++++++++-
 1 file changed, 10 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 31806e0d5a..ea2db3fd3a 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -158,6 +158,15 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     }
   };
 
+  const handleResponseUrl = () => {
+    // If the URL does not start with http:// or https://, append http:// to avoid relative path issue
+    if (!/^https?:\/\//.test(responseUrl)) {
+      const url = 'http://' + responseUrl;
+      return url;
+    }
+    return responseUrl;
+  };
+
   return (
     <Modal
       className={classnames('shareable-url-modal', {
@@ -300,7 +309,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
             <div className="shareable-url-modal__url-wrapper">
               <a
                 className="shareable-url-modal__result-url"
-                href={responseUrl}
+                href={handleResponseUrl()}
                 target="_blank"
                 rel="noopener noreferrer"
               >

From 8b49f523665994040613e9d45cc5d0b9881f114a Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Fri, 26 Jan 2024 20:27:23 +0000
Subject: [PATCH 04/21] Test updated

---
 .../fixtures/mock/deploySuccessResponse.json  |  4 +-
 .../tests/ui/flowchart/shareable-urls.cy.js   | 47 ++++++++++++-------
 .../run-details-modal/run-details-modal.js    |  2 +
 .../shareable-url-modal.js                    |  4 ++
 src/components/ui/input/index.js              | 24 ++++++++--
 5 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/cypress/fixtures/mock/deploySuccessResponse.json b/cypress/fixtures/mock/deploySuccessResponse.json
index 9824d965c4..d41835f5e4 100644
--- a/cypress/fixtures/mock/deploySuccessResponse.json
+++ b/cypress/fixtures/mock/deploySuccessResponse.json
@@ -1,4 +1,4 @@
 {
-  "message": "Website deployed on S3",
-  "url": "http://myBucketName.s3-website.us-east-1.amazonaws.com"
+  "message": "Website deployed on AWS",
+  "url": "http://www.example.com"
 }
\ No newline at end of file
diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js
index 837fd96cf1..7fbeac546e 100644
--- a/cypress/tests/ui/flowchart/shareable-urls.cy.js
+++ b/cypress/tests/ui/flowchart/shareable-urls.cy.js
@@ -49,8 +49,8 @@ describe('Shareable URLs', () => {
     );
   });
 
-  it('verifies that users can click on region dropdown and see all region options #TC-55', () => {
-    const regionCount = 30;
+  it('verifies that users can click on platform dropdown and see all platform options #TC-55', () => {
+    const platformCount = 3;
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
@@ -59,12 +59,12 @@ describe('Shareable URLs', () => {
     // Assert after action
     cy.get('.shareable-url-modal .menu-option').should(
       'have.length',
-      regionCount
+      platformCount
     );
   });
 
-  it('verifies that publish button should be disabled when region is not selected and bucket name is empty #TC-56', () => {
-    const selectedRegion = 'Select a region';
+  it('verifies that publish button should be disabled when platform is not selected and bucket name & endpoint name are empty #TC-56', () => {
+    const selectedPlatform = 'Select a hosting platform';
     const primaryButtonNodeText = 'Publish';
 
     // Action
@@ -73,14 +73,14 @@ describe('Shareable URLs', () => {
     // Assert after action
     cy.get(
       '.shareable-url-modal [data-test=kedro-pipeline-selector] .dropdown__label span'
-    ).contains(selectedRegion);
-    cy.get('.shareable-url-modal textarea').should('have.value', '');
+    ).contains(selectedPlatform);
+    cy.get('.shareable-url-modal input').should('have.value', '');
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .should('be.disabled');
   });
 
-  it('verifies that publish button should be disabled when a bucket region is selected and bucket name is empty #TC-57', () => {
+  it('verifies that publish button should be disabled when a platform is selected and bucket name is empty #TC-57', () => {
     const primaryButtonNodeText = 'Publish';
 
     // Action
@@ -91,13 +91,14 @@ describe('Shareable URLs', () => {
       .click();
 
     // Assert after action
-    cy.get('.shareable-url-modal textarea').should('have.value', '');
+    cy.get('.shareable-url-modal input').should('have.value', '');
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .should('be.disabled');
   });
 
-  it('verifies that publish button should be enabled when region is selected and bucket name is not empty #TC-58', () => {
+  it('verifies that publish button should be enabled when platform is selected and bucket name & endpoint name are not empty #TC-58', () => {
+    const endpointName = 'http://www.example.com';
     const bucketName = 'myBucketName';
     const primaryButtonNodeText = 'Publish';
 
@@ -107,7 +108,10 @@ describe('Shareable URLs', () => {
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
       .click();
-    cy.get('.shareable-url-modal textarea').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
 
     // Assert after action
     cy.get('.shareable-url-modal__button-wrapper button')
@@ -116,17 +120,19 @@ describe('Shareable URLs', () => {
   });
 
   it('verifies that error message appears with wrong inputs on publish button click #TC-59', () => {
+    const endpointName = 'http://www.example.com';
     const bucketName = 'myBucketName';
     const primaryButtonNodeText = 'Publish';
-    const errorButtonNodeText = 'Go back';
-
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
       .click();
-    cy.get('.shareable-url-modal textarea').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .click();
@@ -135,11 +141,11 @@ describe('Shareable URLs', () => {
     cy.get('.shareable-url-modal .modal__wrapper').contains(
       'Something went wrong. Please try again later.'
     );
-    cy.get('.shareable-url-modal__error button').contains(errorButtonNodeText);
   });
 
   it('verifies that AWS link is generated with correct inputs on publish button click #TC-60', () => {
     const bucketName = 'myBucketName';
+    const endpointName = 'http://www.example.com';
     const primaryButtonNodeText = 'Publish';
 
     // Intercept the network request to mock with a fixture
@@ -156,7 +162,10 @@ describe('Shareable URLs', () => {
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
       .click();
-    cy.get('.shareable-url-modal textarea').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .click();
@@ -172,6 +181,7 @@ describe('Shareable URLs', () => {
 
   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';
     const primaryButtonNodeTextVariant = 'Republish';
     const secondaryButtonNodeText = 'Link Settings';
@@ -190,7 +200,10 @@ describe('Shareable URLs', () => {
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
       .click();
-    cy.get('.shareable-url-modal textarea').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .click();
diff --git a/src/components/experiment-tracking/run-details-modal/run-details-modal.js b/src/components/experiment-tracking/run-details-modal/run-details-modal.js
index 65d49fe2d7..5c3d723e80 100644
--- a/src/components/experiment-tracking/run-details-modal/run-details-modal.js
+++ b/src/components/experiment-tracking/run-details-modal/run-details-modal.js
@@ -87,6 +87,7 @@ const RunDetailsModal = ({
             defaultValue={valuesToUpdate.title}
             onChange={(value) => onChange('title', value)}
             resetValueTrigger={visible}
+            type="textarea"
             size="large"
           />
         </div>
@@ -100,6 +101,7 @@ const RunDetailsModal = ({
             onChange={(value) => onChange('notes', value)}
             placeholder="Add here"
             resetValueTrigger={visible}
+            type="textarea"
             size="small"
           />
         </div>
diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index ea2db3fd3a..1575ca9b50 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -246,6 +246,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   placeholder="Enter name"
                   resetValueTrigger={visible}
                   size="small"
+                  type="input"
+                  dataTest={'bucket_name'}
                 />
               </div>
               <div className="shareable-url-modal__input-wrapper">
@@ -258,6 +260,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   placeholder="Enter url"
                   resetValueTrigger={visible}
                   size="small"
+                  type="input"
+                  dataTest={'endpoint_name'}
                 />
               </div>
             </div>
diff --git a/src/components/ui/input/index.js b/src/components/ui/input/index.js
index ed11374b85..752d0fd035 100644
--- a/src/components/ui/input/index.js
+++ b/src/components/ui/input/index.js
@@ -11,6 +11,8 @@ const Input = ({
   placeholder,
   resetValueTrigger,
   size = 'large',
+  dataTest,
+  type,
 }) => {
   const isLimitSet = characterLimit > 0;
   const ref = useRef(null);
@@ -45,16 +47,32 @@ const Input = ({
     }
   };
 
-  return (
-    <>
-      <input
+  const inputElement =
+    type === 'textarea' ? (
+      <textarea
         className={`input input--${size}`}
         onChange={handleChange}
         placeholder={placeholder}
         ref={ref}
         rows={1}
         value={value}
+        data-test={dataTest}
       />
+    ) : (
+      <input
+        type={type}
+        className={`input input--${size}`}
+        onChange={handleChange}
+        placeholder={placeholder}
+        ref={ref}
+        value={value}
+        data-test={dataTest}
+      />
+    );
+
+  return (
+    <>
+      {inputElement}
       {isLimitSet ? (
         <div className="input-character-count">
           <span>

From 11768e548c8047a98b2b45ae2712cb4eee1bdab0 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Fri, 26 Jan 2024 20:37:36 +0000
Subject: [PATCH 05/21] Test updated

---
 src/components/ui/input/input.test.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/input/input.test.js b/src/components/ui/input/input.test.js
index c16db6c8a4..27c783c5a1 100644
--- a/src/components/ui/input/input.test.js
+++ b/src/components/ui/input/input.test.js
@@ -18,8 +18,15 @@ describe('Input', () => {
     expect(wrapper.find('.input-character-count').length).toBe(1);
   });
 
-  it('renders with a default text value', () => {
-    const wrapper = mount(<Input defaultValue="Default!" />);
+  it('renders with a default text value with type textarea', () => {
+    const wrapper = mount(<Input type="textarea" defaultValue="Default!" />);
+    const defaultInputValue = wrapper.find('textarea').prop('value');
+
+    expect(wrapper.props().defaultValue).toEqual(defaultInputValue);
+  });
+
+  it('renders with a default text value with type input', () => {
+    const wrapper = mount(<Input type="input" defaultValue="Default!" />);
     const defaultInputValue = wrapper.find('input').prop('value');
 
     expect(wrapper.props().defaultValue).toEqual(defaultInputValue);

From 1b0c5d379e5c2764398d30a5d52a5fb05a805147 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Tue, 20 Feb 2024 14:26:47 +0000
Subject: [PATCH 06/21] UI alignment and endpoint help text added.

Signed-off-by: <>
---
 .../shareable-url-modal/shareable-url-modal.js     | 14 ++++++++++++++
 .../shareable-url-modal/shareable-url-modal.scss   |  9 +++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index 1575ca9b50..e44e9d7141 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -203,6 +203,20 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                 <br />
                 Enter the required information and a hosted link will be
                 generated.
+                <br />
+                <br />
+              </p>
+              <p className="shareable-url-modal__content-description shareable-url-modal__content-note">
+                Find out how to obtain the endpoint link for the selected
+                platform,{' '}
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://docs.kedro.org/projects/kedro-viz/en/latest/share_kedro_viz.html#publish-and-share-kedro-viz-automatically"
+                >
+                  here
+                </a>
+                .
               </p>
             </div>
             <div className="shareable-url-modal__form-wrapper">
diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss
index 66a3e529df..ee1f291830 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.scss
+++ b/src/components/shareable-url-modal/shareable-url-modal.scss
@@ -91,6 +91,14 @@
     }
   }
 
+  &__content-note {
+    color: var(--color-form-label);
+
+    a {
+      color: var(--color-form-label);
+    }
+  }
+
   &__content-wrapper {
     padding: 48px;
     background: var(--color-modal-bg-2);
@@ -252,6 +260,7 @@
 
   .dropdown__label {
     background: var(--input-bg);
+    padding: 0 0 0 12px;
   }
 
   .dropdown__label span,

From 5f349ada5c0d96d3eceffa733ccfc53576e66599 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Tue, 20 Feb 2024 18:40:30 +0000
Subject: [PATCH 07/21] Add Kedro-Viz documentation URLs and update modal
 content

Signed-off-by: <>
---
 .../shareable-url-modal.js                    | 62 +++++++++----------
 .../shareable-url-modal.scss                  |  5 ++
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index e44e9d7141..645dd0c25d 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -28,6 +28,10 @@ const modalMessages = (status, info = '') => {
   return messages[status];
 };
 
+const KEDRO_VIZ_DOCS_URL =
+  'https://docs.kedro.org/projects/kedro-viz/en/latest/share_kedro_viz.html';
+const KEDRO_VIZ_PUBLISH_URL = `${KEDRO_VIZ_DOCS_URL}#publish-and-share-kedro-viz-automatically`;
+
 const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const [deploymentState, setDeploymentState] = useState('default');
   const [inputValues, setInputValues] = useState({});
@@ -139,23 +143,23 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     }); /* eslint-disable camelcase */
   };
 
+  /**
+   * Returns the modal heading based on the given type and deployment state.
+   * @param {string} type - The type of the modal heading.
+   * @returns {string|null} The modal heading text or null if deployment state is 'default'.
+   */
   const getModalHeading = (type) => {
-    if (type === 'title' && deploymentState !== 'default') {
-      if (deploymentState === 'success') {
-        return 'Kedro-Viz Published and Hosted';
-      } else {
-        return 'Publish and Share Kedro-Viz';
-      }
-    } else {
-      if (deploymentState !== 'default') {
-        return modalMessages(
-          deploymentState,
-          compatibilityData.package_version
-        );
-      }
-
+    if (deploymentState === 'default') {
       return null;
     }
+
+    if (type === 'title') {
+      return deploymentState === 'success'
+        ? 'Kedro-Viz Published and Hosted'
+        : 'Publish and Share Kedro-Viz';
+    }
+
+    return modalMessages(deploymentState, compatibilityData.package_version);
   };
 
   const handleResponseUrl = () => {
@@ -167,6 +171,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     return responseUrl;
   };
 
+  const { platform, bucket_name, endpoint } = inputValues || {};
+
   return (
     <Modal
       className={classnames('shareable-url-modal', {
@@ -185,7 +191,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
               <div className="shareable-url-modal__content-title">
                 Publish and Share Kedro-Viz
               </div>
-              <p className="shareable-url-modal__content-description">
+              <p className="shareable-url-modal__content-description shareable-url-modal__paregraph-divider">
                 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
@@ -194,17 +200,15 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                 <a
                   target="_blank"
                   rel="noopener noreferrer"
-                  href="https://docs.kedro.org/projects/kedro-viz/en/latest/share_kedro_viz.html"
+                  href={KEDRO_VIZ_DOCS_URL}
                 >
                   docs
                 </a>
-                .<br />
-                <br />
-                <br />
+                .
+              </p>
+              <p className="shareable-url-modal__content-description">
                 Enter the required information and a hosted link will be
                 generated.
-                <br />
-                <br />
               </p>
               <p className="shareable-url-modal__content-description shareable-url-modal__content-note">
                 Find out how to obtain the endpoint link for the selected
@@ -212,7 +216,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                 <a
                   target="_blank"
                   rel="noopener noreferrer"
-                  href="https://docs.kedro.org/projects/kedro-viz/en/latest/share_kedro_viz.html#publish-and-share-kedro-viz-automatically"
+                  href={KEDRO_VIZ_PUBLISH_URL}
                 >
                   here
                 </a>
@@ -225,12 +229,9 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Hosting platform
                 </div>
                 <Dropdown
-                  defaultText={
-                    inputValues?.platform &&
-                    hostingPlatform[inputValues?.platform]
-                  }
+                  defaultText={platform && hostingPlatform[platform]}
                   placeholderText={
-                    !inputValues?.platform ? 'Select a hosting platform' : null
+                    !platform ? 'Select a hosting platform' : null
                   }
                   onChanged={(selectedPlatform) => {
                     onChange('platform', selectedPlatform.value);
@@ -240,8 +241,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   {Object.entries(hostingPlatform).map(([value, label]) => (
                     <MenuOption
                       className={classnames({
-                        'pipeline-list__option--active':
-                          inputValues.platform === value,
+                        'pipeline-list__option--active': platform === value,
                       })}
                       key={value}
                       primaryText={label}
@@ -255,7 +255,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Bucket Name
                 </div>
                 <Input
-                  defaultValue={inputValues.bucket_name}
+                  defaultValue={bucket_name}
                   onChange={(value) => onChange('bucket_name', value)}
                   placeholder="Enter name"
                   resetValueTrigger={visible}
@@ -269,7 +269,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Endpoint Link
                 </div>
                 <Input
-                  defaultValue={inputValues.endpoint}
+                  defaultValue={endpoint}
                   onChange={(value) => onChange('endpoint', value)}
                   placeholder="Enter url"
                   resetValueTrigger={visible}
diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss
index ee1f291830..81e3e35ddc 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.scss
+++ b/src/components/shareable-url-modal/shareable-url-modal.scss
@@ -92,6 +92,7 @@
   }
 
   &__content-note {
+    margin-top: 18px;
     color: var(--color-form-label);
 
     a {
@@ -99,6 +100,10 @@
     }
   }
 
+  &__paregraph-divider {
+    margin-bottom: 30px;
+  }
+
   &__content-wrapper {
     padding: 48px;
     background: var(--color-modal-bg-2);

From 102165a4e9a792878cb2f2e2b1250b5fac0da761 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 21 Feb 2024 11:22:15 +0000
Subject: [PATCH 08/21] Code review suggestions added

Signed-off-by: <>
---
 .../shareable-url-modal.js                    | 54 +++++++++----------
 src/config.js                                 |  4 ++
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index 645dd0c25d..833ccc9fa1 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -2,7 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { toggleShareableUrlModal } from '../../actions';
-import { hostingPlatform } from '../../config';
+import {
+  hostingPlatform,
+  KEDRO_VIZ_DOCS_URL,
+  KEDRO_VIZ_PUBLISH_URL,
+} from '../../config';
 
 import Button from '../ui/button';
 import CopyIcon from '../icons/copy';
@@ -28,18 +32,14 @@ const modalMessages = (status, info = '') => {
   return messages[status];
 };
 
-const KEDRO_VIZ_DOCS_URL =
-  'https://docs.kedro.org/projects/kedro-viz/en/latest/share_kedro_viz.html';
-const KEDRO_VIZ_PUBLISH_URL = `${KEDRO_VIZ_DOCS_URL}#publish-and-share-kedro-viz-automatically`;
-
 const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const [deploymentState, setDeploymentState] = useState('default');
   const [inputValues, setInputValues] = useState({});
   const [isFormDirty, setIsFormDirty] = useState({
     /* eslint-disable camelcase */
-    bucket_name: false,
-    platform: false,
-    endpoint: false,
+    has_bucket_name: false,
+    has_platform: false,
+    has_endpoint: false,
   });
   const [isLoading, setIsLoading] = useState(false);
   const [responseUrl, setResponseUrl] = useState(null);
@@ -137,18 +137,18 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     setIsLinkSettingsClick(false);
     setInputValues({});
     setIsFormDirty({
-      bucket_name: false,
-      platform: false,
-      endpoint: false,
+      has_bucket_name: false,
+      has_platform: false,
+      has_endpoint: false,
     }); /* eslint-disable camelcase */
   };
 
   /**
-   * Returns the modal heading based on the given type and deployment state.
+   * Returns the modal title/message based on the given type and deployment state.
    * @param {string} type - The type of the modal heading.
-   * @returns {string|null} The modal heading text or null if deployment state is 'default'.
+   * @returns {string|null} The modal title/message text or null if deployment state is 'default'.
    */
-  const getModalHeading = (type) => {
+  const getDeploymentStateByType = (type) => {
     if (deploymentState === 'default') {
       return null;
     }
@@ -171,7 +171,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     return responseUrl;
   };
 
-  const { platform, bucket_name, endpoint } = inputValues || {};
+  const { has_platform, has_bucket_name, has_endpoint } = inputValues || {};
 
   return (
     <Modal
@@ -180,8 +180,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
           deploymentState !== 'default',
       })}
       closeModal={handleModalClose}
-      message={getModalHeading('message')}
-      title={getModalHeading('title')}
+      message={getDeploymentStateByType('message')}
+      title={getDeploymentStateByType('title')}
       visible={visible.shareableUrlModal}
     >
       {!isLoading && !responseUrl && canUseShareableUrls && !responseError ? (
@@ -193,9 +193,9 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
               </div>
               <p className="shareable-url-modal__content-description shareable-url-modal__paregraph-divider">
                 Prerequisite: Deploying and hosting Kedro-Viz requires access
-                keys or user credentials, depending on the chosen service
+                keys or user credentials, depending on the chosen cloud
                 provider. To use this feature, please add your access keys or
-                credentials as environment variables in your project. More
+                credentials as environment variables in your Kedro project. More
                 information can be found in{' '}
                 <a
                   target="_blank"
@@ -229,19 +229,19 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Hosting platform
                 </div>
                 <Dropdown
-                  defaultText={platform && hostingPlatform[platform]}
+                  defaultText={has_platform && hostingPlatform[has_platform]}
                   placeholderText={
-                    !platform ? 'Select a hosting platform' : null
+                    !has_platform ? 'Select a hosting platform' : null
                   }
                   onChanged={(selectedPlatform) => {
-                    onChange('platform', selectedPlatform.value);
+                    onChange('has_platform', selectedPlatform.value);
                   }}
                   width={null}
                 >
                   {Object.entries(hostingPlatform).map(([value, label]) => (
                     <MenuOption
                       className={classnames({
-                        'pipeline-list__option--active': platform === value,
+                        'pipeline-list__option--active': has_platform === value,
                       })}
                       key={value}
                       primaryText={label}
@@ -255,8 +255,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Bucket Name
                 </div>
                 <Input
-                  defaultValue={bucket_name}
-                  onChange={(value) => onChange('bucket_name', value)}
+                  defaultValue={has_bucket_name}
+                  onChange={(value) => onChange('has_bucket_name', value)}
                   placeholder="Enter name"
                   resetValueTrigger={visible}
                   size="small"
@@ -269,8 +269,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Endpoint Link
                 </div>
                 <Input
-                  defaultValue={endpoint}
-                  onChange={(value) => onChange('endpoint', value)}
+                  defaultValue={has_endpoint}
+                  onChange={(value) => onChange('has_endpoint', value)}
                   placeholder="Enter url"
                   resetValueTrigger={visible}
                   size="small"
diff --git a/src/config.js b/src/config.js
index 712bf8d188..94a7024b5e 100644
--- a/src/config.js
+++ b/src/config.js
@@ -160,3 +160,7 @@ export const hostingPlatform = {
 
 export const RUN_TITLE = 'title';
 export const RUN_NOTES = 'notes';
+
+export const KEDRO_VIZ_DOCS_URL =
+  'https://docs.kedro.org/projects/kedro-viz/en/latest/share_kedro_viz.html';
+export const KEDRO_VIZ_PUBLISH_URL = `${KEDRO_VIZ_DOCS_URL}#publish-and-share-kedro-viz-automatically`;

From 9505a3f492a59b8d8dd584d7d00cd5ab6f3ac8e4 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 21 Feb 2024 15:53:35 +0000
Subject: [PATCH 09/21] Refactor form field names in ShareableUrlModal
 component

Signed-off-by: <>
---
 .../shareable-url-modal.js                    | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index 833ccc9fa1..fbe01bc956 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -36,10 +36,9 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const [deploymentState, setDeploymentState] = useState('default');
   const [inputValues, setInputValues] = useState({});
   const [isFormDirty, setIsFormDirty] = useState({
-    /* eslint-disable camelcase */
-    has_bucket_name: false,
-    has_platform: false,
-    has_endpoint: false,
+    hasBucketName: false,
+    hasPlatform: false,
+    hasEndpoint: false,
   });
   const [isLoading, setIsLoading] = useState(false);
   const [responseUrl, setResponseUrl] = useState(null);
@@ -90,6 +89,12 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const handleSubmit = async () => {
     setDeploymentState('loading');
     setIsLoading(true);
+    const payLoad = {
+      /* eslint-disable camelcase */
+      bucket_name: inputValues.hasBucketName,
+      platform: inputValues.hasPlatform,
+      endpoint: inputValues.hasEndpoint,
+    };
 
     try {
       const request = await fetch('/api/deploy', {
@@ -97,7 +102,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
           'Content-Type': 'application/json',
         },
         method: 'POST',
-        body: JSON.stringify(inputValues),
+        body: JSON.stringify(payLoad),
       });
       const response = await request.json();
 
@@ -111,6 +116,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
       }
     } catch (error) {
       console.error(error);
+      setResponseError(error.message || 'Error occurred!');
       setDeploymentState('failure');
     } finally {
       setIsLoading(false);
@@ -137,10 +143,10 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     setIsLinkSettingsClick(false);
     setInputValues({});
     setIsFormDirty({
-      has_bucket_name: false,
-      has_platform: false,
-      has_endpoint: false,
-    }); /* eslint-disable camelcase */
+      hasBucketName: false,
+      hasPlatform: false,
+      hasEndpoint: false,
+    });
   };
 
   /**
@@ -171,7 +177,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     return responseUrl;
   };
 
-  const { has_platform, has_bucket_name, has_endpoint } = inputValues || {};
+  const { hasPlatform, hasBucketName, hasEndpoint } = inputValues || {};
 
   return (
     <Modal
@@ -229,19 +235,19 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Hosting platform
                 </div>
                 <Dropdown
-                  defaultText={has_platform && hostingPlatform[has_platform]}
+                  defaultText={hasPlatform && hostingPlatform[hasPlatform]}
                   placeholderText={
-                    !has_platform ? 'Select a hosting platform' : null
+                    !hasPlatform ? 'Select a hosting platform' : null
                   }
                   onChanged={(selectedPlatform) => {
-                    onChange('has_platform', selectedPlatform.value);
+                    onChange('hasPlatform', selectedPlatform.value);
                   }}
                   width={null}
                 >
                   {Object.entries(hostingPlatform).map(([value, label]) => (
                     <MenuOption
                       className={classnames({
-                        'pipeline-list__option--active': has_platform === value,
+                        'pipeline-list__option--active': hasPlatform === value,
                       })}
                       key={value}
                       primaryText={label}
@@ -255,8 +261,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Bucket Name
                 </div>
                 <Input
-                  defaultValue={has_bucket_name}
-                  onChange={(value) => onChange('has_bucket_name', value)}
+                  defaultValue={hasBucketName}
+                  onChange={(value) => onChange('hasBucketName', value)}
                   placeholder="Enter name"
                   resetValueTrigger={visible}
                   size="small"
@@ -269,8 +275,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Endpoint Link
                 </div>
                 <Input
-                  defaultValue={has_endpoint}
-                  onChange={(value) => onChange('has_endpoint', value)}
+                  defaultValue={hasEndpoint}
+                  onChange={(value) => onChange('hasEndpoint', value)}
                   placeholder="Enter url"
                   resetValueTrigger={visible}
                   size="small"

From 67d43f9d53c5a2c1056966ec1ec56895dba7e815 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 21 Feb 2024 16:22:05 +0000
Subject: [PATCH 10/21] Add cursor style to input field in
 shareable-url-modal.js

Signed-off-by: <>
---
 src/components/shareable-url-modal/shareable-url-modal.js  | 7 +++++--
 .../shareable-url-modal/shareable-url-modal.scss           | 1 +
 2 files changed, 6 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 fbe01bc956..6b123e4545 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -169,8 +169,11 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   };
 
   const handleResponseUrl = () => {
-    // If the URL does not start with http:// or https://, append http:// to avoid relative path issue
-    if (!/^https?:\/\//.test(responseUrl)) {
+    // 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.hasPlatform === 'gcp'
+    ) {
       const url = 'http://' + responseUrl;
       return url;
     }
diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss
index 81e3e35ddc..8516a823e2 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.scss
+++ b/src/components/shareable-url-modal/shareable-url-modal.scss
@@ -131,6 +131,7 @@
       height: auto;
       white-space: nowrap;
       box-shadow: 0 1px 1px 0 var(--input-shadow);
+      cursor: text;
 
       &:focus-visible {
         outline: none;

From 4ac0c0504a700fe703c14fea196d1c36a3d088e2 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 21 Feb 2024 16:27:48 +0000
Subject: [PATCH 11/21] Add cursor style to input field in
 shareable-url-modal.js

Signed-off-by: <>
---
 src/components/shareable-url-modal/shareable-url-modal.scss | 1 -
 src/components/ui/input/input.scss                          | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss
index 8516a823e2..81e3e35ddc 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.scss
+++ b/src/components/shareable-url-modal/shareable-url-modal.scss
@@ -131,7 +131,6 @@
       height: auto;
       white-space: nowrap;
       box-shadow: 0 1px 1px 0 var(--input-shadow);
-      cursor: text;
 
       &:focus-visible {
         outline: none;
diff --git a/src/components/ui/input/input.scss b/src/components/ui/input/input.scss
index 935347e668..785337a815 100644
--- a/src/components/ui/input/input.scss
+++ b/src/components/ui/input/input.scss
@@ -3,6 +3,7 @@
 .input {
   @extend %input;
 
+  cursor: text;
   min-height: auto;
   resize: none;
 

From 0039a150a042a0b293d6422a650808729d51bdac Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 21 Feb 2024 17:16:00 +0000
Subject: [PATCH 12/21] Variable names updated.

Signed-off-by: <>
---
 .../shareable-url-modal.js                    | 38 +++++++++----------
 src/config.js                                 |  7 ++++
 2 files changed, 24 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 6b123e4545..3c115afec9 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -1,9 +1,11 @@
+/* eslint-disable camelcase */
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { toggleShareableUrlModal } from '../../actions';
 import {
   hostingPlatform,
+  inputKeyToStateKeyMap,
   KEDRO_VIZ_DOCS_URL,
   KEDRO_VIZ_PUBLISH_URL,
 } from '../../config';
@@ -78,7 +80,10 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   }, []);
 
   const onChange = (key, value) => {
-    setIsFormDirty((prevState) => ({ ...prevState, [key]: !!value }));
+    setIsFormDirty((prevState) => ({
+      ...prevState,
+      [inputKeyToStateKeyMap[key]]: !!value,
+    }));
     setInputValues(
       Object.assign({}, inputValues, {
         [key]: value,
@@ -89,12 +94,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const handleSubmit = async () => {
     setDeploymentState('loading');
     setIsLoading(true);
-    const payLoad = {
-      /* eslint-disable camelcase */
-      bucket_name: inputValues.hasBucketName,
-      platform: inputValues.hasPlatform,
-      endpoint: inputValues.hasEndpoint,
-    };
 
     try {
       const request = await fetch('/api/deploy', {
@@ -102,7 +101,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
           'Content-Type': 'application/json',
         },
         method: 'POST',
-        body: JSON.stringify(payLoad),
+        body: JSON.stringify(inputValues),
       });
       const response = await request.json();
 
@@ -170,17 +169,14 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
 
   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.hasPlatform === 'gcp'
-    ) {
+    if (!/^https?:\/\//.test(responseUrl) && inputValues.platform === 'gcp') {
       const url = 'http://' + responseUrl;
       return url;
     }
     return responseUrl;
   };
 
-  const { hasPlatform, hasBucketName, hasEndpoint } = inputValues || {};
+  const { platform, bucket_name, endpoint } = inputValues || {};
 
   return (
     <Modal
@@ -238,19 +234,19 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Hosting platform
                 </div>
                 <Dropdown
-                  defaultText={hasPlatform && hostingPlatform[hasPlatform]}
+                  defaultText={platform && hostingPlatform[platform]}
                   placeholderText={
-                    !hasPlatform ? 'Select a hosting platform' : null
+                    !platform ? 'Select a hosting platform' : null
                   }
                   onChanged={(selectedPlatform) => {
-                    onChange('hasPlatform', selectedPlatform.value);
+                    onChange('platform', selectedPlatform.value);
                   }}
                   width={null}
                 >
                   {Object.entries(hostingPlatform).map(([value, label]) => (
                     <MenuOption
                       className={classnames({
-                        'pipeline-list__option--active': hasPlatform === value,
+                        'pipeline-list__option--active': platform === value,
                       })}
                       key={value}
                       primaryText={label}
@@ -264,8 +260,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Bucket Name
                 </div>
                 <Input
-                  defaultValue={hasBucketName}
-                  onChange={(value) => onChange('hasBucketName', value)}
+                  defaultValue={bucket_name}
+                  onChange={(value) => onChange('bucket_name', value)}
                   placeholder="Enter name"
                   resetValueTrigger={visible}
                   size="small"
@@ -278,8 +274,8 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                   Endpoint Link
                 </div>
                 <Input
-                  defaultValue={hasEndpoint}
-                  onChange={(value) => onChange('hasEndpoint', value)}
+                  defaultValue={endpoint}
+                  onChange={(value) => onChange('endpoint', value)}
                   placeholder="Enter url"
                   resetValueTrigger={visible}
                   size="small"
diff --git a/src/config.js b/src/config.js
index 94a7024b5e..ea158b18e0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -158,6 +158,13 @@ export const hostingPlatform = {
   azure: 'Microsoft Azure',
 };
 
+export const inputKeyToStateKeyMap = {
+  // eslint-disable-next-line camelcase
+  bucket_name: 'hasBucketName',
+  platform: 'hasPlatform',
+  endpoint: 'hasEndpoint',
+};
+
 export const RUN_TITLE = 'title';
 export const RUN_NOTES = 'notes';
 

From ccfa453845f82e35ea6ab4ab4ade450fe3c345fe Mon Sep 17 00:00:00 2001
From: ravi-kumar-pilla <ravi_kumar_pilla@mckinsey.com>
Date: Wed, 21 Feb 2024 13:34:04 -0600
Subject: [PATCH 13/21] add exception handlers

Signed-off-by: ravi-kumar-pilla <ravi_kumar_pilla@mckinsey.com>
---
 package/kedro_viz/api/rest/router.py | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/package/kedro_viz/api/rest/router.py b/package/kedro_viz/api/rest/router.py
index 5272054242..bcfc11a1d4 100644
--- a/package/kedro_viz/api/rest/router.py
+++ b/package/kedro_viz/api/rest/router.py
@@ -20,6 +20,11 @@
     get_selected_pipeline_response,
 )
 
+try:
+    from azure.core.exceptions import ServiceRequestError
+except ImportError:  # pragma: no cover
+    ServiceRequestError = None  # type: ignore
+
 logger = logging.getLogger(__name__)
 
 router = APIRouter(
@@ -68,6 +73,16 @@ async def deploy_kedro_viz(input_values: DeployerConfiguration):
         return JSONResponse(
             status_code=401, content={"message": "Please provide valid credentials"}
         )
+    except (
+        # pylint: disable=catching-non-exception
+        (FileNotFoundError, ServiceRequestError)
+        if ServiceRequestError is not None
+        else FileNotFoundError
+    ) as exc:  # pragma: no cover
+        logger.exception("FileNotFoundError while deploying Kedro Viz : %s ", exc)
+        return JSONResponse(
+            status_code=400, content={"message": "The specified bucket does not exist"}
+        )
     except Exception as exc:  # pragma: no cover
         logger.exception("Deploying Kedro Viz failed: %s ", exc)
         return JSONResponse(status_code=500, content={"message": f"{exc}"})

From 3debad86585a48f58d7bb22357156aa678e042a4 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Wed, 21 Feb 2024 20:51:35 +0000
Subject: [PATCH 14/21] Disclaimer note added and shareable-url-modal component
 refactored by moving major jsx to other file

Signed-off-by: <>
---
 .../shareable-url-modal/shareable-url-jsx.js  | 208 +++++++++++
 .../shareable-url-modal.js                    | 342 +++++++-----------
 2 files changed, 331 insertions(+), 219 deletions(-)
 create mode 100644 src/components/shareable-url-modal/shareable-url-jsx.js

diff --git a/src/components/shareable-url-modal/shareable-url-jsx.js b/src/components/shareable-url-modal/shareable-url-jsx.js
new file mode 100644
index 0000000000..5668cf8a8c
--- /dev/null
+++ b/src/components/shareable-url-modal/shareable-url-jsx.js
@@ -0,0 +1,208 @@
+import Button from '../ui/button';
+import CopyIcon from '../icons/copy';
+import IconButton from '../ui/icon-button';
+import LoadingIcon from '../icons/loading';
+import Tooltip from '../ui/tooltip';
+import { KEDRO_VIZ_DOCS_URL, KEDRO_VIZ_PUBLISH_URL } from '../../config';
+
+/**
+ * Renders a compatibility message based on the availability of shareable URLs.
+ * @param {boolean} canUseShareableUrls - Indicates whether shareable URLs can be used.
+ * @param {function} handleModalClose - The function to handle the modal close event.
+ * @returns {JSX.Element|null} - The rendered compatibility message or null if shareable URLs can be used.
+ */
+export const renderCompatibilityMessage = (
+  canUseShareableUrls,
+  handleModalClose
+) => {
+  return !canUseShareableUrls ? (
+    <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
+      <Button mode="secondary" onClick={() => handleModalClose()} size="small">
+        Cancel
+      </Button>
+      <a
+        href="https://docs.kedro.org/en/latest/visualisation/share_kedro_viz.html"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <Button size="small">View documentation</Button>
+      </a>
+    </div>
+  ) : null;
+};
+
+/**
+ * Renders the success content for the shareable URL modal.
+ *
+ * @param {string} responseUrl - The response URL.
+ * @param {boolean} showCopied - Indicates whether the "Copied!" tooltip should be shown.
+ * @param {function} onCopyClick - The function to be called when the copy button is clicked.
+ * @param {function} handleResponseUrl - The function to handle the response URL.
+ * @param {function} handleModalClose - The function to handle the modal close event.
+ * @param {function} handleLinkSettingsClick - The function to handle the link settings click event.
+ * @returns {JSX.Element|null} The rendered success content.
+ */
+export const renderSuccessContent = (
+  responseUrl,
+  showCopied,
+  onCopyClick,
+  handleResponseUrl,
+  handleModalClose,
+  handleLinkSettingsClick
+) => {
+  return responseUrl ? (
+    <>
+      <div className="shareable-url-modal__result">
+        <div className="shareable-url-modal__label">Hosted link</div>
+        <div className="shareable-url-modal__url-wrapper">
+          <a
+            className="shareable-url-modal__result-url"
+            href={handleResponseUrl()}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {responseUrl}
+          </a>
+          {window.navigator.clipboard && (
+            <div className="shareable-url-modal__result-action">
+              <IconButton
+                ariaLabel="Copy run command to clipboard."
+                className="copy-button"
+                dataHeapEvent={`clicked.run_command`}
+                icon={CopyIcon}
+                onClick={onCopyClick}
+              />
+              <Tooltip
+                text="Copied!"
+                visible={showCopied}
+                noDelay
+                centerArrow
+                arrowSize="small"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="shareable-url-modal__button-wrapper ">
+        <Button
+          mode="secondary"
+          onClick={() => handleLinkSettingsClick()}
+          size="small"
+        >
+          Link Settings
+        </Button>
+        <Button
+          mode="secondary"
+          onClick={() => handleModalClose()}
+          size="small"
+        >
+          Close
+        </Button>
+      </div>
+    </>
+  ) : null;
+};
+
+/**
+ * Renders the error content for the shareable URL modal.
+ *
+ * @param {string} responseError - The error message to display.
+ * @param {function} handleGoBackClick - The function to handle the "Go back" button click.
+ * @returns {JSX.Element|null} The rendered error content or null if there is no error.
+ */
+export const renderErrorContent = (responseError, handleGoBackClick) => {
+  return responseError ? (
+    <div className="shareable-url-modal__error">
+      <p>Error message: {responseError}</p>
+      <Button mode="primary" onClick={() => handleGoBackClick()} size="small">
+        Go back
+      </Button>
+    </div>
+  ) : null;
+};
+
+/**
+ * Renders the disclaimer content for the shareable URL modal.
+ *
+ * @param {Function} clearDisclaimerMessage - The function to clear the disclaimer message.
+ * @param {Function} handleModalClose - The function to handle the modal close event.
+ * @returns {JSX.Element} The JSX element representing the disclaimer content.
+ */
+export const renderDisclaimerContent = (
+  clearDisclaimerMessage,
+  handleModalClose
+) => {
+  return (
+    <div>
+      <div className="shareable-url-modal__content-wrapper shareable-url-modal__content-description">
+        Disclaimer: Please note that Kedro-Viz contains preview data for
+        multiple datasets. If you wish to disable the preview when publishing
+        Kedro-Viz, please refer to the documentation on how to do so.
+      </div>
+      <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
+        <Button
+          mode="secondary"
+          onClick={() => handleModalClose()}
+          size="small"
+        >
+          Cancel
+        </Button>
+        <Button size="small" onClick={clearDisclaimerMessage}>
+          Okay
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Renders the loading content based on the isLoading flag.
+ *
+ * @param {boolean} isLoading - Flag indicating whether the content is loading or not.
+ * @returns {JSX.Element|null} - The loading content or null if isLoading is false.
+ */
+export const renderLoadingContent = (isLoading) => {
+  return isLoading ? (
+    <div className="shareable-url-modal__loading">
+      <LoadingIcon visible={isLoading} />
+    </div>
+  ) : null;
+};
+
+/**
+ * Renders the text content for the shareable URL modal.
+ * @returns {JSX.Element} The rendered JSX element.
+ */
+export const renderTextContent = () => {
+  return (
+    <div className="shareable-url-modal__content-wrapper">
+      <div className="shareable-url-modal__content-title">
+        Publish and Share Kedro-Viz
+      </div>
+      <p className="shareable-url-modal__content-description shareable-url-modal__paregraph-divider">
+        Prerequisite: Deploying and hosting Kedro-Viz requires access keys or
+        user credentials, depending on the chosen cloud 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{' '}
+        <a target="_blank" rel="noopener noreferrer" href={KEDRO_VIZ_DOCS_URL}>
+          docs
+        </a>
+        .
+      </p>
+      <p className="shareable-url-modal__content-description">
+        Enter the required information and a hosted link will be generated.
+      </p>
+      <p className="shareable-url-modal__content-description shareable-url-modal__content-note">
+        Find out how to obtain the endpoint link for the selected platform,{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={KEDRO_VIZ_PUBLISH_URL}
+        >
+          here
+        </a>
+        .
+      </p>
+    </div>
+  );
+};
diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index 3c115afec9..51f858daf4 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -3,22 +3,22 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { toggleShareableUrlModal } from '../../actions';
+import { hostingPlatform, inputKeyToStateKeyMap } from '../../config';
+
 import {
-  hostingPlatform,
-  inputKeyToStateKeyMap,
-  KEDRO_VIZ_DOCS_URL,
-  KEDRO_VIZ_PUBLISH_URL,
-} from '../../config';
+  renderCompatibilityMessage,
+  renderSuccessContent,
+  renderErrorContent,
+  renderDisclaimerContent,
+  renderLoadingContent,
+  renderTextContent,
+} from './shareable-url-jsx';
 
 import Button from '../ui/button';
-import CopyIcon from '../icons/copy';
 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 Tooltip from '../ui/tooltip';
 
 import './shareable-url-modal.scss';
 
@@ -49,6 +49,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const [isLinkSettingsClick, setIsLinkSettingsClick] = useState(false);
   const [compatibilityData, setCompatibilityData] = useState({});
   const [canUseShareableUrls, setCanUseShareableUrls] = useState(true);
+  const [isDisclaimerViewed, setIsDisclaimerViewed] = useState(false);
 
   useEffect(() => {
     async function fetchPackageCompatibility() {
@@ -141,6 +142,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     setResponseUrl(null);
     setIsLinkSettingsClick(false);
     setInputValues({});
+    setIsDisclaimerViewed(false);
     setIsFormDirty({
       hasBucketName: false,
       hasPlatform: false,
@@ -148,11 +150,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     });
   };
 
-  /**
-   * Returns the modal title/message based on the given type and deployment state.
-   * @param {string} type - The type of the modal heading.
-   * @returns {string|null} The modal title/message text or null if deployment state is 'default'.
-   */
   const getDeploymentStateByType = (type) => {
     if (deploymentState === 'default') {
       return null;
@@ -176,212 +173,85 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     return responseUrl;
   };
 
-  const { platform, bucket_name, endpoint } = inputValues || {};
+  const handleLinkSettingsClick = () => {
+    setDeploymentState('default');
+    setIsLoading(false);
+    setResponseUrl(null);
+    setIsLinkSettingsClick(true);
+  };
 
-  return (
-    <Modal
-      className={classnames('shareable-url-modal', {
-        'shareable-url-modal__non-default-wrapper':
-          deploymentState !== 'default',
-      })}
-      closeModal={handleModalClose}
-      message={getDeploymentStateByType('message')}
-      title={getDeploymentStateByType('title')}
-      visible={visible.shareableUrlModal}
-    >
-      {!isLoading && !responseUrl && canUseShareableUrls && !responseError ? (
-        <>
-          <div className="shareable-url-modal__content-form-wrapper">
-            <div className="shareable-url-modal__content-wrapper">
-              <div className="shareable-url-modal__content-title">
-                Publish and Share Kedro-Viz
+  const handleGoBackClick = () => {
+    setDeploymentState('default');
+    setIsLoading(false);
+    setResponseUrl(null);
+    setResponseError(null);
+  };
+
+  const clearDisclaimerMessage = () => setIsDisclaimerViewed(true);
+
+  const renderMainContent = () => {
+    return !isLoading &&
+      !responseUrl &&
+      canUseShareableUrls &&
+      !responseError ? (
+      <>
+        <div className="shareable-url-modal__content-form-wrapper">
+          {renderTextContent()}
+          <div className="shareable-url-modal__form-wrapper">
+            <div className="shareable-url-modal__input-wrapper">
+              <div className="shareable-url-modal__input-label">
+                Hosting platform
               </div>
-              <p className="shareable-url-modal__content-description shareable-url-modal__paregraph-divider">
-                Prerequisite: Deploying and hosting Kedro-Viz requires access
-                keys or user credentials, depending on the chosen cloud
-                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{' '}
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={KEDRO_VIZ_DOCS_URL}
-                >
-                  docs
-                </a>
-                .
-              </p>
-              <p className="shareable-url-modal__content-description">
-                Enter the required information and a hosted link will be
-                generated.
-              </p>
-              <p className="shareable-url-modal__content-description shareable-url-modal__content-note">
-                Find out how to obtain the endpoint link for the selected
-                platform,{' '}
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={KEDRO_VIZ_PUBLISH_URL}
-                >
-                  here
-                </a>
-                .
-              </p>
+              <Dropdown
+                defaultText={platform && hostingPlatform[platform]}
+                placeholderText={!platform ? 'Select a hosting platform' : null}
+                onChanged={(selectedPlatform) => {
+                  onChange('platform', selectedPlatform.value);
+                }}
+                width={null}
+              >
+                {Object.entries(hostingPlatform).map(([value, label]) => (
+                  <MenuOption
+                    className={classnames({
+                      'pipeline-list__option--active': platform === value,
+                    })}
+                    key={value}
+                    primaryText={label}
+                    value={value}
+                  />
+                ))}
+              </Dropdown>
             </div>
-            <div className="shareable-url-modal__form-wrapper">
-              <div className="shareable-url-modal__input-wrapper">
-                <div className="shareable-url-modal__input-label">
-                  Hosting platform
-                </div>
-                <Dropdown
-                  defaultText={platform && hostingPlatform[platform]}
-                  placeholderText={
-                    !platform ? 'Select a hosting platform' : null
-                  }
-                  onChanged={(selectedPlatform) => {
-                    onChange('platform', selectedPlatform.value);
-                  }}
-                  width={null}
-                >
-                  {Object.entries(hostingPlatform).map(([value, label]) => (
-                    <MenuOption
-                      className={classnames({
-                        'pipeline-list__option--active': platform === value,
-                      })}
-                      key={value}
-                      primaryText={label}
-                      value={value}
-                    />
-                  ))}
-                </Dropdown>
-              </div>
-              <div className="shareable-url-modal__input-wrapper">
-                <div className="shareable-url-modal__input-label">
-                  Bucket Name
-                </div>
-                <Input
-                  defaultValue={bucket_name}
-                  onChange={(value) => onChange('bucket_name', value)}
-                  placeholder="Enter name"
-                  resetValueTrigger={visible}
-                  size="small"
-                  type="input"
-                  dataTest={'bucket_name'}
-                />
+            <div className="shareable-url-modal__input-wrapper">
+              <div className="shareable-url-modal__input-label">
+                Bucket Name
               </div>
-              <div className="shareable-url-modal__input-wrapper">
-                <div className="shareable-url-modal__input-label">
-                  Endpoint Link
-                </div>
-                <Input
-                  defaultValue={endpoint}
-                  onChange={(value) => onChange('endpoint', value)}
-                  placeholder="Enter url"
-                  resetValueTrigger={visible}
-                  size="small"
-                  type="input"
-                  dataTest={'endpoint_name'}
-                />
+              <Input
+                defaultValue={bucket_name}
+                onChange={(value) => onChange('bucket_name', value)}
+                placeholder="Enter name"
+                resetValueTrigger={visible}
+                size="small"
+                type="input"
+                dataTest={'bucket_name'}
+              />
+            </div>
+            <div className="shareable-url-modal__input-wrapper">
+              <div className="shareable-url-modal__input-label">
+                Endpoint Link
               </div>
+              <Input
+                defaultValue={endpoint}
+                onChange={(value) => onChange('endpoint', value)}
+                placeholder="Enter url"
+                resetValueTrigger={visible}
+                size="small"
+                type="input"
+                dataTest={'endpoint_name'}
+              />
             </div>
           </div>
-          <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
-            <Button
-              mode="secondary"
-              onClick={() => handleModalClose()}
-              size="small"
-            >
-              Cancel
-            </Button>
-            <Button
-              disabled={!Object.values(isFormDirty).every((value) => value)}
-              size="small"
-              onClick={handleSubmit}
-            >
-              {isLinkSettingsClick ? 'Republish' : 'Publish'}
-            </Button>
-          </div>
-        </>
-      ) : null}
-      {isLoading ? (
-        <div className="shareable-url-modal__loading">
-          <LoadingIcon visible={isLoading} />
-        </div>
-      ) : null}
-      {responseError ? (
-        <div className="shareable-url-modal__error">
-          <p>Error message: {responseError}</p>
-          <Button
-            mode="primary"
-            onClick={() => {
-              setDeploymentState('default');
-              setIsLoading(false);
-              setResponseUrl(null);
-              setResponseError(null);
-            }}
-            size="small"
-          >
-            Go back
-          </Button>
         </div>
-      ) : null}
-      {responseUrl ? (
-        <>
-          <div className="shareable-url-modal__result">
-            <div className="shareable-url-modal__label">Hosted link</div>
-            <div className="shareable-url-modal__url-wrapper">
-              <a
-                className="shareable-url-modal__result-url"
-                href={handleResponseUrl()}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {responseUrl}
-              </a>
-              {window.navigator.clipboard && (
-                <div className="shareable-url-modal__result-action">
-                  <IconButton
-                    ariaLabel="Copy run command to clipboard."
-                    className="copy-button"
-                    dataHeapEvent={`clicked.run_command`}
-                    icon={CopyIcon}
-                    onClick={onCopyClick}
-                  />
-                  <Tooltip
-                    text="Copied!"
-                    visible={showCopied}
-                    noDelay
-                    centerArrow
-                    arrowSize="small"
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="shareable-url-modal__button-wrapper ">
-            <Button
-              mode="secondary"
-              onClick={() => {
-                setDeploymentState('default');
-                setIsLoading(false);
-                setResponseUrl(null);
-                setIsLinkSettingsClick(true);
-              }}
-              size="small"
-            >
-              Link Settings
-            </Button>
-            <Button
-              mode="secondary"
-              onClick={() => handleModalClose()}
-              size="small"
-            >
-              Close
-            </Button>
-          </div>
-        </>
-      ) : null}
-      {!canUseShareableUrls ? (
         <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
           <Button
             mode="secondary"
@@ -390,15 +260,49 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
           >
             Cancel
           </Button>
-          <a
-            href="https://docs.kedro.org/en/latest/visualisation/share_kedro_viz.html"
-            rel="noreferrer"
-            target="_blank"
+          <Button
+            disabled={!Object.values(isFormDirty).every((value) => value)}
+            size="small"
+            onClick={handleSubmit}
           >
-            <Button size="small">View documentation</Button>
-          </a>
+            {isLinkSettingsClick ? 'Republish' : 'Publish'}
+          </Button>
         </div>
-      ) : null}
+      </>
+    ) : null;
+  };
+
+  const { platform, bucket_name, endpoint } = inputValues || {};
+
+  return (
+    <Modal
+      className={classnames('shareable-url-modal', {
+        'shareable-url-modal__non-default-wrapper':
+          deploymentState !== 'default',
+      })}
+      closeModal={handleModalClose}
+      message={getDeploymentStateByType('message')}
+      title={getDeploymentStateByType('title')}
+      visible={visible.shareableUrlModal}
+    >
+      {!isDisclaimerViewed ? (
+        renderDisclaimerContent(clearDisclaimerMessage, handleModalClose)
+      ) : (
+        <>
+          {renderMainContent()}
+          {renderLoadingContent(isLoading)}
+          {renderErrorContent(responseError, handleGoBackClick)}
+          {renderSuccessContent(
+            responseUrl,
+            showCopied,
+            onCopyClick,
+            handleResponseUrl,
+            handleModalClose,
+            handleLinkSettingsClick
+          )}
+          {renderCompatibilityMessage(canUseShareableUrls, handleModalClose)}
+        </>
+      )}
     </Modal>
   );
 };

From b5d3674275a82f4815474c3dbe5223e1e0011e78 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 22 Feb 2024 09:35:25 +0000
Subject: [PATCH 15/21] Wrapped the prop methods with useCallback

Signed-off-by: <>
---
 .../shareable-url-modal.js                    | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 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 51f858daf4..77fd9ab0ab 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { toggleShareableUrlModal } from '../../actions';
@@ -123,16 +123,16 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     }
   };
 
-  const onCopyClick = () => {
+  const onCopyClick = useCallback(() => {
     window.navigator.clipboard.writeText(responseUrl);
     setShowCopied(true);
 
     setTimeout(() => {
       setShowCopied(false);
     }, 1500);
-  };
+  }, [responseUrl]);
 
-  const handleModalClose = () => {
+  const handleModalClose = useCallback(() => {
     onToggleModal(false);
     if (deploymentState !== 'incompatible') {
       setDeploymentState('default');
@@ -148,7 +148,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
       hasPlatform: false,
       hasEndpoint: false,
     });
-  };
+  }, [onToggleModal, deploymentState]);
 
   const getDeploymentStateByType = (type) => {
     if (deploymentState === 'default') {
@@ -164,30 +164,33 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     return modalMessages(deploymentState, compatibilityData.package_version);
   };
 
-  const handleResponseUrl = () => {
+  const handleResponseUrl = useCallback(() => {
     // 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') {
       const url = 'http://' + responseUrl;
       return url;
     }
     return responseUrl;
-  };
+  }, [inputValues.platform, responseUrl]);
 
-  const handleLinkSettingsClick = () => {
+  const handleLinkSettingsClick = useCallback(() => {
     setDeploymentState('default');
     setIsLoading(false);
     setResponseUrl(null);
     setIsLinkSettingsClick(true);
-  };
+  }, []);
 
-  const handleGoBackClick = () => {
+  const handleGoBackClick = useCallback(() => {
     setDeploymentState('default');
     setIsLoading(false);
     setResponseUrl(null);
     setResponseError(null);
-  };
+  }, []);
 
-  const clearDisclaimerMessage = () => setIsDisclaimerViewed(true);
+  const clearDisclaimerMessage = useCallback(
+    () => setIsDisclaimerViewed(true),
+    []
+  );
 
   const renderMainContent = () => {
     return !isLoading &&

From 7924277ab071d7acfd4eb82794f76e1bea4cddab Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 22 Feb 2024 09:39:59 +0000
Subject: [PATCH 16/21] info text updated.

Signed-off-by: <>
---
 src/components/shareable-url-modal/shareable-url-jsx.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/shareable-url-modal/shareable-url-jsx.js b/src/components/shareable-url-modal/shareable-url-jsx.js
index 5668cf8a8c..df760b9649 100644
--- a/src/components/shareable-url-modal/shareable-url-jsx.js
+++ b/src/components/shareable-url-modal/shareable-url-jsx.js
@@ -193,13 +193,13 @@ export const renderTextContent = () => {
         Enter the required information and a hosted link will be generated.
       </p>
       <p className="shareable-url-modal__content-description shareable-url-modal__content-note">
-        Find out how to obtain the endpoint link for the selected platform,{' '}
+        For more information on obtaining the Endpoint URL, refer to{' '}
         <a
           target="_blank"
           rel="noopener noreferrer"
           href={KEDRO_VIZ_PUBLISH_URL}
         >
-          here
+          the documentation
         </a>
         .
       </p>

From 6402fd23f6b6ff4520fcf17e86f3b63aca61f2e9 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 22 Feb 2024 10:24:55 +0000
Subject: [PATCH 17/21] Test fixed

Signed-off-by: <>
---
 src/components/shareable-url-modal/shareable-url-jsx.js     | 6 +++++-
 .../shareable-url-modal/shareable-url-modal.test.js         | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/shareable-url-modal/shareable-url-jsx.js b/src/components/shareable-url-modal/shareable-url-jsx.js
index df760b9649..f36507c831 100644
--- a/src/components/shareable-url-modal/shareable-url-jsx.js
+++ b/src/components/shareable-url-modal/shareable-url-jsx.js
@@ -147,7 +147,11 @@ export const renderDisclaimerContent = (
         >
           Cancel
         </Button>
-        <Button size="small" onClick={clearDisclaimerMessage}>
+        <Button
+          dataTest="disclaimerButton"
+          size="small"
+          onClick={clearDisclaimerMessage}
+        >
           Okay
         </Button>
       </div>
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 c4f9f163b4..aaa85a2905 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.test.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.test.js
@@ -5,6 +5,7 @@ import { setup } from '../../utils/state.mock';
 describe('ShareableUrlModal', () => {
   it('renders without crashing', () => {
     const wrapper = setup.mount(<ShareableUrlModal />);
+    wrapper.find('[data-test="disclaimerButton"]').simulate('click');
     expect(wrapper.find('.shareable-url-modal__input-wrapper').length).toBe(3);
   });
 });

From 1522589170a110790516df00486166549e4b971d Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 22 Feb 2024 10:55:44 +0000
Subject: [PATCH 18/21] test fix and rearranging jsx

Signed-off-by: <>
---
 .../shareable-url-modal/shareable-url-jsx.js  | 212 ----------------
 .../shareable-url-modal.js                    | 238 ++++++++++++++----
 2 files changed, 194 insertions(+), 256 deletions(-)
 delete mode 100644 src/components/shareable-url-modal/shareable-url-jsx.js

diff --git a/src/components/shareable-url-modal/shareable-url-jsx.js b/src/components/shareable-url-modal/shareable-url-jsx.js
deleted file mode 100644
index f36507c831..0000000000
--- a/src/components/shareable-url-modal/shareable-url-jsx.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import Button from '../ui/button';
-import CopyIcon from '../icons/copy';
-import IconButton from '../ui/icon-button';
-import LoadingIcon from '../icons/loading';
-import Tooltip from '../ui/tooltip';
-import { KEDRO_VIZ_DOCS_URL, KEDRO_VIZ_PUBLISH_URL } from '../../config';
-
-/**
- * Renders a compatibility message based on the availability of shareable URLs.
- * @param {boolean} canUseShareableUrls - Indicates whether shareable URLs can be used.
- * @param {function} handleModalClose - The function to handle the modal close event.
- * @returns {JSX.Element|null} - The rendered compatibility message or null if shareable URLs can be used.
- */
-export const renderCompatibilityMessage = (
-  canUseShareableUrls,
-  handleModalClose
-) => {
-  return !canUseShareableUrls ? (
-    <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
-      <Button mode="secondary" onClick={() => handleModalClose()} size="small">
-        Cancel
-      </Button>
-      <a
-        href="https://docs.kedro.org/en/latest/visualisation/share_kedro_viz.html"
-        rel="noreferrer"
-        target="_blank"
-      >
-        <Button size="small">View documentation</Button>
-      </a>
-    </div>
-  ) : null;
-};
-
-/**
- * Renders the success content for the shareable URL modal.
- *
- * @param {string} responseUrl - The response URL.
- * @param {boolean} showCopied - Indicates whether the "Copied!" tooltip should be shown.
- * @param {function} onCopyClick - The function to be called when the copy button is clicked.
- * @param {function} handleResponseUrl - The function to handle the response URL.
- * @param {function} handleModalClose - The function to handle the modal close event.
- * @param {function} handleLinkSettingsClick - The function to handle the link settings click event.
- * @returns {JSX.Element|null} The rendered success content.
- */
-export const renderSuccessContent = (
-  responseUrl,
-  showCopied,
-  onCopyClick,
-  handleResponseUrl,
-  handleModalClose,
-  handleLinkSettingsClick
-) => {
-  return responseUrl ? (
-    <>
-      <div className="shareable-url-modal__result">
-        <div className="shareable-url-modal__label">Hosted link</div>
-        <div className="shareable-url-modal__url-wrapper">
-          <a
-            className="shareable-url-modal__result-url"
-            href={handleResponseUrl()}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {responseUrl}
-          </a>
-          {window.navigator.clipboard && (
-            <div className="shareable-url-modal__result-action">
-              <IconButton
-                ariaLabel="Copy run command to clipboard."
-                className="copy-button"
-                dataHeapEvent={`clicked.run_command`}
-                icon={CopyIcon}
-                onClick={onCopyClick}
-              />
-              <Tooltip
-                text="Copied!"
-                visible={showCopied}
-                noDelay
-                centerArrow
-                arrowSize="small"
-              />
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="shareable-url-modal__button-wrapper ">
-        <Button
-          mode="secondary"
-          onClick={() => handleLinkSettingsClick()}
-          size="small"
-        >
-          Link Settings
-        </Button>
-        <Button
-          mode="secondary"
-          onClick={() => handleModalClose()}
-          size="small"
-        >
-          Close
-        </Button>
-      </div>
-    </>
-  ) : null;
-};
-
-/**
- * Renders the error content for the shareable URL modal.
- *
- * @param {string} responseError - The error message to display.
- * @param {function} handleGoBackClick - The function to handle the "Go back" button click.
- * @returns {JSX.Element|null} The rendered error content or null if there is no error.
- */
-export const renderErrorContent = (responseError, handleGoBackClick) => {
-  return responseError ? (
-    <div className="shareable-url-modal__error">
-      <p>Error message: {responseError}</p>
-      <Button mode="primary" onClick={() => handleGoBackClick()} size="small">
-        Go back
-      </Button>
-    </div>
-  ) : null;
-};
-
-/**
- * Renders the disclaimer content for the shareable URL modal.
- *
- * @param {Function} clearDisclaimerMessage - The function to clear the disclaimer message.
- * @param {Function} handleModalClose - The function to handle the modal close event.
- * @returns {JSX.Element} The JSX element representing the disclaimer content.
- */
-export const renderDisclaimerContent = (
-  clearDisclaimerMessage,
-  handleModalClose
-) => {
-  return (
-    <div>
-      <div className="shareable-url-modal__content-wrapper shareable-url-modal__content-description">
-        Disclaimer: Please note that Kedro-Viz contains preview data for
-        multiple datasets. If you wish to disable the preview when publishing
-        Kedro-Viz, please refer to the documentation on how to do so.
-      </div>
-      <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
-        <Button
-          mode="secondary"
-          onClick={() => handleModalClose()}
-          size="small"
-        >
-          Cancel
-        </Button>
-        <Button
-          dataTest="disclaimerButton"
-          size="small"
-          onClick={clearDisclaimerMessage}
-        >
-          Okay
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-/**
- * Renders the loading content based on the isLoading flag.
- *
- * @param {boolean} isLoading - Flag indicating whether the content is loading or not.
- * @returns {JSX.Element|null} - The loading content or null if isLoading is false.
- */
-export const renderLoadingContent = (isLoading) => {
-  return isLoading ? (
-    <div className="shareable-url-modal__loading">
-      <LoadingIcon visible={isLoading} />
-    </div>
-  ) : null;
-};
-
-/**
- * Renders the text content for the shareable URL modal.
- * @returns {JSX.Element} The rendered JSX element.
- */
-export const renderTextContent = () => {
-  return (
-    <div className="shareable-url-modal__content-wrapper">
-      <div className="shareable-url-modal__content-title">
-        Publish and Share Kedro-Viz
-      </div>
-      <p className="shareable-url-modal__content-description shareable-url-modal__paregraph-divider">
-        Prerequisite: Deploying and hosting Kedro-Viz requires access keys or
-        user credentials, depending on the chosen cloud 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{' '}
-        <a target="_blank" rel="noopener noreferrer" href={KEDRO_VIZ_DOCS_URL}>
-          docs
-        </a>
-        .
-      </p>
-      <p className="shareable-url-modal__content-description">
-        Enter the required information and a hosted link will be generated.
-      </p>
-      <p className="shareable-url-modal__content-description shareable-url-modal__content-note">
-        For more information on obtaining the Endpoint URL, refer to{' '}
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href={KEDRO_VIZ_PUBLISH_URL}
-        >
-          the documentation
-        </a>
-        .
-      </p>
-    </div>
-  );
-};
diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index 77fd9ab0ab..86b03e28b9 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -1,24 +1,24 @@
 /* eslint-disable camelcase */
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { toggleShareableUrlModal } from '../../actions';
-import { hostingPlatform, inputKeyToStateKeyMap } from '../../config';
-
 import {
-  renderCompatibilityMessage,
-  renderSuccessContent,
-  renderErrorContent,
-  renderDisclaimerContent,
-  renderLoadingContent,
-  renderTextContent,
-} from './shareable-url-jsx';
+  hostingPlatform,
+  inputKeyToStateKeyMap,
+  KEDRO_VIZ_DOCS_URL,
+  KEDRO_VIZ_PUBLISH_URL,
+} from '../../config';
 
 import Button from '../ui/button';
+import CopyIcon from '../icons/copy';
 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 Tooltip from '../ui/tooltip';
 
 import './shareable-url-modal.scss';
 
@@ -123,16 +123,16 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     }
   };
 
-  const onCopyClick = useCallback(() => {
+  const onCopyClick = () => {
     window.navigator.clipboard.writeText(responseUrl);
     setShowCopied(true);
 
     setTimeout(() => {
       setShowCopied(false);
     }, 1500);
-  }, [responseUrl]);
+  };
 
-  const handleModalClose = useCallback(() => {
+  const handleModalClose = () => {
     onToggleModal(false);
     if (deploymentState !== 'incompatible') {
       setDeploymentState('default');
@@ -148,7 +148,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
       hasPlatform: false,
       hasEndpoint: false,
     });
-  }, [onToggleModal, deploymentState]);
+  };
 
   const getDeploymentStateByType = (type) => {
     if (deploymentState === 'default') {
@@ -164,33 +164,190 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     return modalMessages(deploymentState, compatibilityData.package_version);
   };
 
-  const handleResponseUrl = useCallback(() => {
+  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') {
       const url = 'http://' + responseUrl;
       return url;
     }
     return responseUrl;
-  }, [inputValues.platform, responseUrl]);
+  };
 
-  const handleLinkSettingsClick = useCallback(() => {
-    setDeploymentState('default');
-    setIsLoading(false);
-    setResponseUrl(null);
-    setIsLinkSettingsClick(true);
-  }, []);
+  const clearDisclaimerMessage = () => setIsDisclaimerViewed(true);
 
-  const handleGoBackClick = useCallback(() => {
-    setDeploymentState('default');
-    setIsLoading(false);
-    setResponseUrl(null);
-    setResponseError(null);
-  }, []);
+  const renderCompatibilityMessage = () => {
+    return !canUseShareableUrls ? (
+      <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
+        <Button
+          mode="secondary"
+          onClick={() => handleModalClose()}
+          size="small"
+        >
+          Cancel
+        </Button>
+        <a
+          href="https://docs.kedro.org/en/latest/visualisation/share_kedro_viz.html"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <Button size="small">View documentation</Button>
+        </a>
+      </div>
+    ) : null;
+  };
 
-  const clearDisclaimerMessage = useCallback(
-    () => setIsDisclaimerViewed(true),
-    []
-  );
+  const renderSuccessContent = () => {
+    return responseUrl ? (
+      <>
+        <div className="shareable-url-modal__result">
+          <div className="shareable-url-modal__label">Hosted link</div>
+          <div className="shareable-url-modal__url-wrapper">
+            <a
+              className="shareable-url-modal__result-url"
+              href={handleResponseUrl()}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {responseUrl}
+            </a>
+            {window.navigator.clipboard && (
+              <div className="shareable-url-modal__result-action">
+                <IconButton
+                  ariaLabel="Copy run command to clipboard."
+                  className="copy-button"
+                  dataHeapEvent={`clicked.run_command`}
+                  icon={CopyIcon}
+                  onClick={onCopyClick}
+                />
+                <Tooltip
+                  text="Copied!"
+                  visible={showCopied}
+                  noDelay
+                  centerArrow
+                  arrowSize="small"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="shareable-url-modal__button-wrapper ">
+          <Button
+            mode="secondary"
+            onClick={() => {
+              setDeploymentState('default');
+              setIsLoading(false);
+              setResponseUrl(null);
+              setIsLinkSettingsClick(true);
+            }}
+            size="small"
+          >
+            Link Settings
+          </Button>
+          <Button
+            mode="secondary"
+            onClick={() => handleModalClose()}
+            size="small"
+          >
+            Close
+          </Button>
+        </div>
+      </>
+    ) : null;
+  };
+
+  const renderErrorContent = () => {
+    return responseError ? (
+      <div className="shareable-url-modal__error">
+        <p>Error message: {responseError}</p>
+        <Button
+          mode="primary"
+          onClick={() => {
+            setDeploymentState('default');
+            setIsLoading(false);
+            setResponseUrl(null);
+            setResponseError(null);
+          }}
+          size="small"
+        >
+          Go back
+        </Button>
+      </div>
+    ) : null;
+  };
+
+  const renderDisclaimerContent = () => {
+    return (
+      <div>
+        <div className="shareable-url-modal__content-wrapper shareable-url-modal__content-description">
+          Disclaimer: Please note that Kedro-Viz contains preview data for
+          multiple datasets. If you wish to disable the preview when publishing
+          Kedro-Viz, please refer to the documentation on how to do so.
+        </div>
+        <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
+          <Button
+            mode="secondary"
+            onClick={() => handleModalClose()}
+            size="small"
+          >
+            Cancel
+          </Button>
+          <Button
+            dataTest="disclaimerButton"
+            size="small"
+            onClick={clearDisclaimerMessage}
+          >
+            Okay
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderTextContent = () => {
+    return (
+      <div className="shareable-url-modal__content-wrapper">
+        <div className="shareable-url-modal__content-title">
+          Publish and Share Kedro-Viz
+        </div>
+        <p className="shareable-url-modal__content-description shareable-url-modal__paregraph-divider">
+          Prerequisite: Deploying and hosting Kedro-Viz requires access keys or
+          user credentials, depending on the chosen cloud 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{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={KEDRO_VIZ_DOCS_URL}
+          >
+            docs
+          </a>
+          .
+        </p>
+        <p className="shareable-url-modal__content-description">
+          Enter the required information and a hosted link will be generated.
+        </p>
+        <p className="shareable-url-modal__content-description shareable-url-modal__content-note">
+          For more information on obtaining the Endpoint URL, refer to{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={KEDRO_VIZ_PUBLISH_URL}
+          >
+            the documentation
+          </a>
+          .
+        </p>
+      </div>
+    );
+  };
+
+  const renderLoadingContent = () => {
+    return isLoading ? (
+      <div className="shareable-url-modal__loading">
+        <LoadingIcon visible={isLoading} />
+      </div>
+    ) : null;
+  };
 
   const renderMainContent = () => {
     return !isLoading &&
@@ -289,21 +446,14 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
       visible={visible.shareableUrlModal}
     >
       {!isDisclaimerViewed ? (
-        renderDisclaimerContent(clearDisclaimerMessage, handleModalClose)
+        renderDisclaimerContent()
       ) : (
         <>
           {renderMainContent()}
-          {renderLoadingContent(isLoading)}
-          {renderErrorContent(responseError, handleGoBackClick)}
-          {renderSuccessContent(
-            responseUrl,
-            showCopied,
-            onCopyClick,
-            handleResponseUrl,
-            handleModalClose,
-            handleLinkSettingsClick
-          )}
-          {renderCompatibilityMessage(canUseShareableUrls, handleModalClose)}
+          {renderLoadingContent()}
+          {renderErrorContent()}
+          {renderSuccessContent()}
+          {renderCompatibilityMessage()}
         </>
       )}
     </Modal>

From cf471aba8611128aa4ac11d3d28086b6afd1384f Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 22 Feb 2024 11:20:14 +0000
Subject: [PATCH 19/21] Cypress test fix

Signed-off-by: <>
---
 cypress/tests/ui/flowchart/shareable-urls.cy.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js
index 7fbeac546e..3a92079a47 100644
--- a/cypress/tests/ui/flowchart/shareable-urls.cy.js
+++ b/cypress/tests/ui/flowchart/shareable-urls.cy.js
@@ -10,6 +10,7 @@ describe('Shareable URLs', () => {
     // Action
     cy.reload();
     cy.get('.pipeline-menu-button--deploy').click({ force: true });
+    cy.get('[data-test="disclaimerButton"]').click({ force: true });
 
     // Assert after action
     cy.get('.shareable-url-modal .modal__wrapper').contains(
@@ -28,6 +29,7 @@ describe('Shareable URLs', () => {
     // Action
     cy.reload();
     cy.get('.pipeline-menu-button--deploy').click({ force: true });
+    cy.get('[data-test="disclaimerButton"]').click({ force: true });
 
     // Assert after action
     cy.get('.shareable-url-modal .modal__wrapper').contains(
@@ -38,6 +40,7 @@ describe('Shareable URLs', () => {
   it('verifies that shareable url modal closes on close button click #TC-54', () => {
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains('Cancel')
       .click();
@@ -54,6 +57,7 @@ describe('Shareable URLs', () => {
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
 
     // Assert after action
@@ -69,6 +73,7 @@ describe('Shareable URLs', () => {
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('[data-test="disclaimerButton"]').click();
 
     // Assert after action
     cy.get(
@@ -85,6 +90,7 @@ describe('Shareable URLs', () => {
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
@@ -104,6 +110,7 @@ describe('Shareable URLs', () => {
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
@@ -125,6 +132,7 @@ describe('Shareable URLs', () => {
     const primaryButtonNodeText = 'Publish';
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
@@ -158,6 +166,7 @@ describe('Shareable URLs', () => {
     // Action
     cy.reload();
     cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
@@ -196,6 +205,7 @@ describe('Shareable URLs', () => {
     // Action
     cy.reload();
     cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()

From 8a43e5b76859abe3f9a17b86b177d9f28f980c4d Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 22 Feb 2024 12:33:42 +0000
Subject: [PATCH 20/21] button text updated

Signed-off-by: <>
---
 src/components/shareable-url-modal/shareable-url-modal.js   | 2 +-
 src/components/shareable-url-modal/shareable-url-modal.scss | 1 +
 2 files changed, 2 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 86b03e28b9..5f5e13de83 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -296,7 +296,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
             size="small"
             onClick={clearDisclaimerMessage}
           >
-            Okay
+            Continue
           </Button>
         </div>
       </div>
diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss
index 81e3e35ddc..a03602afcc 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.scss
+++ b/src/components/shareable-url-modal/shareable-url-modal.scss
@@ -201,6 +201,7 @@
     font-size: 16px;
     font-weight: 400;
     line-height: 20px;
+    width: inherit;
 
     .button {
       align-self: end;

From bcece9d6a61df665a2d2a20e60d21fee9c4295d1 Mon Sep 17 00:00:00 2001
From: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
Date: Thu, 22 Feb 2024 14:36:08 +0000
Subject: [PATCH 21/21] Keeping button text as Publish for a link seetings

Signed-off-by: <>
---
 cypress/tests/ui/flowchart/shareable-urls.cy.js           | 2 +-
 src/components/shareable-url-modal/shareable-url-modal.js | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js
index 3a92079a47..39f46b9b4c 100644
--- a/cypress/tests/ui/flowchart/shareable-urls.cy.js
+++ b/cypress/tests/ui/flowchart/shareable-urls.cy.js
@@ -192,7 +192,7 @@ describe('Shareable URLs', () => {
     const bucketName = 'myBucketName';
     const endpointName = 'http://www.example.com';
     const primaryButtonNodeText = 'Publish';
-    const primaryButtonNodeTextVariant = 'Republish';
+    const primaryButtonNodeTextVariant = 'Publish';
     const secondaryButtonNodeText = 'Link Settings';
 
     // Intercept the network request to mock with a fixture
diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
index 5f5e13de83..193fcf4d62 100644
--- a/src/components/shareable-url-modal/shareable-url-modal.js
+++ b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -46,7 +46,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const [responseUrl, setResponseUrl] = useState(null);
   const [responseError, setResponseError] = useState(null);
   const [showCopied, setShowCopied] = useState(false);
-  const [isLinkSettingsClick, setIsLinkSettingsClick] = useState(false);
   const [compatibilityData, setCompatibilityData] = useState({});
   const [canUseShareableUrls, setCanUseShareableUrls] = useState(true);
   const [isDisclaimerViewed, setIsDisclaimerViewed] = useState(false);
@@ -140,7 +139,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
     setResponseError(null);
     setIsLoading(false);
     setResponseUrl(null);
-    setIsLinkSettingsClick(false);
     setInputValues({});
     setIsDisclaimerViewed(false);
     setIsFormDirty({
@@ -237,7 +235,6 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
               setDeploymentState('default');
               setIsLoading(false);
               setResponseUrl(null);
-              setIsLinkSettingsClick(true);
             }}
             size="small"
           >
@@ -425,7 +422,7 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
             size="small"
             onClick={handleSubmit}
           >
-            {isLinkSettingsClick ? 'Republish' : 'Publish'}
+            Publish
           </Button>
         </div>
       </>