From fbaace1941c283c24c8725556b1dd26b0f35a6ab Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Tue, 27 Jun 2023 10:10:13 +0300 Subject: [PATCH] Web: Client: PortalSettings: Fixed OAuth settings page --- .../OAuth/sub-components/List/RowView/Row.js | 109 ------------------ .../sub-components/List/RowView/RowContent.js | 78 ------------- .../sub-components/List/RowView/index.js | 60 ---------- .../TableView/{TableHeader.js => Header.js} | 35 ++++-- .../List/TableView/{TableRow.js => Row.js} | 76 ++++++------ .../sub-components/List/TableView/index.js | 37 +++--- .../OAuth/sub-components/List/index.js | 32 ++--- packages/client/src/store/OAuthStore.js | 80 +++++++++++++ packages/client/src/store/index.js | 4 + 9 files changed, 171 insertions(+), 340 deletions(-) delete mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.js delete mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.js delete mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.js rename packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/{TableHeader.js => Header.js} (79%) rename packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/{TableRow.js => Row.js} (67%) create mode 100644 packages/client/src/store/OAuthStore.js diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.js deleted file mode 100644 index fcc13b3ebc..0000000000 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.js +++ /dev/null @@ -1,109 +0,0 @@ -import React, { useState } from "react"; -import { inject, observer } from "mobx-react"; - -import { Row as ComponentRow } from "@docspace/components/row"; - -import { RowContent } from "./RowContent"; - -import SettingsIcon from "PUBLIC_DIR/images/catalog.settings.react.svg?url"; -import HistoryIcon from "PUBLIC_DIR/images/history.react.svg?url"; -import DeleteIcon from "PUBLIC_DIR/images/delete.react.svg?url"; - -import { useNavigate } from "react-router-dom"; -import { useTranslation } from "react-i18next"; - -export const Row = (props) => { - const { - webhook, - sectionWidth, - toggleEnabled, - openSettingsModal, - openDeleteModal, - setCurrentWebhook, - } = props; - const navigate = useNavigate(); - const { t } = useTranslation(["Webhooks", "Common"]); - - const [isChecked, setIsChecked] = useState(webhook.enabled); - - const handleToggleEnabled = () => { - toggleEnabled(webhook); - setIsChecked((prevIsChecked) => !prevIsChecked); - }; - - const redirectToHistory = () => { - navigate(window.location.pathname + `/${webhook.id}`); - }; - const handleRowClick = (e) => { - if ( - e.target.closest(".table-container_row-context-menu-wrapper") || - e.target.closest(".toggleButton") || - e.target.closest(".row_context-menu-wrapper") || - e.detail === 0 - ) { - return; - } - - redirectToHistory(); - }; - - const onSettingsOpen = () => { - setCurrentWebhook(webhook); - openSettingsModal(); - }; - const onDeleteOpen = () => { - setCurrentWebhook(webhook); - openDeleteModal(); - }; - - const contextOptions = [ - { - key: "Settings dropdownItem", - label: t("Common:Settings"), - icon: SettingsIcon, - onClick: onSettingsOpen, - }, - { - key: "Webhook history dropdownItem", - label: t("WebhookHistory"), - icon: HistoryIcon, - onClick: redirectToHistory, - }, - { - key: "Separator dropdownItem", - isSeparator: true, - }, - { - key: "Delete webhook dropdownItem", - label: t("DeleteWebhook"), - icon: DeleteIcon, - onClick: onDeleteOpen, - }, - ]; - - return ( - <> - - - - - ); -}; - -export default inject(({ webhooksStore }) => { - const { toggleEnabled, deleteWebhook, editWebhook, setCurrentWebhook } = - webhooksStore; - - return { toggleEnabled, deleteWebhook, editWebhook, setCurrentWebhook }; -})(observer(Row)); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.js deleted file mode 100644 index 1bdbca8ae2..0000000000 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -import Text from "@docspace/components/text"; -import { RowContent as ComponentRowContent } from "@docspace/components/row-content"; -import ToggleButton from "@docspace/components/toggle-button"; - -//import StatusBadge from "../../StatusBadge"; - -import { isMobileOnly } from "react-device-detect"; - -const StyledRowContent = styled(ComponentRowContent)` - display: flex; - padding-bottom: 10px; - - .rowMainContainer { - height: 100%; - width: 100%; - } - - .mainIcons { - min-width: 76px; - } -`; - -const ContentWrapper = styled.div` - display: flex; - flex-direction: column; - justify-items: center; -`; - -const ToggleButtonWrapper = styled.div` - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - margin-left: -52px; -`; - -const FlexWrapper = styled.div` - display: flex; -`; - -export const RowContent = ({ - sectionWidth, - webhook, - isChecked, - handleToggleEnabled, -}) => { - return ( - - - - - {webhook.name} - - {/* */} - - - {!isMobileOnly && ( - - {webhook.uri} - - )} - - - - - - - ); -}; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.js deleted file mode 100644 index 253f7e761f..0000000000 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useEffect } from "react"; -import styled from "styled-components"; -import { inject, observer } from "mobx-react"; - -import { isMobile } from "react-device-detect"; - -import RowContainer from "@docspace/components/row-container"; - -import Row from "./Row"; - -const StyledRowContainer = styled(RowContainer)` - margin-top: 16px; -`; - -const RowView = (props) => { - const { - webhooks, - sectionWidth, - viewAs, - setViewAs, - openSettingsModal, - openDeleteModal, - } = props; - - useEffect(() => { - if (viewAs !== "table" && viewAs !== "row") return; - - if (sectionWidth < 1025 || isMobile) { - viewAs !== "row" && setViewAs("row"); - } else { - viewAs !== "table" && setViewAs("table"); - } - }, [sectionWidth]); - - return ( - - {webhooks.map((webhook) => ( - - ))} - - ); -}; - -export default inject(({ webhooksStore, setup }) => { - const { webhooks } = webhooksStore; - - const { viewAs, setViewAs } = setup; - - return { - webhooks, - viewAs, - setViewAs, - }; -})(observer(RowView)); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.js similarity index 79% rename from packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableHeader.js rename to packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.js index 9786e9e223..11b223df74 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableHeader.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.js @@ -1,11 +1,11 @@ import React, { useState } from "react"; -import { TableHeader as Header } from "@docspace/components/table-container/TableHeader"; +import TableHeader from "@docspace/components/table-container/TableHeader"; import { useTranslation } from "react-i18next"; import { inject, observer } from "mobx-react"; -const TABLE_VERSION = "5"; -const TABLE_COLUMNS = `webhooksConfigColumns_ver-${TABLE_VERSION}`; +const TABLE_VERSION = "1"; +const TABLE_COLUMNS = `oauthConfigColumns_ver-${TABLE_VERSION}`; const getColumns = (defaultColumns, userId) => { const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`); @@ -26,7 +26,7 @@ const getColumns = (defaultColumns, userId) => { } }; -const TableHeader = (props) => { +const Header = (props) => { const { userId, sectionWidth, @@ -38,6 +38,15 @@ const TableHeader = (props) => { const { t } = useTranslation(["Webhooks", "Common"]); const defaultColumns = [ + { + key: "Logo", + title: "Logo", + enable: true, + active: true, + resizable: false, + defaultSize: 64, + onChange: onColumnChange, + }, { key: "Name", title: t("Common:Name"), @@ -49,17 +58,19 @@ const TableHeader = (props) => { onChange: onColumnChange, }, { - key: "URL", - title: t("URL"), - enable: true, + key: "Description", + title: "Description", resizable: true, + enable: true, + minWidth: 150, onChange: onColumnChange, }, { - key: "State", - title: t("State"), + key: "Enable", + title: "Enable", enable: true, - resizable: true, + resizable: false, + defaultSize: 64, onChange: onColumnChange, }, ]; @@ -82,7 +93,7 @@ const TableHeader = (props) => { } return ( -
{ return { userId: auth.userStore.user.id, }; -})(observer(TableHeader)); +})(observer(Header)); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableRow.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.js similarity index 67% rename from packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableRow.js rename to packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.js index 2191a85e1e..ff0d4bfddd 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableRow.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { TableRow as Row } from "@docspace/components/table-container/TableRow"; +import TableRow from "@docspace/components/table-container/TableRow"; import TableCell from "@docspace/components/table-container/TableCell"; import Text from "@docspace/components/text"; @@ -8,6 +8,7 @@ import ToggleButton from "@docspace/components/toggle-button"; import SettingsIcon from "PUBLIC_DIR/images/catalog.settings.react.svg?url"; import HistoryIcon from "PUBLIC_DIR/images/history.react.svg?url"; import DeleteIcon from "PUBLIC_DIR/images/delete.react.svg?url"; +import LinuxIcon from "PUBLIC_DIR/images/linux.react.svg?url"; //import StatusBadge from "../../StatusBadge"; import { useNavigate } from "react-router-dom"; @@ -19,7 +20,7 @@ const StyledWrapper = styled.div` display: contents; `; -const StyledTableRow = styled(Row)` +const StyledTableRow = styled(TableRow)` .table-container_cell { padding-right: 30px; text-overflow: ellipsis; @@ -28,30 +29,35 @@ const StyledTableRow = styled(Row)` .mr-8 { margin-right: 8px; } + .textOverflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + + .toggleButton { + display: contents; + } `; -const TableRow = (props) => { +const Row = (props) => { const { - webhook, - toggleEnabled, + item, + setEnabled, openSettingsModal, openDeleteModal, - setCurrentWebhook, + setCurrentProject, hideColumns, } = props; const navigate = useNavigate(); const { t } = useTranslation(["Webhooks", "Common"]); - const [isChecked, setIsChecked] = useState(webhook.enabled); + const [isChecked, setIsChecked] = useState(item.token.enable); const redirectToHistory = () => { - navigate(window.location.pathname + `/${webhook.id}`); + navigate(window.location.pathname + `/${item.id}`); }; const handleRowClick = (e) => { @@ -69,39 +75,33 @@ const TableRow = (props) => { redirectToHistory(); }; const handleToggleEnabled = () => { - toggleEnabled(webhook); + setEnabled(item.id); setIsChecked((prevIsChecked) => !prevIsChecked); }; const onSettingsOpen = () => { - setCurrentWebhook(webhook); - openSettingsModal(); + setCurrentProject(item); + //openSettingsModal(); }; const onDeleteOpen = () => { - setCurrentWebhook(webhook); - openDeleteModal(); + setCurrentProject(item); + //openDeleteModal(); }; const contextOptions = [ { - key: "Settings dropdownItem", + key: "settings", label: t("Common:Settings"), icon: SettingsIcon, onClick: onSettingsOpen, }, - { - key: "Webhook history dropdownItem", - label: t("WebhookHistory"), - icon: HistoryIcon, - onClick: redirectToHistory, - }, { key: "Separator dropdownItem", isSeparator: true, }, { - key: "Delete webhook dropdownItem", - label: t("DeleteWebhook"), + key: "delete", + label: t("Common:Delete"), icon: DeleteIcon, onClick: onDeleteOpen, }, @@ -115,26 +115,21 @@ const TableRow = (props) => { hideColumns={hideColumns} > - - {webhook.name}{" "} - - {/* */} + - - {webhook.uri} + + {item.general.name} + + + + + {item.general.description} @@ -145,11 +140,8 @@ const TableRow = (props) => { ); }; -export default inject(({ webhooksStore }) => { - const { toggleEnabled, setCurrentWebhook } = webhooksStore; +export default inject(({ oauthStore }) => { + const { setCurrentProject, setEnabled } = oauthStore; - return { - toggleEnabled, - setCurrentWebhook, - }; -})(observer(TableRow)); + return { setEnabled, setCurrentProject }; +})(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 d0367f0a46..caba6b2627 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 @@ -7,8 +7,8 @@ import styled from "styled-components"; import TableContainer from "@docspace/components/table-container/TableContainer"; import TableBody from "@docspace/components/table-container/TableBody"; -import TableRow from "./TableRow"; -import TableHeader from "./TableHeader"; +import Row from "./Row"; +import Header from "./Header"; import { Base } from "@docspace/components/themes"; @@ -35,14 +35,14 @@ const TableWrapper = styled(TableContainer)` TableWrapper.defaultProps = { theme: Base }; -const TABLE_VERSION = "5"; -const COLUMNS_SIZE = `webhooksConfigColumnsSize_ver-${TABLE_VERSION}`; -const INFO_PANEL_COLUMNS_SIZE = `infoPanelWebhooksConfigColumnsSize_ver-${TABLE_VERSION}`; +const TABLE_VERSION = "1"; +const COLUMNS_SIZE = `oauthConfigColumnsSize_ver-${TABLE_VERSION}`; +const INFO_PANEL_COLUMNS_SIZE = `infoPanelOauthConfigColumnsSize_ver-${TABLE_VERSION}`; const TableView = (props) => { const { - webhooks, - loadWebhooks, + items, + getProjects, sectionWidth, viewAs, setViewAs, @@ -68,7 +68,7 @@ const TableView = (props) => { return ( - { infoPanelVisible={false} columnStorageName={columnStorageName} columnInfoPanelStorageName={columnInfoPanelStorageName} - filesLength={webhooks.length} - fetchMoreFiles={loadWebhooks} + filesLength={items.length} + fetchMoreFiles={getProjects} hasMoreFiles={false} - itemCount={webhooks.length} + itemCount={items.length} > - {webhooks.map((webhook, index) => ( - ( + { ); }; -export default inject(({ webhooksStore, setup, auth }) => { - const { webhooks, loadWebhooks } = webhooksStore; +export default inject(({ oauthStore, setup, auth }) => { + const { getProjects } = oauthStore; const { viewAs, setViewAs } = setup; const { id: userId } = auth.userStore.user; return { - webhooks, viewAs, setViewAs, - loadWebhooks, + getProjects, 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 17f9245c77..cc16c8aa1c 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 @@ -4,35 +4,27 @@ import { inject, observer } from "mobx-react"; import { Consumer } from "@docspace/components/utils/context"; import TableView from "./TableView"; -import RowView from "./RowView"; - -const List = (props) => { - const { viewAs, openSettingsModal, openDeleteModal } = props; +const List = ({ viewAs, openSettingsModal, openDeleteModal, projects }) => { return ( - {(context) => - viewAs === "table" ? ( - - ) : ( - - ) - } + {(context) => ( + + )} ); }; -export default inject(({ setup }) => { +export default inject(({ setup, oauthStore }) => { const { viewAs } = setup; + const { projects } = oauthStore; return { viewAs, + projects, }; })(observer(List)); diff --git a/packages/client/src/store/OAuthStore.js b/packages/client/src/store/OAuthStore.js new file mode 100644 index 0000000000..24d2aad2e4 --- /dev/null +++ b/packages/client/src/store/OAuthStore.js @@ -0,0 +1,80 @@ +import { makeAutoObservable, runInAction } from "mobx"; + +const projects = [...Array(10)].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", + }, + }; +}); + +class OAuthStore { + projects = projects; + currentProject = {}; + + constructor() { + makeAutoObservable(this); + } + + getProjects = () => { + this.projects = projects; + }; + + setCurrentProject = (project) => { + this.currentProject = project; + }; + + addProject = (project) => { + this.projects = [...this.projects, project]; + }; + + setEnabled = (id) => { + const index = this.projects.findIndex((proj) => proj.id === id); + + this.projects[index].token.enable = !this.projects[index].token.enable; + }; + + deleteProject = (id) => { + this.projects = this.projects.filter((proj) => proj.id !== id); + }; + + editProject = (project) => { + const index = this.projects.findIndex((proj) => proj.id === project.id); + + runInAction(() => { + this.projects[index] = project; + }); + }; +} + +export default OAuthStore; diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js index f7babf72d5..b70767edbe 100644 --- a/packages/client/src/store/index.js +++ b/packages/client/src/store/index.js @@ -37,6 +37,7 @@ import CreateEditRoomStore from "./CreateEditRoomStore"; import WebhooksStore from "./WebhooksStore"; import ClientLoadingStore from "./ClientLoadingStore"; +import OAuthStore from "./OAuthStore"; const oformsStore = new OformsStore(authStore); @@ -172,6 +173,8 @@ const createEditRoomStore = new CreateEditRoomStore( const webhooksStore = new WebhooksStore(); +const oauthStore = new OAuthStore(); + const store = { auth: authStore, payments: paymentStore, @@ -210,6 +213,7 @@ const store = { webhooksStore, clientLoadingStore, + oauthStore, }; export default store;