From e173c5932db498c5c1d1eda6fd3ec4f0ac9433cb Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Tue, 27 Jun 2023 17:51:01 +0300 Subject: [PATCH] Web: Client: OAuth: Added view page --- .../OAuth/OAuthDetails/index.js | 89 +++++++++++++++++-- .../categories/developer-tools/OAuth/index.js | 34 +++++-- .../OAuth/sub-components/DeleteDialog.js | 71 +++++++++++++++ .../sub-components/List/TableView/Header.js | 4 +- .../sub-components/List/TableView/Row.js | 45 +++++----- .../sub-components/List/TableView/index.js | 8 +- .../OAuth/sub-components/List/index.js | 8 +- packages/client/src/store/OAuthStore.js | 85 ++++++++---------- 8 files changed, 250 insertions(+), 94 deletions(-) create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/DeleteDialog.js diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js index 296c3669bb..8ee1ac9293 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js @@ -18,28 +18,103 @@ const Container = styled.div` margin-top: 5px; `; +const Property = styled.div` + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 16px; +`; + const OAuthDetails = (props) => { - const { t, setDocumentTitle } = props; + const { t, setDocumentTitle, currentClient } = props; setDocumentTitle("OAuth"); return ( <> - {isMobile ? ( - - ) : ( - Test - )} + + + + + + + + + + + + + + + + + + ); }; -export default inject(({ setup, auth }) => { +export default inject(({ setup, auth, oauthStore }) => { const { settingsStore, setDocumentTitle } = auth; const { theme } = settingsStore; + const { currentClient } = oauthStore; return { theme, setDocumentTitle, + currentClient, }; })(withTranslation(["Common"])(observer(OAuthDetails))); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.js index 03c7918736..1743bbc51d 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.js @@ -13,29 +13,49 @@ import { inject, observer } from "mobx-react"; import { isMobile } from "react-device-detect"; import BreakpointWarning from "SRC_DIR/components/BreakpointWarning"; import List from "./sub-components/List"; +import DeleteDialog from "./sub-components/DeleteDialog"; const OAuth = (props) => { - const { t, setDocumentTitle } = props; + const { + t, + setDocumentTitle, + getClients, + deleteClient, + currentClient, + } = props; + + const [isDeleteOpened, setIsDeleteOpened] = useState(false); + + const closeDeleteModal = () => setIsDeleteOpened(false); + const openDeleteModal = () => setIsDeleteOpened(true); + + useEffect(() => getClients(), []); setDocumentTitle("OAuth"); return ( <> - {isMobile ? ( - - ) : ( - {}} openDeleteModal={() => {}} /> - )} + + ); }; -export default inject(({ setup, auth }) => { +export default inject(({ setup, auth, oauthStore }) => { const { settingsStore, setDocumentTitle } = auth; + const { getClients, deleteClient, currentClient } = oauthStore; const { theme } = settingsStore; return { theme, setDocumentTitle, + getClients, + deleteClient, + currentClient, }; })(withTranslation(["Common"])(observer(OAuth))); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/DeleteDialog.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/DeleteDialog.js new file mode 100644 index 0000000000..822afbfcb8 --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/DeleteDialog.js @@ -0,0 +1,71 @@ +import React, { useEffect } from "react"; +import ModalDialog from "@docspace/components/modal-dialog"; +import Button from "@docspace/components/button"; +import styled from "styled-components"; +import { useTranslation } from "react-i18next"; + +const StyledBodyText = styled.div` + line-height: 20px; +`; + +const Footer = styled.div` + width: 100%; + display: flex; + + button { + width: 100%; + } + button:first-of-type { + margin-right: 10px; + } +`; + +const DeleteDialog = ({ + visible, + onClose, + header, + handleSubmit, + currentClient, +}) => { + const onKeyPress = (e) => + (e.key === "Esc" || e.key === "Escape") && onClose(); + + const { t } = useTranslation(["Common", "EmptyTrashDialog"]); + + useEffect(() => { + window.addEventListener("keyup", onKeyPress); + return () => window.removeEventListener("keyup", onKeyPress); + }); + + const handleDeleteClick = () => { + handleSubmit(currentClient.id); + onClose(); + }; + + return ( + + {`Delete profile`} + + {`Do you want to delete profile: ${currentClient.name}`} + + + +
+
+ + + ); +}; + +export default DeleteDialog; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.js index 11b223df74..efaff96bd2 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.js @@ -84,11 +84,11 @@ const Header = (props) => { setColumns((prevColumns) => prevColumns.map((item, index) => - index === columnIndex ? { ...item, enable: !item.enable } : item + index === columnIndex ? { ...item, enabled: !item.enabled } : item ) ); - const tableColumns = columns.map((c) => c.enable && c.key); + const tableColumns = columns.map((c) => c.enabled && c.key); localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns); } diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.js index ff0d4bfddd..0565cfb206 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.js @@ -45,21 +45,35 @@ const Row = (props) => { const { item, setEnabled, - openSettingsModal, openDeleteModal, - setCurrentProject, + setCurrentClient, hideColumns, } = props; const navigate = useNavigate(); const { t } = useTranslation(["Webhooks", "Common"]); - const [isChecked, setIsChecked] = useState(item.token.enable); + const [isChecked, setIsChecked] = useState(item.enabled); - const redirectToHistory = () => { + const openClientSettings = () => { navigate(window.location.pathname + `/${item.id}`); }; + const handleToggleEnabled = () => { + setEnabled(item.id); + setIsChecked((prevIsChecked) => !prevIsChecked); + }; + + const onSettingsOpen = () => { + setCurrentClient(item); + openClientSettings(); + }; + + const onDeleteOpen = () => { + setCurrentClient(item); + openDeleteModal(); + }; + const handleRowClick = (e) => { if ( e.target.closest(".checkbox") || @@ -72,20 +86,7 @@ const Row = (props) => { return; } - redirectToHistory(); - }; - const handleToggleEnabled = () => { - setEnabled(item.id); - setIsChecked((prevIsChecked) => !prevIsChecked); - }; - - const onSettingsOpen = () => { - setCurrentProject(item); - //openSettingsModal(); - }; - const onDeleteOpen = () => { - setCurrentProject(item); - //openDeleteModal(); + onSettingsOpen(); }; const contextOptions = [ @@ -119,12 +120,12 @@ const Row = (props) => { - {item.general.name} + {item.name} - {item.general.description} + {item.description} @@ -141,7 +142,7 @@ const Row = (props) => { }; export default inject(({ oauthStore }) => { - const { setCurrentProject, setEnabled } = oauthStore; + const { setCurrentClient, setEnabled } = oauthStore; - return { setEnabled, setCurrentProject }; + return { setEnabled, setCurrentClient }; })(observer(Row)); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/index.js index caba6b2627..7284a941b0 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/index.js @@ -42,7 +42,7 @@ const INFO_PANEL_COLUMNS_SIZE = `infoPanelOauthConfigColumnsSize_ver-${TABLE_VER const TableView = (props) => { const { items, - getProjects, + getClients, sectionWidth, viewAs, setViewAs, @@ -82,7 +82,7 @@ const TableView = (props) => { columnStorageName={columnStorageName} columnInfoPanelStorageName={columnInfoPanelStorageName} filesLength={items.length} - fetchMoreFiles={getProjects} + fetchMoreFiles={getClients} hasMoreFiles={false} itemCount={items.length} > @@ -102,7 +102,7 @@ const TableView = (props) => { }; export default inject(({ oauthStore, setup, auth }) => { - const { getProjects } = oauthStore; + const { getClients } = oauthStore; const { viewAs, setViewAs } = setup; const { id: userId } = auth.userStore.user; @@ -110,7 +110,7 @@ export default inject(({ oauthStore, setup, auth }) => { return { viewAs, setViewAs, - getProjects, + getClients, userId, }; })(observer(TableView)); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.js index cc16c8aa1c..6663d3bc2e 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.js @@ -5,12 +5,12 @@ import { Consumer } from "@docspace/components/utils/context"; import TableView from "./TableView"; -const List = ({ viewAs, openSettingsModal, openDeleteModal, projects }) => { +const List = ({ viewAs, openSettingsModal, openDeleteModal, clients }) => { return ( {(context) => ( { }; export default inject(({ setup, oauthStore }) => { const { viewAs } = setup; - const { projects } = oauthStore; + const { clients } = oauthStore; return { viewAs, - projects, + clients, }; })(observer(List)); diff --git a/packages/client/src/store/OAuthStore.js b/packages/client/src/store/OAuthStore.js index 24d2aad2e4..8642f4ac20 100644 --- a/packages/client/src/store/OAuthStore.js +++ b/packages/client/src/store/OAuthStore.js @@ -1,78 +1,67 @@ import { makeAutoObservable, runInAction } from "mobx"; -const projects = [...Array(10)].map((value, index) => { +const clients = [...Array(5)].map((value, index) => { return { id: index, - general: { - name: `Project ${index}`, - description: `Description ${index}`, - }, - credentials: { - client_id: "random_client_id", - client_secret: "random_client_secret", - }, - token: { - enable: true, - bearer_only: true, - public_client: false, - }, - scopes: { - files: { - read: true, - write: true, - }, - workspaces: { - read: false, - write: false, - }, - users: { - read: false, - write: false, - }, - }, - links: { - installation_url: "https://example.com/install", - redirect_url: "https://example.com/redirect", - allowed_origins: "https://example.com", - }, + name: `46192a5a-e19c-${index}`, + description: "Demo description", + client_id: "46192a5a-e19c-453c-aec3-50617290edbe", + client_secret: "e5ff57e4-4ce2-4dac-a265-88bc7e726684", + root_url: "https://google.com", + redirect_uris: ["https://openidconnect.net/callback"], + allowed_origins: [ + "https://google.com", + "https://openidconnect.net/callback", + ], + scopes: [ + "files:write", + "accounts:write", + "files:read", + "account.self:write", + "rooms:read", + "accounts:read", + "account.self:read", + "rooms:write", + ], + enabled: true, }; }); class OAuthStore { - projects = projects; - currentProject = {}; + clients = []; + currentClient = clients[0]; constructor() { makeAutoObservable(this); } - getProjects = () => { - this.projects = projects; + getClients = () => { + this.clients = clients; }; - setCurrentProject = (project) => { - this.currentProject = project; + setCurrentClient = (client) => { + this.currentClient = client; }; - addProject = (project) => { - this.projects = [...this.projects, project]; + addClient = (client) => { + this.clients = [...this.clients, client]; }; setEnabled = (id) => { - const index = this.projects.findIndex((proj) => proj.id === id); + const index = this.clients.findIndex((proj) => proj.id === id); - this.projects[index].token.enable = !this.projects[index].token.enable; + this.clients[index].enabled = !this.clients[index].enabled; }; - deleteProject = (id) => { - this.projects = this.projects.filter((proj) => proj.id !== id); + deleteClient = (id) => { + this.clients = this.clients.filter((proj) => proj.id !== id); }; - editProject = (project) => { - const index = this.projects.findIndex((proj) => proj.id === project.id); + editClient = (client) => { + const index = this.clients.findIndex((proj) => proj.id === client.id); runInAction(() => { - this.projects[index] = project; + this.clients[index] = client; }); }; }