Make shareable URL modal open globally across the app. (#1639)

Resolves #1633

RELEASE.md

@@ -13,6 +13,7 @@ Please follow the established format:
 - Fix dataset factory patterns in Experiment Tracking. (#1588)
 - Improved feedback for copy to clipboard feature. (#1614)
 - Ensure Kedro-Viz works when hosted on a URL subpath. (#1621)
+- Fix shareable URL modal to appear across the app. (#1639)
 - Refactor flowchart dataclasses to pydantic base models. (#1565)
 
 # Release 6.6.1

cypress/tests/ui/experiment-tracking/experiment-tracking.cy.js

@@ -117,7 +117,7 @@ describe('Experiment Tracking', () => {
         });
 
       // Action
-      cy.get('[data-test="kedro-pipeline-selector"]').click();
+      cy.get('.select-dropdown [data-test="kedro-pipeline-selector"]').click();
       cy.get('.dropdown__options > :nth-child(2)').click();
       cy.get('[data-test="btnMetricsChange"]').click();
 
@@ -170,7 +170,7 @@ describe('Experiment Tracking', () => {
         .and('eq', plotToCheckText);
 
       // Action
-      cy.get('[data-test="kedro-pipeline-selector"]').click();
+      cy.get('.select-dropdown [data-test="kedro-pipeline-selector"]').click();
       cy.get('.dropdown__options > :nth-child(2)').click();
       cy.get('[data-test="btnMetricsChange"]').click();
 

src/components/flowchart-wrapper/flowchart-wrapper.js

@@ -21,8 +21,6 @@ import PipelineWarning from '../pipeline-warning';
 import LoadingIcon from '../icons/loading';
 import MetaData from '../metadata';
 import MetadataModal from '../metadata-modal';
-import ShareableUrlModal from '../shareable-url-modal';
-import ShareableUrlMetadata from '../shareable-url-modal/shareable-url-metadata';
 import Sidebar from '../sidebar';
 import Button from '../ui/button';
 import CircleProgressBar from '../ui/circle-progress-bar';
@@ -35,7 +33,6 @@ import {
 } from '../../config';
 import { findMatchedPath } from '../../utils/match-path';
 import { getKeyByValue } from '../../utils/get-key-by-value';
-import { isRunningLocally } from '../../utils';
 
 import './flowchart-wrapper.scss';
 
@@ -297,11 +294,9 @@ export const FlowChartWrapper = ({
           >
             <LoadingIcon visible={loading} />
           </div>
-          {isRunningLocally() ? null : <ShareableUrlMetadata />}
         </div>
         <ExportModal />
         <MetadataModal />
-        {isRunningLocally() ? <ShareableUrlModal /> : null}
       </div>
     );
   }

src/components/wrapper/wrapper.js

@@ -14,6 +14,8 @@ import FlowChartWrapper from '../flowchart-wrapper';
 import ExperimentWrapper from '../experiment-wrapper';
 import SettingsModal from '../settings-modal';
 import UpdateReminder from '../update-reminder';
+import ShareableUrlModal from '../shareable-url-modal';
+import ShareableUrlMetadata from '../shareable-url-modal/shareable-url-metadata';
 
 import './wrapper.scss';
 
@@ -51,6 +53,8 @@ export const Wrapper = ({ displayGlobalToolbar, theme }) => {
               isOutdated={isOutdated}
               latestVersion={latestVersion}
             />
+            {isRunningLocally() ? null : <ShareableUrlMetadata />}
+            {isRunningLocally() ? <ShareableUrlModal /> : null}
             {versionData && (
               <UpdateReminder
                 isOutdated={isOutdated}