Merge pull request #3 from OpsMx/bugfix/OP-19172-deletePopup-master

feat: Delete popup handled with a message
OpsMx · Jan 30, 2023 · 029c457 · 029c457
2 parents 25614a1 + 7dc9982
commit 029c457
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 4 deletions.
diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -745,7 +745,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
 
     private onAppDeleted() {
         this.appContext.apis.notifications.show({type: NotificationType.Success, content: `Application '${this.props.match.params.name}' was deleted`});
-        this.appContext.apis.navigation.goto('/applications');
+        // this.appContext.apis.navigation.goto('/applications');   // To avoid redirecting to the listing page
     }
 
     private async updateApp(app: appModels.Application, query: {validate?: boolean}) {

diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
@@ -7,6 +7,8 @@ import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
 import {ApplicationSyncWindowStatusIcon, ComparisonStatusIcon, getAppOperationState, getConditionCategory, HealthStatusIcon, OperationState, syncStatusMessage} from '../utils';
 import {RevisionMetadataPanel} from './revision-metadata-panel';
+import * as AppUtils from '../utils'
+import { Observable } from 'rxjs';
 
 require('./application-status-panel.scss');
 
@@ -166,7 +168,11 @@ export const ApplicationStatusPanel = ({application, showOperation, showConditio
                 noLoaderOnInputChange={true}
                 input={application}
                 load={async app => {
-                    return await services.applications.getApplicationSyncWindowState(app.metadata.name, app.metadata.namespace);
+                    if(!AppUtils.isPopupFn()){
+                        return await services.applications.getApplicationSyncWindowState(app.metadata.name, app.metadata.namespace);
+                    }
+                    return new Observable();
+
                 }}>
                 {(data: models.ApplicationSyncWindowState) => (
                     <React.Fragment>

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -27,6 +27,12 @@ export const ExternalLinkAnnotation = 'link.argocd.argoproj.io/external-link';
 
 type ActionMenuItem = MenuItem & {disabled?: boolean};
 
+export let popupConfirmed: boolean = false;
+
+export function isPopupFn() {
+    return popupConfirmed;
+}
+
 export function nodeKey(node: NodeId) {
     return [node.group, node.kind, node.namespace, node.name].join('/');
 }
@@ -104,6 +110,7 @@ export async function deleteApplication(appName: string, appNamespace: string, a
                 try {
                     await services.applications.delete(appName, appNamespace, vals.propagationPolicy);
                     confirmed = true;
+                    popupConfirmed = confirmed;
                     close();
                 } catch (e) {
                     apis.notifications.show({
@@ -113,8 +120,8 @@ export async function deleteApplication(appName: string, appNamespace: string, a
                 }
             }
         },
-        {name: 'argo-icon-warning', color: 'warning'},
-        'yellow',
+        {name: 'argo-icon-warning', color: 'info'},
+        '',
         {propagationPolicy: 'foreground'}
     );
     return confirmed;

diff --git a/ui/src/app/shared/components/page/page.tsx b/ui/src/app/shared/components/page/page.tsx
@@ -6,6 +6,8 @@ import {map} from 'rxjs/operators';
 import {Context, ContextApis} from '../../context';
 import {services} from '../../services';
 import requests from '../../services/requests';
+import * as AppUtils from '../../../applications/components/utils'
+import PopupModal from '../simplePopup/popup';
 
 const mostRecentLoggedIn = new BehaviorSubject<boolean>(false);
 
@@ -62,6 +64,11 @@ export const Page = (props: PageProps) => {
                         useTitleOnly={props.useTitleOnly}
                         toolbar={!props.hideAuth ? AddAuthToToolbar(props.toolbar, ctx) : props.toolbar}
                     />
+                    {AppUtils.isPopupFn() && 
+                        <PopupModal isOpen={true}
+                        header="Deleted Successfully"
+                        content="Application Deleted Successfully. Please navigate to ISD Dashboard."></PopupModal>
+                    }
                 </div>
             )}
         </DataLoader>

diff --git a/ui/src/app/shared/components/simplePopup/popup.css b/ui/src/app/shared/components/simplePopup/popup.css
@@ -0,0 +1,63 @@
+/* Popup style */
+.popup-box {
+    position: fixed;
+    display: flex;
+    background: #00000050;
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    align-items: center;
+
+  }
+
+  .alignBox{
+    margin: 0 auto;
+  }
+
+  .header{
+    color: #fff;
+    font-weight: bold;
+    position: relative;
+    width: 700px;
+    margin: 0 auto;
+    height: auto;
+    max-height: 70vh;
+    margin-top: calc(100vh - 85vh - 30vh);
+    background-color: #5fba6e;
+    padding: 10px 20px;
+    overflow: auto;
+
+  }
+
+  .content-box {
+    font-size: 18px;
+    position: relative;
+    width: 700px;
+    margin: 0 auto;
+    height: auto;
+    max-height: 70vh;
+    /* margin-top: calc(100vh - 85vh - 20px); */
+    background: #fff;
+    padding: 20px;
+    /* border: 1px solid #999; */
+    overflow: auto;
+  }
+
+  .close-icon {
+    content: 'x';
+    cursor: pointer;
+    position: fixed;
+    right: calc(15% - 30px);
+    top: calc(100vh - 85vh - 33px);
+    background: #ededed;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    line-height: 20px;
+    text-align: center;
+    border: 1px solid #999;
+    font-size: 20px;
+  }
diff --git a/ui/src/app/shared/components/simplePopup/popup.tsx b/ui/src/app/shared/components/simplePopup/popup.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useState } from 'react';
+require('./popup.css');
+
+
+const PopupModal = (props: {
+  isOpen: boolean; 
+  content: string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactNodeArray | React.ReactPortal; 
+  header: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleClose =()=> setIsOpen(false);
+
+  React.useEffect(() => {
+    setIsOpen(props.isOpen)
+  }, [props.isOpen])
+
+  return (
+    isOpen && (<div className="popup-box">
+      <div className='alignBox'>
+        <div className='header'>
+          {props.header}
+        </div>
+        <div className="content-box">
+          {/* <span className="close-icon" onClick={handleClose}>x</span> */}
+          {props.content}
+        </div>
+      </div>
+    </div>)
+  );
+};
+
+export default PopupModal;