feat(core/managed): use showModal API for history modal (#7988)

spinnaker · Mar 5, 2020 · 8f30c02 · 8f30c02
1 parent 3c44303
commit 8f30c02
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx
@@ -3,7 +3,7 @@ import ReactGA from 'react-ga';
 import { Dropdown, MenuItem } from 'react-bootstrap';
 
 import { SETTINGS } from 'core/config/settings';
-import { HoverablePopover, Modal } from 'core/presentation';
+import { HoverablePopover, showModal } from 'core/presentation';
 import { HelpField } from 'core/help';
 import { Application } from 'core/application';
 import { IManagedResourceSummary } from 'core/domain';
@@ -30,8 +30,6 @@ export const ManagedResourceDetailsIndicator = ({
   resourceSummary,
   application,
 }: IManagedResourceDetailsIndicatorProps) => {
-  const [showHistoryModal, setShowHistoryModal] = React.useState(false);
-
   if (!resourceSummary) {
     return null;
   }
@@ -104,7 +102,7 @@ export const ManagedResourceDetailsIndicator = ({
             <li>
               <a
                 onClick={() => {
-                  setShowHistoryModal(true);
+                  showModal(ManagedResourceHistoryModal, { resourceSummary });
                   logClick('History', id);
                 }}
               >
@@ -122,9 +120,6 @@ export const ManagedResourceDetailsIndicator = ({
             </li>
           </Dropdown.Menu>
         </Dropdown>
-        <Modal isOpen={showHistoryModal} onRequestClose={() => setShowHistoryModal(false)}>
-          <ManagedResourceHistoryModal resourceSummary={resourceSummary} />
-        </Modal>
       </div>
     </div>
   );

diff --git a/app/scripts/modules/core/src/managed/ManagedResourceHistoryModal.tsx b/app/scripts/modules/core/src/managed/ManagedResourceHistoryModal.tsx
@@ -4,14 +4,15 @@ import { DateTime } from 'luxon';
 import { UISref } from '@uirouter/react';
 
 import {
+  IModalComponentProps,
   ModalHeader,
   ModalBody,
   Table,
   TableRow,
   TableCell,
   standardGridTableLayout,
   useData,
-} from 'core/presentation';
+} from '../presentation';
 
 import { relativeTime, timestamp } from 'core/utils';
 import { IManagedResourceSummary, IManagedResourceDiff } from 'core/domain';
@@ -23,7 +24,7 @@ import { ManagedResourceDiffTable } from './ManagedResourceDiffTable';
 
 import './ManagedResourceHistoryModal.less';
 
-export interface IManagedResourceHistoryModalProps {
+export interface IManagedResourceHistoryModalProps extends IModalComponentProps {
   resourceSummary: IManagedResourceSummary;
 }
 
@@ -104,6 +105,7 @@ const renderExpandedRowContent = (
   diff: IManagedResourceDiff,
   tasks: Array<{ id: string; name: string }>,
   message: string,
+  dismissModal: () => any,
 ) => {
   return (
     <div className="flex-container-v left">
@@ -121,7 +123,9 @@ const renderExpandedRowContent = (
         <div className="flex-container-v">
           {tasks.map(({ id, name }) => (
             <UISref key={id} to="home.applications.application.tasks.taskDetails" params={{ taskId: id }}>
-              <a className="sp-padding-xs-yaxis">{name}</a>
+              <a className="sp-padding-xs-yaxis" onClick={() => dismissModal()}>
+                {name}
+              </a>
             </UISref>
           ))}
         </div>
@@ -131,7 +135,7 @@ const renderExpandedRowContent = (
   );
 };
 
-export const ManagedResourceHistoryModal = ({ resourceSummary }: IManagedResourceHistoryModalProps) => {
+export const ManagedResourceHistoryModal = ({ resourceSummary, dismissModal }: IManagedResourceHistoryModalProps) => {
   const {
     id,
     moniker: { app, stack, detail },
@@ -191,6 +195,7 @@ export const ManagedResourceHistoryModal = ({ resourceSummary }: IManagedResourc
                               delta,
                               tasks,
                               message || reason || exceptionMessage,
+                              dismissModal,
                             ))
                         }
                       >