From cd78bb071888890b0d2701d3a4dfea2bdabd8958 Mon Sep 17 00:00:00 2001 From: Rani Date: Sun, 20 Jun 2021 20:55:56 +0300 Subject: [PATCH] feat(core): added useShowModal that passes the application to the context in showModal --- .../core/src/managed/config/Configuration.tsx | 3 ++- .../src/managed/config/ManagementWarning.tsx | 7 +++++-- .../managed/overview/EnvironmentsOverview.tsx | 2 +- .../src/managed/overview/artifact/hooks.ts | 6 +++++- .../versionsHistory/VersionsHistory.tsx | 2 +- .../core/src/presentation/hooks/index.ts | 1 + .../presentation/hooks/useShowModal.hook.ts | 19 +++++++++++++++++++ .../core/src/presentation/modal/showModal.tsx | 12 +++++++++--- 8 files changed, 43 insertions(+), 9 deletions(-) create mode 100644 app/scripts/modules/core/src/presentation/hooks/useShowModal.hook.ts diff --git a/app/scripts/modules/core/src/managed/config/Configuration.tsx b/app/scripts/modules/core/src/managed/config/Configuration.tsx index 151783091d0..ad8d88a0b60 100644 --- a/app/scripts/modules/core/src/managed/config/Configuration.tsx +++ b/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 } }); diff --git a/app/scripts/modules/core/src/managed/config/ManagementWarning.tsx b/app/scripts/modules/core/src/managed/config/ManagementWarning.tsx index 6d14cbcd86c..17aa1d59c27 100644 --- a/app/scripts/modules/core/src/managed/config/ManagementWarning.tsx +++ b/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( diff --git a/app/scripts/modules/core/src/managed/overview/EnvironmentsOverview.tsx b/app/scripts/modules/core/src/managed/overview/EnvironmentsOverview.tsx index 0e05d58dfc8..efad0a06b0f 100644 --- a/app/scripts/modules/core/src/managed/overview/EnvironmentsOverview.tsx +++ b/app/scripts/modules/core/src/managed/overview/EnvironmentsOverview.tsx @@ -39,7 +39,7 @@ export const EnvironmentsOverview = () => { } else { content = ( <> - + {environments.length ? ( <> diff --git a/app/scripts/modules/core/src/managed/overview/artifact/hooks.ts b/app/scripts/modules/core/src/managed/overview/artifact/hooks.ts index 0584eef427a..70cba2cb684 100644 --- a/app/scripts/modules/core/src/managed/overview/artifact/hooks.ts +++ b/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( diff --git a/app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.tsx b/app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.tsx index 9a1ad8987de..c4c42fee3b0 100644 --- a/app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.tsx +++ b/app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.tsx @@ -125,7 +125,7 @@ export const VersionsHistory = () => { return (
- + {groupedVersions.map((group) => { return ; })} diff --git a/app/scripts/modules/core/src/presentation/hooks/index.ts b/app/scripts/modules/core/src/presentation/hooks/index.ts index 05b748b19f5..b6b686031ba 100644 --- a/app/scripts/modules/core/src/presentation/hooks/index.ts +++ b/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'; diff --git a/app/scripts/modules/core/src/presentation/hooks/useShowModal.hook.ts b/app/scripts/modules/core/src/presentation/hooks/useShowModal.hook.ts new file mode 100644 index 00000000000..03059e4b11b --- /dev/null +++ b/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( + ( + ModalComponent: React.ComponentType

>, + componentProps?: P, + modalProps?: Omit, + ) => { + showModal(ModalComponent, componentProps, modalProps, app); + }, + [showModal, app], + ); + return showModalWithApp; +}; diff --git a/app/scripts/modules/core/src/presentation/modal/showModal.tsx b/app/scripts/modules/core/src/presentation/modal/showModal.tsx index d2a5c48ccc9..c62747b0cc5 100644 --- a/app/scripts/modules/core/src/presentation/modal/showModal.tsx +++ b/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 = ( ModalComponent: React.ComponentType

>, componentProps?: P, modalProps?: Omit, + application?: Application, ): Promise> => new Promise>((resolve) => { let mountNode = document.createElement('div'); @@ -81,11 +84,14 @@ export const showModal = ( const handleRequestClose = () => handleDismiss(null); function render() { + const content = ( + + + + ); ReactDOM.render( - - - + {application ? {content} : content} , mountNode, );