From a0351f7205a69d4dbfa8ea41fc5db4b29b333054 Mon Sep 17 00:00:00 2001 From: MVarshini Date: Thu, 11 May 2023 15:15:34 +0530 Subject: [PATCH 1/5] PBENCH-1131 Dashboard API Key Management Develop a UI page where a logged-in user can generate a new key for their account and manage existing keys. GET API keys New API key Modal --- dashboard/src/actions/keyManagementActions.js | 98 +++++++++++++++++++ dashboard/src/actions/types.js | 5 + .../src/assets/constants/toastConstants.js | 1 + .../ProfileComponent/KeyListTable.jsx | 79 +++++++++++++++ .../ProfileComponent/KeyManagement.jsx | 46 +++++++++ .../ProfileComponent/NewKeyModal.jsx | 63 ++++++++++++ .../components/ProfileComponent/index.jsx | 10 +- .../components/ProfileComponent/index.less | 42 ++++++++ dashboard/src/reducers/index.js | 2 + .../src/reducers/keyManagementReducer.js | 32 ++++++ 10 files changed, 376 insertions(+), 2 deletions(-) create mode 100644 dashboard/src/actions/keyManagementActions.js create mode 100644 dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx create mode 100644 dashboard/src/modules/components/ProfileComponent/KeyManagement.jsx create mode 100644 dashboard/src/modules/components/ProfileComponent/NewKeyModal.jsx create mode 100644 dashboard/src/reducers/keyManagementReducer.js diff --git a/dashboard/src/actions/keyManagementActions.js b/dashboard/src/actions/keyManagementActions.js new file mode 100644 index 0000000000..340c84ebdb --- /dev/null +++ b/dashboard/src/actions/keyManagementActions.js @@ -0,0 +1,98 @@ +import * as TYPES from "actions/types"; + +import { DANGER, ERROR_MSG, SUCCESS } from "assets/constants/toastConstants"; + +import API from "../utils/axiosInstance"; +import { showToast } from "./toastActions"; +import { uriTemplate } from "utils/helper"; + +export const getAPIkeysList = () => async (dispatch, getState) => { + try { + dispatch({ type: TYPES.LOADING }); + + const endpoints = getState().apiEndpoint.endpoints; + const response = await API.get(uriTemplate(endpoints, "key", { key: "" })); + + if (response.status === 200) { + dispatch({ + type: TYPES.SET_API_KEY_LIST, + payload: response.data, + }); + } else { + dispatch(showToast(DANGER, ERROR_MSG)); + } + } catch (error) { + dispatch(showToast(DANGER, error)); + } + dispatch({ type: TYPES.COMPLETED }); +}; + +export const triggerDeleteAPIKey = (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, + }); + + const message = response.data ?? "Deleted"; + const toastMsg = message?.charAt(0).toUpperCase() + message?.slice(1); + + dispatch(showToast(SUCCESS, toastMsg)); + } else { + dispatch(showToast(DANGER, ERROR_MSG)); + } + } catch (error) { + dispatch(showToast(DANGER, error)); + } + dispatch({ type: TYPES.COMPLETED }); +}; + +export const sendNewKeyRequest = (label) => async (dispatch, getState) => { + try { + dispatch({ type: TYPES.LOADING }); + const endpoints = getState().apiEndpoint.endpoints; + const keyList = getState().keyManagement.keyList; + + const response = await API.post( + uriTemplate(endpoints, "key", { key: "" }), + null, + { params: { label } } + ); + if (response.status === 201) { + keyList.push(response.data); + dispatch({ + type: TYPES.SET_API_KEY_LIST, + payload: keyList, + }); + dispatch(showToast(SUCCESS, "API key created successfully")); + + dispatch(toggleNewAPIModal(false)); + dispatch(setNewKeyLabel("")); + } else { + dispatch(showToast(DANGER, response.data.message)); + } + } catch { + dispatch(showToast(DANGER, ERROR_MSG)); + } + dispatch({ type: TYPES.COMPLETED }); +}; + +export const toggleNewAPIModal = (isOpen) => ({ + type: TYPES.TOGGLE_NEW_KEY_MODAL, + payload: isOpen, +}); + +export const setNewKeyLabel = (label) => ({ + type: TYPES.SET_NEW_KEY_LABEL, + payload: label, +}); diff --git a/dashboard/src/actions/types.js b/dashboard/src/actions/types.js index 001064790b..543ba03456 100644 --- a/dashboard/src/actions/types.js +++ b/dashboard/src/actions/types.js @@ -52,3 +52,8 @@ export const UPDATE_TOC_LOADING = "UPDATE_TOC_LOADING"; /* SIDEBAR */ export const SET_ACTIVE_MENU_ITEM = "SET_ACTIVE_MENU_ITEM"; + +/* KEY MANAGEMENT */ +export const SET_API_KEY_LIST = "SET_API_KEY_LIST"; +export const TOGGLE_NEW_KEY_MODAL = "TOGGLE_NEW_KEY_MODAL"; +export const SET_NEW_KEY_LABEL = "SET_NEW_KEY_LABEL"; diff --git a/dashboard/src/assets/constants/toastConstants.js b/dashboard/src/assets/constants/toastConstants.js index 1de50fbef6..96c42e0f53 100644 --- a/dashboard/src/assets/constants/toastConstants.js +++ b/dashboard/src/assets/constants/toastConstants.js @@ -1,2 +1,3 @@ export const DANGER = "danger"; export const ERROR_MSG = "Something went wrong!"; +export const SUCCESS = "success"; diff --git a/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx b/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx new file mode 100644 index 0000000000..bb6d05212f --- /dev/null +++ b/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx @@ -0,0 +1,79 @@ +import { + Button, + ClipboardCopy, + ClipboardCopyButton, +} from "@patternfly/react-core"; +import { + TableComposable, + Tbody, + Td, + Th, + Thead, + Tr, +} from "@patternfly/react-table"; +import { useDispatch, useSelector } from "react-redux"; + +import React from "react"; +import { TrashIcon } from "@patternfly/react-icons"; +import { formatDateTime } from "utils/dateFunctions"; +import { triggerDeleteAPIKey } from "actions/keyManagementActions"; + +const KeyListTable = () => { + const dispatch = useDispatch(); + const keyList = useSelector((state) => state.keyManagement.keyList); + const columnNames = { + label: "Label", + created: "Created Date & Time", + key: "API key", + }; + + const deleteKey = (id) => { + dispatch(triggerDeleteAPIKey(id)); + }; + + return ( + + + + {columnNames.label} + {columnNames.created} + {columnNames.key} + + + + + {keyList.map((item) => { + return ( + + {item.label} + + {formatDateTime(item.created)} + + + + {item.key} + + + + + + + + ); + })} + + + ); +}; + +export default KeyListTable; diff --git a/dashboard/src/modules/components/ProfileComponent/KeyManagement.jsx b/dashboard/src/modules/components/ProfileComponent/KeyManagement.jsx new file mode 100644 index 0000000000..939c996125 --- /dev/null +++ b/dashboard/src/modules/components/ProfileComponent/KeyManagement.jsx @@ -0,0 +1,46 @@ +import { Button, Card, CardBody } from "@patternfly/react-core"; +import React, { useEffect } from "react"; +import { + getAPIkeysList, + setNewKeyLabel, + toggleNewAPIModal, +} from "actions/keyManagementActions"; +import { useDispatch, useSelector } from "react-redux"; + +import KeyListTable from "./KeyListTable"; +import NewKeyModal from "./NewKeyModal"; + +const KeyManagementComponent = () => { + const dispatch = useDispatch(); + const isModalOpen = useSelector((state) => state.keyManagement.isModalOpen); + const { idToken } = useSelector((state) => state.apiEndpoint?.keycloak); + useEffect(() => { + if (idToken) { + dispatch(getAPIkeysList()); + } + }, [dispatch, idToken]); + const handleModalToggle = () => { + dispatch(setNewKeyLabel("")); + dispatch(toggleNewAPIModal(!isModalOpen)); + }; + return ( + + +
+

API Keys

+ +
+

+ This is a list of API keys associated with your account. Remove any + keys that you do not recognize. +

+ + + + + ); +}; + +export default KeyManagementComponent; diff --git a/dashboard/src/modules/components/ProfileComponent/NewKeyModal.jsx b/dashboard/src/modules/components/ProfileComponent/NewKeyModal.jsx new file mode 100644 index 0000000000..540014069a --- /dev/null +++ b/dashboard/src/modules/components/ProfileComponent/NewKeyModal.jsx @@ -0,0 +1,63 @@ +import "./index.less"; + +import { + Button, + Form, + FormGroup, + Modal, + ModalVariant, + TextInput, +} from "@patternfly/react-core"; +import { + sendNewKeyRequest, + setNewKeyLabel, +} from "actions/keyManagementActions"; +import { useDispatch, useSelector } from "react-redux"; + +import React from "react"; + +const NewKeyModal = (props) => { + const dispatch = useDispatch(); + const { isModalOpen, newKeyLabel } = useSelector( + (state) => state.keyManagement + ); + + const createNewKey = () => { + dispatch(sendNewKeyRequest(newKeyLabel)); + }; + return ( + + Create + , + , + ]} + > +
+ + dispatch(setNewKeyLabel(value))} + /> + +
+ + ); +}; + +export default NewKeyModal; diff --git a/dashboard/src/modules/components/ProfileComponent/index.jsx b/dashboard/src/modules/components/ProfileComponent/index.jsx index 076c97b669..16df840e72 100644 --- a/dashboard/src/modules/components/ProfileComponent/index.jsx +++ b/dashboard/src/modules/components/ProfileComponent/index.jsx @@ -1,4 +1,5 @@ -import React from "react"; +import "./index.less"; + import { Card, CardBody, @@ -12,7 +13,9 @@ import { isValidDate, } from "@patternfly/react-core"; import { KeyIcon, UserAltIcon } from "@patternfly/react-icons"; -import "./index.less"; + +import KeyManagementComponent from "./KeyManagement"; +import React from "react"; import avatar from "assets/images/avatar.jpg"; import { useKeycloak } from "@react-keycloak/web"; @@ -104,6 +107,9 @@ const ProfileComponent = () => { + + + diff --git a/dashboard/src/modules/components/ProfileComponent/index.less b/dashboard/src/modules/components/ProfileComponent/index.less index 56ee689fce..f3167f8edf 100644 --- a/dashboard/src/modules/components/ProfileComponent/index.less +++ b/dashboard/src/modules/components/ProfileComponent/index.less @@ -61,3 +61,45 @@ font-weight: 700; } } + +.key-management-container { + margin-top: 2vh; + .key-desc { + margin-bottom: 2vh; + } + .heading-wrapper { + display: flex; + justify-content: space-between; + .heading-title { + font-weight: 700; + } + } + .keylist-table-body { + .key-cell { + width: 30vw; + overflow: hidden; + white-space: nowrap; + display: block; + text-overflow: ellipsis; + } + .pf-c-clipboard-copy__group { + input { + background-color: transparent; + border: 1px solid transparent; + } + button { + background-color: transparent; + } + input:focus, + input:focus-visible { + outline: none; + } + button::after { + border: 1px solid transparent; + } + svg { + fill: #6a6373; + } + } + } +} diff --git a/dashboard/src/reducers/index.js b/dashboard/src/reducers/index.js index 2172abda14..7ddcdcbd3b 100644 --- a/dashboard/src/reducers/index.js +++ b/dashboard/src/reducers/index.js @@ -1,5 +1,6 @@ import DatasetListReducer from "./datasetListReducer"; import EndpointReducer from "./endpointReducer"; +import KeyManagementReducer from "./keyManagementReducer"; import LoadingReducer from "./loadingReducer"; import NavbarReducer from "./navbarReducer"; import OverviewReducer from "./overviewReducer"; @@ -17,4 +18,5 @@ export default combineReducers({ overview: OverviewReducer, tableOfContent: TableOfContentReducer, sidebar: SidebarReducer, + keyManagement: KeyManagementReducer, }); diff --git a/dashboard/src/reducers/keyManagementReducer.js b/dashboard/src/reducers/keyManagementReducer.js new file mode 100644 index 0000000000..8a88590ba6 --- /dev/null +++ b/dashboard/src/reducers/keyManagementReducer.js @@ -0,0 +1,32 @@ +import * as TYPES from "actions/types"; + +const initialState = { + keyList: [], + isModalOpen: false, + newKeyLabel: "", +}; + +const KeyManagementReducer = (state = initialState, action = {}) => { + const { type, payload } = action; + switch (type) { + case TYPES.SET_API_KEY_LIST: + return { + ...state, + keyList: payload, + }; + case TYPES.TOGGLE_NEW_KEY_MODAL: + return { + ...state, + isModalOpen: payload, + }; + case TYPES.SET_NEW_KEY_LABEL: + return { + ...state, + newKeyLabel: payload, + }; + default: + return state; + } +}; + +export default KeyManagementReducer; From cb0488a7872a1cbc97a9a96c0f2c8662ec2d64b1 Mon Sep 17 00:00:00 2001 From: MVarshini Date: Wed, 17 May 2023 00:43:35 +0530 Subject: [PATCH 2/5] removed unused var --- .../modules/components/ProfileComponent/KeyListTable.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx b/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx index bb6d05212f..8a37148f7b 100644 --- a/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx +++ b/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx @@ -1,8 +1,4 @@ -import { - Button, - ClipboardCopy, - ClipboardCopyButton, -} from "@patternfly/react-core"; +import { Button, ClipboardCopy } from "@patternfly/react-core"; import { TableComposable, Tbody, From 2f35ed5392a64ffec2e07df8cdc4f1032f187ad3 Mon Sep 17 00:00:00 2001 From: MVarshini Date: Wed, 17 May 2023 00:55:29 +0530 Subject: [PATCH 3/5] prettier check --- dashboard/src/modules/components/ProfileComponent/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/src/modules/components/ProfileComponent/index.less b/dashboard/src/modules/components/ProfileComponent/index.less index f3167f8edf..3d6121eace 100644 --- a/dashboard/src/modules/components/ProfileComponent/index.less +++ b/dashboard/src/modules/components/ProfileComponent/index.less @@ -91,7 +91,7 @@ background-color: transparent; } input:focus, - input:focus-visible { + input:focus-visible { outline: none; } button::after { From 7d39a0dde55f786950fd90932df32578481a36e0 Mon Sep 17 00:00:00 2001 From: MVarshini Date: Thu, 18 May 2023 17:35:17 +0530 Subject: [PATCH 4/5] review comments --- dashboard/src/actions/keyManagementActions.js | 17 +++--- .../ProfileComponent/KeyListTable.jsx | 58 +++++++++---------- .../ProfileComponent/KeyManagement.jsx | 6 +- .../ProfileComponent/NewKeyModal.jsx | 5 +- 4 files changed, 40 insertions(+), 46 deletions(-) diff --git a/dashboard/src/actions/keyManagementActions.js b/dashboard/src/actions/keyManagementActions.js index 340c84ebdb..5399f0a0cd 100644 --- 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,7 +27,7 @@ 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; @@ -35,13 +35,12 @@ export const triggerDeleteAPIKey = (id) => async (dispatch, getState) => { 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 index 8a37148f7b..9d0a88c74a 100644 --- 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 = () => { - {keyList.map((item) => { - return ( - - {item.label} - - {formatDateTime(item.created)} - - - - {item.key} - - + {keyList.map((item) => ( + + {item.label} + + {formatDateTime(item.created)} + + + + {item.key} + + - - - - - ); - })} + + + + + ))} ); diff --git a/dashboard/src/modules/components/ProfileComponent/KeyManagement.jsx b/dashboard/src/modules/components/ProfileComponent/KeyManagement.jsx index 939c996125..5395eb9f6d 100644 --- 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 ( diff --git a/dashboard/src/modules/components/ProfileComponent/NewKeyModal.jsx b/dashboard/src/modules/components/ProfileComponent/NewKeyModal.jsx index 540014069a..f7d5fbbd77 100644 --- 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 ( { key="create" variant="primary" form="modal-with-form-form" - onClick={createNewKey} + onClick={() => dispatch(sendNewKeyRequest(newKeyLabel))} > Create , From 4ca598c27c3d91b74e7dab95c80211ae341011c8 Mon Sep 17 00:00:00 2001 From: MVarshini Date: Thu, 18 May 2023 17:39:27 +0530 Subject: [PATCH 5/5] delete function name update --- .../modules/components/ProfileComponent/KeyListTable.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx b/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx index 9d0a88c74a..587ed5fcfa 100644 --- a/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx +++ b/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx @@ -23,10 +23,6 @@ const KeyListTable = () => { key: "API key", }; - const deleteKey = (id) => { - dispatch(deleteAPIKey(id)); - }; - return ( @@ -58,7 +54,7 @@ const KeyListTable = () => {