feat(HMS-2995): auto-join change confirmation dialog

A confirmation dialog is now opened on enable/disable action of domain
auto-join in domains list.

On "OK" the change of domain auto-join is triggered. On cancel, the
dialog is closed and nothing is done.

Signed-off-by: Petr Vobornik <[email protected]>

src/Components/AutoJoinChangeConfirmDialog/AutoJoinChangeConfirmDialog.scss

@@ -0,0 +1 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';

src/Components/AutoJoinChangeConfirmDialog/AutoJoinChangeConfirmDialog.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AutoJoinChangeConfirmDialog from './AutoJoinChangeConfirmDialog';
+import '@testing-library/jest-dom';
+import { Domain, DomainType } from '../../Api';
+
+const domain: Domain = {
+  title: 'domain',
+  description: 'description',
+  auto_enrollment_enabled: true,
+  domain_id: '1',
+  domain_name: 'domain',
+  domain_type: DomainType.RhelIdm,
+};
+
+test('expect that it does not crash with undefined domain', () => {
+  // When rendered with undefined domain
+  const { container } = render(<AutoJoinChangeConfirmDialog isOpen={true} />);
+
+  // Then the dialog should not be displayed
+  expect(container).toBeEmptyDOMElement();
+});
+
+test('expect empty when isOpen is false', () => {
+  // When rendered with isOpen false
+  const { container } = render(<AutoJoinChangeConfirmDialog domain={domain} isOpen={false} />);
+
+  // Then the dialog should not be displayed
+  expect(container).toBeEmptyDOMElement();
+});
+
+test('expect modal displayed - disable', () => {
+  // Given a domain with auto_enrollment_enabled true
+  expect(domain.auto_enrollment_enabled).toBe(true);
+
+  // When rendered with isOpen true and auto_enrollment_enabled true
+  render(<AutoJoinChangeConfirmDialog domain={domain} isOpen={true} />);
+
+  // Then the disable dialog should be displayed
+  expect(screen.getByRole('heading')).toHaveTextContent('Disable domain auto-join on launch');
+});
+
+test('expect modal displayed - enable', () => {
+  // Given a domain with auto_enrollment_enabled false
+  const domain2 = { ...domain, auto_enrollment_enabled: false };
+
+  // When rendered with isOpen
+  render(<AutoJoinChangeConfirmDialog domain={domain2} isOpen={true} />);
+
+  // Then the enable dialog should be displayed
+  expect(screen.getByRole('heading')).toHaveTextContent('Enable domain auto-join on launch');
+});
+
+test('expect handlers to be called', () => {
+  // given
+  const confirmHandler = jest.fn();
+  const cancelHandler = jest.fn();
+  render(<AutoJoinChangeConfirmDialog domain={domain} isOpen={true} onConfirm={confirmHandler} onCancel={cancelHandler} />);
+
+  // when the OK button is clicked
+  screen.getByRole('button', { name: 'OK' }).click();
+
+  // then the confirmHandler should be called with the domain as argument and cancelHandler should not be called
+  expect(confirmHandler).toBeCalledWith(domain);
+  expect(cancelHandler).toBeCalledTimes(0);
+
+  // given mocks are cleared
+  confirmHandler.mockClear();
+  cancelHandler.mockClear();
+
+  // when the dialog Cancel button is clicked
+  screen.getByRole('button', { name: 'Cancel' }).click();
+
+  // then the confirmHandler should not be called and cancelHandler should be called
+  expect(confirmHandler).toBeCalledTimes(0);
+  expect(cancelHandler).toBeCalledTimes(1);
+});

src/Components/AutoJoinChangeConfirmDialog/AutoJoinChangeConfirmDialog.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Button, Modal } from '@patternfly/react-core';
+import './AutoJoinChangeConfirmDialog.scss';
+
+import { Domain } from '../../Api/api';
+
+interface AutoJoinChangeConfirmDialogProps {
+  /** The domain to be changed */
+  domain?: Domain;
+  /** Flag to open the dialog */
+  isOpen: boolean;
+  /** Event fired when the user confirms the change */
+  onConfirm?: (domain?: Domain) => void;
+  /** Event fired when the user cancels the change */
+  onCancel?: () => void;
+}
+
+/**
+ * Modal dialog to confirm a change in domain auto-join.
+ *
+ * @param props
+ */
+const AutoJoinChangeConfirmDialog: React.FC<AutoJoinChangeConfirmDialogProps> = (props) => {
+  if (!props.domain) {
+    return <></>;
+  }
+
+  const domain = props.domain;
+
+  const onConfirmWrapper = () => {
+    props.onConfirm !== undefined && props.onConfirm(domain);
+  };
+
+  let title = '';
+  let text: React.ReactNode = '';
+  if (domain.auto_enrollment_enabled) {
+    title = `Disable domain auto-join on launch`;
+    text = (
+      <div>
+        <p>Are you sure you want to disable domain auto-join?</p>
+        <p>Disabling will avoid new hosts to join the domain &quot;{domain.title}&quot; using domain auto-join on launch.</p>
+      </div>
+    );
+  } else {
+    title = `Enable domain auto-join on launch`;
+    text = (
+      <div>
+        <p>Are you sure you want to enable domain auto-join?</p>
+        <p>Enabling will allow new hosts to join the domain &quot;{domain.title}&quot; using domain auto-join on launch.</p>
+      </div>
+    );
+  }
+
+  return (
+    <Modal
+      isOpen={props.isOpen}
+      titleIconVariant={'warning'}
+      variant="small"
+      title={title}
+      ouiaId="DomainAutoJoinChangeConfirmDialog"
+      onClose={props.onCancel}
+      actions={[
+        <Button key="change" variant="primary" onClick={onConfirmWrapper} ouiaId="ButtonDomainAutoJoinChangeConfirmDialogOK">
+          OK
+        </Button>,
+        <Button key="cancel" variant="link" onClick={props.onCancel} ouiaId="ButtonDomainAutoJoinChangeConfirmDialogCancel">
+          Cancel
+        </Button>,
+      ]}
+    >
+      {text}
+    </Modal>
+  );
+};
+
+export default AutoJoinChangeConfirmDialog;

src/Components/DomainList/DomainList.tsx

@@ -1,12 +1,13 @@
 import { ActionsColumn, IAction, TableComposable, Tbody, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
 import './DomainList.scss';
-import { Fragment, useContext } from 'react';
+import { Fragment, useContext, useState } from 'react';
 import React from 'react';
 
 import { Domain, DomainType, ResourcesApiFactory } from '../../Api/api';
 import { useNavigate } from 'react-router-dom';
 import { AppContext, AppContextType } from '../../AppContext';
 import { Button } from '@patternfly/react-core';
+import AutoJoinChangeConfirmDialog from '../AutoJoinChangeConfirmDialog/AutoJoinChangeConfirmDialog';
 
 export interface IColumnType<T> {
   key: string;
@@ -107,6 +108,9 @@ export const DomainList = () => {
   const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>('asc');
 
   const domains = context?.domains || ([] as Domain[]);
+  const [isOpenAutoJoinChangeConfirm, setIsOpenAutoJoinChangeConfirm] = useState(false);
+  const [currentDomain, setCurrentDomain] = useState<Domain>();
+
   const enabledText = 'Enabled';
   const disabledText = 'Disabled';
 
@@ -128,8 +132,21 @@ export const DomainList = () => {
     context?.deleteDomain(uuid);
   };
 
-  const onEnableDisable = (domain: Domain) => {
-    console.log(`clicked on Enable/Disable, on row ${domain.title}`);
+  const showAutoJoinChangeConfirmDialog = (domain: Domain) => {
+    setCurrentDomain(domain);
+    setIsOpenAutoJoinChangeConfirm(true);
+  };
+
+  const onConfirmAutoJoinChange = (domain?: Domain) => {
+    console.log('onConfirmAutoJoinChange');
+    setIsOpenAutoJoinChangeConfirm(false);
+    if (domain) {
+      toggleAutoJoin(domain);
+    }
+  };
+
+  const toggleAutoJoin = (domain: Domain) => {
+    console.log(`toggling auto_enrollment_enabled of domain: ${domain?.title}`);
     if (domain.domain_id) {
       resources_api
         .updateDomainUser(domain.domain_id, {
@@ -171,7 +188,7 @@ export const DomainList = () => {
   const defaultActions = (domain: Domain): IAction[] => [
     {
       title: 'Enable/Disable',
-      onClick: () => onEnableDisable(domain),
+      onClick: () => showAutoJoinChangeConfirmDialog(domain),
       ouiaId: 'ButtonActionEnableDisable',
     },
     {
@@ -246,6 +263,12 @@ export const DomainList = () => {
           })}
         </Tbody>
       </TableComposable>
+      <AutoJoinChangeConfirmDialog
+        domain={currentDomain}
+        isOpen={isOpenAutoJoinChangeConfirm}
+        onConfirm={onConfirmAutoJoinChange}
+        onCancel={() => setIsOpenAutoJoinChangeConfirm(false)}
+      />
     </>
   );
 };