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,18 @@
 import React from 'react';
 
-import { showModal } from 'core/presentation';
+import { useApplicationContextSafe, 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 }) => {
+export const ManagementWarning = () => {
+ const appName = useApplicationContextSafe().name;
  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,
  );