review comments

distributed-system-analysis · May 18, 2023 · 7d39a0d · 7d39a0d
1 parent 2f35ed5
commit 7d39a0d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 46 deletions.
diff --git a/dashboard/src/actions/keyManagementActions.js b/dashboard/src/actions/keyManagementActions.js
@@ -6,7 +6,7 @@ import API from "../utils/axiosInstance";
 import { showToast } from "./toastActions";
 import { uriTemplate } from "utils/helper";
 
-export const getAPIkeysList = () => async (dispatch, getState) => {
+export const getAPIkeysList = async (dispatch, getState) => {
   try {
     dispatch({ type: TYPES.LOADING });
 
@@ -27,21 +27,20 @@ export const getAPIkeysList = () => async (dispatch, getState) => {
   dispatch({ type: TYPES.COMPLETED });
 };
 
-export const triggerDeleteAPIKey = (id) => async (dispatch, getState) => {
+export const deleteAPIKey = (id) => async (dispatch, getState) => {
   try {
     dispatch({ type: TYPES.LOADING });
     const endpoints = getState().apiEndpoint.endpoints;
     const response = await API.delete(
       uriTemplate(endpoints, "key", { key: id })
     );
 
-    const keyList = [...getState().keyManagement.keyList];
     if (response.status === 200) {
-      const index = keyList.findIndex((item) => item.id === id);
-      keyList.splice(index, 1);
       dispatch({
         type: TYPES.SET_API_KEY_LIST,
-        payload: keyList,
+        payload: getState().keyManagement.keyList.filter(
+          (item) => item.id !== id
+        ),
       });
 
       const message = response.data ?? "Deleted";
@@ -61,7 +60,7 @@ export const sendNewKeyRequest = (label) => async (dispatch, getState) => {
   try {
     dispatch({ type: TYPES.LOADING });
     const endpoints = getState().apiEndpoint.endpoints;
-    const keyList = getState().keyManagement.keyList;
+    const keyList = [...getState().keyManagement.keyList];
 
     const response = await API.post(
       uriTemplate(endpoints, "key", { key: "" }),
@@ -76,7 +75,7 @@ export const sendNewKeyRequest = (label) => async (dispatch, getState) => {
       });
       dispatch(showToast(SUCCESS, "API key created successfully"));
 
-      dispatch(toggleNewAPIModal(false));
+      dispatch(toggleNewAPIKeyModal(false));
       dispatch(setNewKeyLabel(""));
     } else {
       dispatch(showToast(DANGER, response.data.message));
@@ -87,7 +86,7 @@ export const sendNewKeyRequest = (label) => async (dispatch, getState) => {
   dispatch({ type: TYPES.COMPLETED });
 };
 
-export const toggleNewAPIModal = (isOpen) => ({
+export const toggleNewAPIKeyModal = (isOpen) => ({
   type: TYPES.TOGGLE_NEW_KEY_MODAL,
   payload: isOpen,
 });

diff --git a/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx b/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx
@@ -11,8 +11,8 @@ import { useDispatch, useSelector } from "react-redux";
 
 import React from "react";
 import { TrashIcon } from "@patternfly/react-icons";
+import { deleteAPIKey } from "actions/keyManagementActions";
 import { formatDateTime } from "utils/dateFunctions";
-import { triggerDeleteAPIKey } from "actions/keyManagementActions";
 
 const KeyListTable = () => {
   const dispatch = useDispatch();
@@ -24,7 +24,7 @@ const KeyListTable = () => {
   };
 
   const deleteKey = (id) => {
-    dispatch(triggerDeleteAPIKey(id));
+    dispatch(deleteAPIKey(id));
   };
 
   return (
@@ -38,35 +38,33 @@ const KeyListTable = () => {
         </Tr>
       </Thead>
       <Tbody className="keylist-table-body">
-        {keyList.map((item) => {
-          return (
-            <Tr key={item.key}>
-              <Td dataLabel={columnNames.label}>{item.label}</Td>
-              <Td dataLabel={columnNames.created}>
-                {formatDateTime(item.created)}
-              </Td>
-              <Td dataLabel={columnNames.key} className="key-cell">
-                <ClipboardCopy
-                  hoverTip="Copy API key"
-                  clickTip="Copied"
-                  variant="plain"
-                >
-                  {item.key}
-                </ClipboardCopy>
-              </Td>
+        {keyList.map((item) => (
+          <Tr key={item.key}>
+            <Td dataLabel={columnNames.label}>{item.label}</Td>
+            <Td dataLabel={columnNames.created}>
+              {formatDateTime(item.created)}
+            </Td>
+            <Td dataLabel={columnNames.key} className="key-cell">
+              <ClipboardCopy
+                hoverTip="Copy API key"
+                clickTip="Copied"
+                variant="plain"
+              >
+                {item.key}
+              </ClipboardCopy>
+            </Td>
 
-              <Td className="delete-icon-cell">
-                <Button
-                  variant="plain"
-                  aria-label="Delete Action"
-                  onClick={() => deleteKey(item.id)}
-                >
-                  <TrashIcon />
-                </Button>
-              </Td>
-            </Tr>
-          );
-        })}
+            <Td className="delete-icon-cell">
+              <Button
+                variant="plain"
+                aria-label="Delete Action"
+                onClick={() => deleteKey(item.id)}
+              >
+                <TrashIcon />
+              </Button>
+            </Td>
+          </Tr>
+        ))}
       </Tbody>
     </TableComposable>
   );

diff --git a/dashboard/src/modules/components/ProfileComponent/KeyManagement.jsx b/dashboard/src/modules/components/ProfileComponent/KeyManagement.jsx
@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import {
   getAPIkeysList,
   setNewKeyLabel,
-  toggleNewAPIModal,
+  toggleNewAPIKeyModal,
 } from "actions/keyManagementActions";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -16,12 +16,12 @@ const KeyManagementComponent = () => {
   const { idToken } = useSelector((state) => state.apiEndpoint?.keycloak);
   useEffect(() => {
     if (idToken) {
-      dispatch(getAPIkeysList());
+      dispatch(getAPIkeysList);
     }
   }, [dispatch, idToken]);
   const handleModalToggle = () => {
     dispatch(setNewKeyLabel(""));
-    dispatch(toggleNewAPIModal(!isModalOpen));
+    dispatch(toggleNewAPIKeyModal(!isModalOpen));
   };
   return (
     <Card className="key-management-container">

diff --git a/dashboard/src/modules/components/ProfileComponent/NewKeyModal.jsx b/dashboard/src/modules/components/ProfileComponent/NewKeyModal.jsx
@@ -22,9 +22,6 @@ const NewKeyModal = (props) => {
     (state) => state.keyManagement
   );
 
-  const createNewKey = () => {
-    dispatch(sendNewKeyRequest(newKeyLabel));
-  };
   return (
     <Modal
       variant={ModalVariant.small}
@@ -36,7 +33,7 @@ const NewKeyModal = (props) => {
           key="create"
           variant="primary"
           form="modal-with-form-form"
-          onClick={createNewKey}
+          onClick={() => dispatch(sendNewKeyRequest(newKeyLabel))}
         >
           Create
         </Button>,