Minor: added loading state, and error notification in testSuite. (#19350)

* Minor: added loading state, and error notification in testSuite.

* added the unit test

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/TestSuiteIngestion.tsx

@@ -186,11 +186,14 @@ const TestSuiteIngestion: React.FC<TestSuiteIngestionProps> = ({
         },
       },
     };
+    try {
+      const ingestion = await addIngestionPipeline(ingestionPayload);
 
-    const ingestion = await addIngestionPipeline(ingestionPayload);
-
-    setIngestionData(ingestion);
-    handleIngestionDeploy(ingestion.id);
+      setIngestionData(ingestion);
+      handleIngestionDeploy(ingestion.id);
+    } catch (error) {
+      showErrorToast(error as AxiosError);
+    }
   };
 
   const onUpdateIngestionPipeline = async (

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddTestCaseList/AddTestCaseList.component.test.tsx

@@ -10,7 +10,14 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  queryByAttribute,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import React from 'react';
 import { EntityReference } from '../../../generated/tests/testCase';
 import { AddTestCaseList } from './AddTestCaseList.component';
@@ -102,11 +109,20 @@ describe('AddTestCaseList', () => {
     await act(async () => {
       render(<AddTestCaseList {...mockProps} />);
     });
+    const submitBtn = screen.getByTestId('submit');
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('submit'));
+      fireEvent.click(submitBtn);
+      await waitFor(() => {
+        const loader = queryByAttribute('aria-label', submitBtn, 'loading');
+
+        expect(loader).toBeInTheDocument();
+      });
     });
 
     expect(mockProps.onSubmit).toHaveBeenCalledWith([]);
+    expect(
+      queryByAttribute('aria-label', submitBtn, 'loading')
+    ).not.toBeInTheDocument();
   });
 
   it('does not render submit and cancel buttons when showButton is false', async () => {

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddTestCaseList/AddTestCaseList.component.tsx

@@ -110,7 +110,7 @@ export const AddTestCaseList = ({
   const handleSubmit = async () => {
     setIsLoading(true);
     const testCaseIds = [...(selectedItems?.values() ?? [])];
-    onSubmit?.(testCaseIds);
+    await onSubmit?.(testCaseIds);
     setIsLoading(false);
   };
 

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddTestCaseList/AddTestCaseList.interface.ts

@@ -15,7 +15,7 @@ import { ListTestCaseParamsBySearch } from '../../../rest/testAPI';
 
 export interface AddTestCaseModalProps {
   onCancel?: () => void;
-  onSubmit?: (testCases: TestCase[]) => void;
+  onSubmit?: (testCases: TestCase[]) => void | Promise<void>;
   onChange?: (testCases: TestCase[]) => void;
   existingTest?: EntityReference[];
   cancelText?: string;

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.test.tsx

@@ -18,6 +18,7 @@ import {
   fireEvent,
   render,
   screen,
+  waitFor,
 } from '@testing-library/react';
 import React from 'react';
 import { MOCK_TEST_CASE } from '../../../../mocks/TestSuite.mock';
@@ -68,7 +69,7 @@ jest.mock('../../../common/DeleteWidget/DeleteWidgetModal', () => {
     return (
       visible && (
         <div>
-          DeleteWidgetModal
+          <p>DeleteWidgetModal</p>
           <button onClick={onCancel}>cancel</button>
         </div>
       )
@@ -80,7 +81,7 @@ jest.mock('../../../DataQuality/AddDataQualityTest/EditTestCaseModal', () => {
     return (
       visible && (
         <div>
-          EditTestCaseModal
+          <p>EditTestCaseModal</p>
           <button onClick={onCancel}>cancel</button>
           <button onClick={onUpdate}>submit</button>
         </div>
@@ -88,6 +89,28 @@ jest.mock('../../../DataQuality/AddDataQualityTest/EditTestCaseModal', () => {
     );
   });
 });
+jest.mock('../../../Modals/ConfirmationModal/ConfirmationModal', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ visible, onCancel, onConfirm, isLoading }) => {
+      return (
+        visible && (
+          <div>
+            <p>ConfirmationModal</p>
+            <button onClick={onCancel}>cancel</button>
+            <button onClick={onConfirm}>
+              {isLoading ? (
+                <span data-testid="submit-btn-loading">Loading</span>
+              ) : (
+                ''
+              )}
+              submit
+            </button>
+          </div>
+        )
+      );
+    });
+});
 
 describe('DataQualityTab test', () => {
   it('Component should render', async () => {
@@ -216,6 +239,53 @@ describe('DataQualityTab test', () => {
     expect(deleteButton).toBeInTheDocument();
   });
 
+  it('Remove functionality', async () => {
+    const firstRowData = MOCK_TEST_CASE[0];
+    await act(async () => {
+      render(
+        <DataQualityTab
+          removeFromTestSuite={{
+            testSuite: {
+              id: 'testSuiteId',
+              name: 'testSuiteName',
+            },
+          }}
+          {...mockProps}
+        />
+      );
+    });
+    const tableRows = await screen.findAllByRole('row');
+    const firstRow = tableRows[1];
+    const closeRemoveModel = screen.queryByText('ConfirmationModal');
+    const removeButton = await findByTestId(
+      firstRow,
+      `remove-${firstRowData.name}`
+    );
+
+    expect(removeButton).toBeInTheDocument();
+    expect(closeRemoveModel).not.toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
+    const openRemoveModel = await screen.findByText('ConfirmationModal');
+    const submitBtn = await screen.findByText('submit');
+
+    expect(openRemoveModel).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(submitBtn);
+
+      await waitFor(() => {
+        const loader = screen.getByTestId('submit-btn-loading');
+
+        expect(loader).toBeInTheDocument();
+      });
+    });
+
+    expect(closeRemoveModel).not.toBeInTheDocument();
+  });
+
   it('Edit functionality', async () => {
     const firstRowData = MOCK_TEST_CASE[0];
     await act(async () => {

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx

@@ -88,6 +88,8 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
   const [testCaseStatus, setTestCaseStatus] = useState<
     TestCaseResolutionStatus[]
   >([]);
+  const [isTestCaseRemovalLoading, setIsTestCaseRemovalLoading] =
+    useState(false);
   const isApiSortingEnabled = useRef(false);
 
   const testCaseEditPermission = useMemo(() => {
@@ -131,6 +133,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
   };
 
   const handleConfirmClick = async () => {
+    setIsTestCaseRemovalLoading(true);
     if (isUndefined(removeFromTestSuite)) {
       return;
     }
@@ -143,6 +146,8 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
       setSelectedTestCase(undefined);
     } catch (error) {
       showErrorToast(error as AxiosError);
+    } finally {
+      setIsTestCaseRemovalLoading(false);
     }
   };
 
@@ -514,6 +519,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
             cancelText={t('label.cancel')}
             confirmText={t('label.remove')}
             header={t('label.remove-entity', { entity: t('label.test-case') })}
+            isLoading={isTestCaseRemovalLoading}
             visible={selectedTestCase?.action === 'DELETE'}
             onCancel={handleCancel}
             onConfirm={handleConfirmClick}