work on issue 763 (#771)

catalog-rest-service/src/main/resources/ui/src/components/Modals/ConfirmationModal/ConfirmationModal.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Button } from '../../buttons/Button/Button';
+type Props = {
+  cancelText: string;
+  confirmText: string;
+  bodyText: string;
+  header: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+  confirmButtonCss?: string;
+  cancelButtonCss?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+const ConfirmationModal = ({
+  cancelText,
+  confirmText,
+  header,
+  headerClassName = '',
+  bodyClassName = '',
+  footerClassName = '',
+  confirmButtonCss = '',
+  cancelButtonCss = '',
+  onConfirm,
+  onCancel,
+  bodyText,
+}: Props) => {
+  return (
+    <dialog className="tw-modal">
+      <div className="tw-modal-backdrop" />
+      <div className="tw-modal-container tw-w-120">
+        <div className={classNames('tw-modal-header', headerClassName)}>
+          <p className="tw-modal-title">{header}</p>
+        </div>
+        <div className={classNames('tw-modal-body tw-h-28', bodyClassName)}>
+          <p>{bodyText}</p>
+        </div>
+        <div
+          className={classNames(
+            'tw-modal-footer tw-justify-end',
+            footerClassName
+          )}>
+          <Button
+            className={classNames('tw-mr-2', cancelButtonCss)}
+            data-testid="cancel"
+            size="regular"
+            theme="primary"
+            variant="text"
+            onClick={onCancel}>
+            {cancelText}
+          </Button>
+          <Button
+            className={confirmButtonCss}
+            data-testid="save-button"
+            size="regular"
+            theme="primary"
+            type="submit"
+            variant="contained"
+            onClick={onConfirm}>
+            {confirmText}
+          </Button>
+        </div>
+      </div>
+    </dialog>
+  );
+};
+
+export default ConfirmationModal;

catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx

@@ -16,6 +16,7 @@
 */
 
 import { AxiosError, AxiosResponse } from 'axios';
+import classNames from 'classnames';
 import { isNull, lowerCase } from 'lodash';
 import { ServiceCollection, ServiceData, ServiceTypes } from 'Models';
 import React, { useEffect, useState } from 'react';
@@ -39,6 +40,7 @@ import {
   EditObj,
   ServiceDataObj,
 } from '../../components/Modals/AddServiceModal/AddServiceModal';
+import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
 import {
   getServiceDetailsPath,
   TITLE_FOR_NON_ADMIN_ACTION,
@@ -56,6 +58,7 @@ import {
 import { DatabaseService } from '../../generated/entity/services/databaseService';
 import { MessagingService } from '../../generated/entity/services/messagingService';
 import { PipelineService } from '../../generated/entity/services/pipelineService';
+import { useAuth } from '../../hooks/authHooks';
 import useToastContext from '../../hooks/useToastContext';
 import { getCountBadge, getTabClasses } from '../../utils/CommonUtils';
 import { getFrequencyTime, serviceTypeLogo } from '../../utils/ServiceUtils';
@@ -80,7 +83,13 @@ export type ApiData = {
 
 const ServicesPage = () => {
   const showToast = useToastContext();
+  const { isAdminUser, isAuthDisabled } = useAuth();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
+  const [deleteSelection, setDeleteSelection] = useState({
+    id: '',
+    name: '',
+  });
   const [serviceName, setServiceName] =
     useState<ServiceTypes>('databaseServices');
   const [services, setServices] = useState<ServiceRecord>({
@@ -238,6 +247,14 @@ const ServicesPage = () => {
       });
   };
 
+  const handleCancelConfirmationModal = () => {
+    setIsConfirmationModalOpen(false);
+    setDeleteSelection({
+      id: '',
+      name: '',
+    });
+  };
+
   const handleDelete = (id: string) => {
     deleteService(serviceName, id).then((res: AxiosResponse) => {
       if (res.statusText === 'OK') {
@@ -250,6 +267,16 @@ const ServicesPage = () => {
         setServiceList(updatedServiceList);
       }
     });
+
+    handleCancelConfirmationModal();
+  };
+
+  const ConfirmDelete = (id: string, name: string) => {
+    setDeleteSelection({
+      id,
+      name,
+    });
+    setIsConfirmationModalOpen(true);
   };
 
   const getServiceLogo = (serviceType: string): JSX.Element | null => {
@@ -411,7 +438,9 @@ const ServicesPage = () => {
                     position="bottom"
                     title={TITLE_FOR_NON_ADMIN_ACTION}>
                     <Button
-                      className="tw-h-8 tw-rounded tw-mb-2"
+                      className={classNames('tw-h-8 tw-rounded tw-mb-2', {
+                        'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+                      })}
                       data-testid="add-new-user-button"
                       size="small"
                       theme="primary"
@@ -499,7 +528,9 @@ const ServicesPage = () => {
                           <button
                             className="focus:tw-outline-none"
                             data-testid="delete-service"
-                            onClick={() => handleDelete(service.id || '')}>
+                            onClick={() =>
+                              ConfirmDelete(service.id || '', service.name)
+                            }>
                             <SVGIcons
                               alt="delete"
                               icon="icon-delete"
@@ -562,6 +593,18 @@ const ServicesPage = () => {
                 onSave={handleSave}
               />
             )}
+
+            {isConfirmationModalOpen && (
+              <ConfirmationModal
+                bodyText={`You want to delete service ${deleteSelection.name} permanently? This action cannot be reverted.`}
+                cancelText="Discard"
+                confirmButtonCss="tw-bg-error hover:tw-bg-error focus:tw-bg-error"
+                confirmText="Delete"
+                header="Are you sure?"
+                onCancel={handleCancelConfirmationModal}
+                onConfirm={() => handleDelete(deleteSelection.id)}
+              />
+            )}
           </div>
         </PageContainer>
       ) : (