feat(core): added useShowModal that passes the application to the con…

…text in showModal

app/scripts/modules/core/src/managed/config/Configuration.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import React from 'react';
 
 import { Illustration } from '@spinnaker/presentation';
-import { showModal, useApplicationContextSafe } from 'core/presentation';
+import { useApplicationContextSafe, useShowModal } from 'core/presentation';
 import { Spinner } from 'core/widgets';
 
 import { ApplicationQueryError } from '../ApplicationQueryError';
@@ -42,6 +42,7 @@ const ManagementToggle = () => {
   const logEvent = useLogEvent('Management');
   const { data, error, loading, refetch } = useFetchApplicationManagementStatusQuery({ variables: { appName } });
   const [toggleManagement, { loading: mutationInFlight }] = useToggleManagementMutation();
+  const showModal = useShowModal();
 
   const onShowToggleManagementModal = React.useCallback((shouldPause: boolean) => {
     logEvent({ action: 'OpenModal', data: { shouldPause } });

app/scripts/modules/core/src/managed/config/ManagementWarning.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 
-import { showModal } from 'core/presentation';
+import { useShowModal } from 'core/presentation';
 
 import { ResumeManagementModal } from './Configuration';
 import { useFetchApplicationManagementStatusQuery, useToggleManagementMutation } from '../graphql/graphql-sdk';
 import { MODAL_MAX_WIDTH } from '../utils/defaults';
+
 import './ManagementWarning.less';
 
 export const ManagementWarning = ({ appName }: { appName: string }) => {
   const { data, refetch } = useFetchApplicationManagementStatusQuery({ variables: { appName } });
   const [toggleManagement] = useToggleManagementMutation();
+  const showModal = useShowModal();
 
   const onClick = React.useCallback(() => {
     showModal(

app/scripts/modules/core/src/managed/overview/EnvironmentsOverview.tsx

@@ -39,7 +39,7 @@ export const EnvironmentsOverview = () => {
   } else {
     content = (
       <>
-        <ManagementWarning appName={app.name} />
+        <ManagementWarning />
         {environments.length ? (
           <>
             <EnvironmentsRender {...regularEnvironmentsProps}>

app/scripts/modules/core/src/managed/overview/artifact/hooks.ts

@@ -1,4 +1,4 @@
-import { showModal } from 'core/presentation';
+import { useShowModal } from 'core/presentation';
 
 import { MarkAsBadActionModal, MarkAsGoodActionModal, PinActionModal, UnpinActionModal } from './ArtifactActionModal';
 import {
@@ -23,6 +23,7 @@ export const useUnpinVersion = ({ version, ...payload }: ActionBasePayload, moda
     variables: { payload: payload },
     refetchQueries: [{ query: FetchPinnedVersionsDocument, variables: { appName: payload.application } }],
   });
+  const showModal = useShowModal();
 
   return () => {
     showModal(
@@ -46,6 +47,7 @@ export const usePinVersion = (payload: ActionBasePayload, modalTitle: string) =>
   const [onPin] = usePinVersionMutation({
     refetchQueries: [{ query: FetchPinnedVersionsDocument, variables: { appName: payload.application } }],
   });
+  const showModal = useShowModal();
 
   return () => {
     showModal(
@@ -71,6 +73,7 @@ export const useMarkVersionAsBad = (payload: ActionBasePayload, modalTitle: stri
       { query: FetchVersionDocument, variables: { appName: payload.application, versions: [payload.version] } },
     ],
   });
+  const showModal = useShowModal();
 
   return () => {
     showModal(
@@ -96,6 +99,7 @@ export const useMarkVersionAsGood = (payload: ActionBasePayload, modalTitle: str
       { query: FetchVersionDocument, variables: { appName: payload.application, versions: [payload.version] } },
     ],
   });
+  const showModal = useShowModal();
 
   return () => {
     showModal(

app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.tsx

@@ -125,7 +125,7 @@ export const VersionsHistory = () => {
 
   return (
     <main className="VersionsHistory">
-      <ManagementWarning appName={app.name} />
+      <ManagementWarning />
       {groupedVersions.map((group) => {
         return <SingleVersion key={group.key} versionData={group} pinnedVersions={pinnedVersions} />;
       })}

app/scripts/modules/core/src/presentation/hooks/index.ts

@@ -17,3 +17,4 @@ export * from './useObservable.hook';
 export * from './useObservableValue.hook';
 export * from './usePollingData.hook';
 export * from './usePrevious.hook';
+export * from './useShowModal.hook';

app/scripts/modules/core/src/presentation/hooks/useShowModal.hook.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IModalProps, showModal } from '../modal';
+import { IModalComponentProps } from '../modal/showModal';
+import { useApplicationContext } from './useApplicationContext.hook';
+
+export const useShowModal = () => {
+  const app = useApplicationContext();
+  const showModalWithApp = React.useCallback(
+    <P, C = any, D = any>(
+      ModalComponent: React.ComponentType<P & IModalComponentProps<C, D>>,
+      componentProps?: P,
+      modalProps?: Omit<IModalProps, 'isOpen' | 'onRequestClose' | 'onAfterClose' | 'children'>,
+    ) => {
+      showModal(ModalComponent, componentProps, modalProps, app);
+    },
+    [showModal, app],
+  );
+  return showModalWithApp;
+};

app/scripts/modules/core/src/presentation/modal/showModal.tsx

@@ -2,6 +2,8 @@ import { UIRouterContextComponent } from '@uirouter/react-hybrid';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import { Application, ApplicationContextProvider } from 'core/application';
+
 import { IModalProps, Modal } from './Modal';
 
 /** The Modal content Component will be passed these two props */
@@ -51,6 +53,7 @@ export const showModal = <P, C = any, D = any>(
   ModalComponent: React.ComponentType<P & IModalComponentProps<C, D>>,
   componentProps?: P,
   modalProps?: Omit<IModalProps, 'isOpen' | 'onRequestClose' | 'onAfterClose' | 'children'>,
+  application?: Application,
 ): Promise<IModalResult<C, D>> =>
   new Promise<IModalResult<C, D>>((resolve) => {
     let mountNode = document.createElement('div');
@@ -81,11 +84,14 @@ export const showModal = <P, C = any, D = any>(
     const handleRequestClose = () => handleDismiss(null);
 
     function render() {
+      const content = (
+        <UIRouterContextComponent>
+          <ModalComponent {...componentProps} dismissModal={handleDismiss} closeModal={handleClose} />
+        </UIRouterContextComponent>
+      );
       ReactDOM.render(
         <Modal isOpen={show} onRequestClose={handleRequestClose} onAfterClose={onAfterClose} {...modalProps}>
-          <UIRouterContextComponent>
-            <ModalComponent {...componentProps} dismissModal={handleDismiss} closeModal={handleClose} />
-          </UIRouterContextComponent>
+          {application ? <ApplicationContextProvider app={application}>{content}</ApplicationContextProvider> : content}
         </Modal>,
         mountNode,
       );