Merge branch 'master' into fix/popup-close-button

Author: agaudreault

src/components/dropdown/dropdown.tsx

@@ -26,6 +26,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     private el: HTMLDivElement;
     private content: HTMLDivElement;
     private subscriptions: Subscription[];
+    private isFirstOpen = true;
 
     constructor(props: DropDownProps) {
         super(props);
@@ -109,6 +110,38 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         return newState;
     }
 
+    public componentDidUpdate(_prevProps: DropDownProps, prevState: DropDownState) {
+        // When menu changes from closed to open state
+        if (!prevState.opened && this.state.opened) {
+            // Mark as first open
+            this.isFirstOpen = true;
+            // Use setTimeout to ensure content has been rendered
+            setTimeout(() => {
+                if (this.state.opened && this.content && this.el) {
+                    const newState = this.refreshState();
+                    // Only update state if calculated position differs from current position
+                    if (newState.left !== this.state.left || newState.top !== this.state.top) {
+                        this.setState(newState);
+                    }
+                    this.isFirstOpen = false;
+                }
+            }, 0);
+        }
+        
+        // If content changes and it's not the first open, recalculate position
+        if (this.state.opened && !this.isFirstOpen && this.content && this.el) {
+            // Use setTimeout to ensure calculation happens after DOM updates
+            setTimeout(() => {
+                if (this.state.opened) {
+                    const newState = this.refreshState();
+                    if (newState.left !== this.state.left || newState.top !== this.state.top) {
+                        this.setState(newState);
+                    }
+                }
+            }, 0);
+        }
+    }
+
     private open() {
         if (!this.content || !this.el) {
             return;

src/components/popup/popup-manager.tsx

@@ -5,7 +5,12 @@ import { BehaviorSubject } from 'rxjs';
 import { PopupProps } from './popup';
 
 export interface PopupApi {
-    confirm(title: string, message: string | React.ComponentType): Promise<boolean>;
+    confirm(
+        title: string, 
+        message: string | React.ComponentType,
+        customIcon?: {name: string, color: string},
+        titleColor?: string,
+    ): Promise<boolean>;
     prompt(
         title: string,
         form: (formApi: FormApi) => RenderReturn, settings?: {
@@ -25,7 +30,12 @@ export class PopupManager implements PopupApi {
         return this.popupPropsSubject.asObservable();
     }
 
-    public confirm(title: string, message: string | React.ComponentType): Promise<boolean> {
+    public confirm(
+        title: string, 
+        message: string | React.ComponentType,
+        customIcon?: {name: string, color: string},
+        titleColor?: string,
+    ): Promise<boolean> {
         const content = typeof message === 'string' && (() => (<p>{message}</p>)) || message as React.ComponentType;
 
         return new Promise((resolve) => {
@@ -36,15 +46,17 @@ export class PopupManager implements PopupApi {
 
             this.popupPropsSubject.next({
                 title: (
-                    <span>{title} <i className='argo-icon-close' onClick={() => closeAndResolve(false)}/></span>
+                    <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><div>{title}</div> <i className='argo-icon-close' onClick={() => closeAndResolve(false)}/></span>
                 ),
                 content,
                 footer: (
-                    <div>
+                    <div style={{ display: 'flex', gap: '8px' }}>
                         <button qe-id='argo-popup-ok-button' className='argo-button argo-button--base' onClick={() => closeAndResolve(true)}>OK</button>
                         <button qe-id='argo-popup-cancel-button' className='argo-button argo-button--base-o' onClick={() => closeAndResolve(false)}>Cancel</button>
                     </div>
                 ),
+                titleColor: titleColor ? titleColor : 'normal',
+                icon: customIcon ? { name: customIcon?.name, color: customIcon?.color} : undefined,
             });
         });
     }
@@ -79,7 +91,7 @@ export class PopupManager implements PopupApi {
             this.popupPropsSubject.next({
                 children: undefined,
                 title: (
-                    <span>{title} <i className='argo-icon-close' onClick={() => closeAndResolve(null)}/></span>
+                    <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}><div>{title}</div> <i className='argo-icon-close' onClick={() => closeAndResolve(null)}/></span>
                 ),
                 titleColor: titleColor ? titleColor : 'normal',
                 icon: customIcon ? { name: customIcon?.name, color: customIcon?.color} : undefined,
@@ -97,7 +109,7 @@ export class PopupManager implements PopupApi {
                     </Form>
                 ),
                 footer: (
-                    <div>
+                    <div style={{ display: 'flex', gap: '8px' }}>
                         <button qe-id='prompt-popup-ok-button' className='argo-button argo-button--base' onClick={(e) => formApi.submitForm(e)}>OK</button>
                         <button qe-id='prompt-popup-cancel-button' className='argo-button argo-button--base-o' onClick={() => closeAndResolve(null)}>Cancel</button>
                     </div>

src/components/popup/popup.scss

@@ -34,6 +34,7 @@ $popup-border-radius: 8px;
         &__header {
             line-height: 60px;
             padding-left: 30px;
+            padding-right: 30px;
             height: 60px;
             border-top-right-radius: $popup-border-radius;
             border-top-left-radius: $popup-border-radius;