Edit Delete App

src/features/dashboard/components/AppsTable/app-actions.cell.tsx

@@ -1,36 +1,40 @@
-import React from 'react';
+import React, { useState } from 'react';
+import styles from './cells.module.scss';
 import { LabelPairedPenSmRegularIcon, LabelPairedTrashSmRegularIcon } from '@deriv/quill-icons';
+import DeleteAppDialog from '../Dialogs/DeleteAppDialog';
+import UpdateAppDialog from '../Dialogs/UpdateAppDialog';
 import CustomTooltip from '@site/src/components/CustomTooltip';
-import clsx from 'clsx';
-import styles from './cells.module.scss';
 
-type TAppActionsCellProps = {
-  openDeleteDialog: () => void;
-  openEditDialog: () => void;
-  flex_end?: boolean;
-};
+const AppActionsCell = () => {
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isUpdateDialogOpen, setUpdateDialogOpen] = useState(false);
+
+  const handleDeleteClick = () => {
+    setDeleteDialogOpen(true);
+  };
+
+  const handleUpdateClick = () => {
+    setUpdateDialogOpen(true);
+  };
 
-const AppActionsCell = ({
-  openDeleteDialog,
-  openEditDialog,
-  flex_end = false,
-}: TAppActionsCellProps) => {
   return (
-    <div
-      className={clsx(styles.appActions, { [styles.flex_end]: flex_end })}
-      data-testid={'app-action-cell'}
-    >
-      <span onClick={openEditDialog} data-testid={'update-app-button'}>
+    <div className={styles.appActions} data-testid={'app-action-cell'}>
+      <div onClick={handleUpdateClick} data-testid={'update-app-button'}>
         <CustomTooltip text='Edit application details'>
           <LabelPairedPenSmRegularIcon />
         </CustomTooltip>
-      </span>
-
-      <span onClick={openDeleteDialog} data-testid={'delete-app-button'}>
-        <CustomTooltip text='Delete application'>
+      </div>
+      <div onClick={handleDeleteClick} data-testid={'delete-app-button'}>
+        <CustomTooltip text='Delete application details'>
           <LabelPairedTrashSmRegularIcon />
         </CustomTooltip>
-      </span>
+      </div>
+      {isDeleteDialogOpen && (
+        <DeleteAppDialog onClose={() => setDeleteDialogOpen(false)} appId={0} />
+      )}
+      {isUpdateDialogOpen && (
+        <UpdateAppDialog onClose={() => setUpdateDialogOpen(false)} app={undefined} />
+      )}
     </div>
   );
 };

src/features/dashboard/components/AppsTable/cells.module.scss

@@ -10,6 +10,10 @@
   }
 }
 
+.actionContainer {
+  margin-right: 10px;
+}
+
 .flex_end {
   justify-content: flex-end;
 }

src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx

@@ -18,12 +18,14 @@ const UpdateAppDialog = ({ app, onClose }: IUpdateAppDialog) => {
   const { send: updateApp, data, error, clear } = useWS('app_update');
   const { getApps } = useAppManager();
 
-  const scopes = scopesArrayToObject(app.scopes);
-  const initialValues: Partial<IRegisterAppForm> = {
-    ...app,
-    ...scopes,
-    app_markup_percentage: String(app.app_markup_percentage),
-  };
+  const scopes = app ? scopesArrayToObject(app.scopes) : {};
+  const initialValues: Partial<IRegisterAppForm> = app
+    ? {
+        ...app,
+        ...scopes,
+        app_markup_percentage: String(app.app_markup_percentage),
+      }
+    : {};
 
   const onOpenChange = useCallback(
     (open: boolean) => {