Web: Client: PortalSettings: Added base OAuth page
This commit is contained in:
parent
06c63bdb6f
commit
a0b9e56097
@ -0,0 +1,45 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import Box from "@docspace/components/box";
|
||||
import TextInput from "@docspace/components/text-input";
|
||||
import Textarea from "@docspace/components/textarea";
|
||||
import Label from "@docspace/components/label";
|
||||
import Checkbox from "@docspace/components/checkbox";
|
||||
import Button from "@docspace/components/button";
|
||||
import ComboBox from "@docspace/components/combobox";
|
||||
import Heading from "@docspace/components/heading";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
|
||||
|
||||
const Container = styled.div`
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
`;
|
||||
|
||||
const OAuthDetails = (props) => {
|
||||
const { t, setDocumentTitle } = props;
|
||||
|
||||
setDocumentTitle("OAuth");
|
||||
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
<BreakpointWarning sectionName={"OAuth"} />
|
||||
) : (
|
||||
<Container>Test</Container>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ setup, auth }) => {
|
||||
const { settingsStore, setDocumentTitle } = auth;
|
||||
const { theme } = settingsStore;
|
||||
|
||||
return {
|
||||
theme,
|
||||
setDocumentTitle,
|
||||
};
|
||||
})(withTranslation(["Common"])(observer(OAuthDetails)));
|
@ -0,0 +1,41 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import Box from "@docspace/components/box";
|
||||
import TextInput from "@docspace/components/text-input";
|
||||
import Textarea from "@docspace/components/textarea";
|
||||
import Label from "@docspace/components/label";
|
||||
import Checkbox from "@docspace/components/checkbox";
|
||||
import Button from "@docspace/components/button";
|
||||
import ComboBox from "@docspace/components/combobox";
|
||||
import Heading from "@docspace/components/heading";
|
||||
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";
|
||||
|
||||
const OAuth = (props) => {
|
||||
const { t, setDocumentTitle } = props;
|
||||
|
||||
setDocumentTitle("OAuth");
|
||||
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
<BreakpointWarning sectionName={"OAuth"} />
|
||||
) : (
|
||||
<List openSettingsModal={() => {}} openDeleteModal={() => {}} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ setup, auth }) => {
|
||||
const { settingsStore, setDocumentTitle } = auth;
|
||||
const { theme } = settingsStore;
|
||||
|
||||
return {
|
||||
theme,
|
||||
setDocumentTitle,
|
||||
};
|
||||
})(withTranslation(["Common"])(observer(OAuth)));
|
@ -0,0 +1,109 @@
|
||||
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 (
|
||||
<>
|
||||
<ComponentRow
|
||||
sectionWidth={sectionWidth}
|
||||
key={webhook.id}
|
||||
data={webhook}
|
||||
contextOptions={contextOptions}
|
||||
onClick={handleRowClick}
|
||||
>
|
||||
<RowContent
|
||||
sectionWidth={sectionWidth}
|
||||
webhook={webhook}
|
||||
isChecked={isChecked}
|
||||
handleToggleEnabled={handleToggleEnabled}
|
||||
/>
|
||||
</ComponentRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ webhooksStore }) => {
|
||||
const { toggleEnabled, deleteWebhook, editWebhook, setCurrentWebhook } =
|
||||
webhooksStore;
|
||||
|
||||
return { toggleEnabled, deleteWebhook, editWebhook, setCurrentWebhook };
|
||||
})(observer(Row));
|
@ -0,0 +1,78 @@
|
||||
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 (
|
||||
<StyledRowContent sectionWidth={sectionWidth}>
|
||||
<ContentWrapper>
|
||||
<FlexWrapper>
|
||||
<Text fontWeight={600} fontSize="14px" style={{ marginRight: "8px" }}>
|
||||
{webhook.name}
|
||||
</Text>
|
||||
{/* <StatusBadge status={webhook.status} /> */}
|
||||
</FlexWrapper>
|
||||
|
||||
{!isMobileOnly && (
|
||||
<Text fontWeight={600} fontSize="12px" color="#A3A9AE">
|
||||
{webhook.uri}
|
||||
</Text>
|
||||
)}
|
||||
</ContentWrapper>
|
||||
|
||||
<ToggleButtonWrapper>
|
||||
<ToggleButton
|
||||
className="toggle toggleButton"
|
||||
id="toggle id"
|
||||
isChecked={isChecked}
|
||||
onChange={handleToggleEnabled}
|
||||
/>
|
||||
</ToggleButtonWrapper>
|
||||
</StyledRowContent>
|
||||
);
|
||||
};
|
@ -0,0 +1,60 @@
|
||||
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 (
|
||||
<StyledRowContainer useReactWindow={false}>
|
||||
{webhooks.map((webhook) => (
|
||||
<Row
|
||||
key={webhook.id}
|
||||
webhook={webhook}
|
||||
sectionWidth={sectionWidth}
|
||||
openSettingsModal={openSettingsModal}
|
||||
openDeleteModal={openDeleteModal}
|
||||
/>
|
||||
))}
|
||||
</StyledRowContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ webhooksStore, setup }) => {
|
||||
const { webhooks } = webhooksStore;
|
||||
|
||||
const { viewAs, setViewAs } = setup;
|
||||
|
||||
return {
|
||||
webhooks,
|
||||
viewAs,
|
||||
setViewAs,
|
||||
};
|
||||
})(observer(RowView));
|
@ -0,0 +1,105 @@
|
||||
import React, { useState } from "react";
|
||||
import { TableHeader as Header } 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 getColumns = (defaultColumns, userId) => {
|
||||
const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
|
||||
const columns = [];
|
||||
|
||||
if (storageColumns) {
|
||||
const splitColumns = storageColumns.split(",");
|
||||
|
||||
for (let col of defaultColumns) {
|
||||
const column = splitColumns.find((key) => key === col.key);
|
||||
column ? (col.enable = true) : (col.enable = false);
|
||||
|
||||
columns.push(col);
|
||||
}
|
||||
return columns;
|
||||
} else {
|
||||
return defaultColumns;
|
||||
}
|
||||
};
|
||||
|
||||
const TableHeader = (props) => {
|
||||
const {
|
||||
userId,
|
||||
sectionWidth,
|
||||
tableRef,
|
||||
columnStorageName,
|
||||
columnInfoPanelStorageName,
|
||||
setHideColumns,
|
||||
} = props;
|
||||
const { t } = useTranslation(["Webhooks", "Common"]);
|
||||
|
||||
const defaultColumns = [
|
||||
{
|
||||
key: "Name",
|
||||
title: t("Common:Name"),
|
||||
resizable: true,
|
||||
enable: true,
|
||||
default: true,
|
||||
active: true,
|
||||
minWidth: 150,
|
||||
onChange: onColumnChange,
|
||||
},
|
||||
{
|
||||
key: "URL",
|
||||
title: t("URL"),
|
||||
enable: true,
|
||||
resizable: true,
|
||||
onChange: onColumnChange,
|
||||
},
|
||||
{
|
||||
key: "State",
|
||||
title: t("State"),
|
||||
enable: true,
|
||||
resizable: true,
|
||||
onChange: onColumnChange,
|
||||
},
|
||||
];
|
||||
|
||||
const [columns, setColumns] = useState(getColumns(defaultColumns, userId));
|
||||
|
||||
function onColumnChange(key, e) {
|
||||
const columnIndex = columns.findIndex((c) => c.key === key);
|
||||
|
||||
if (columnIndex === -1) return;
|
||||
|
||||
setColumns((prevColumns) =>
|
||||
prevColumns.map((item, index) =>
|
||||
index === columnIndex ? { ...item, enable: !item.enable } : item
|
||||
)
|
||||
);
|
||||
|
||||
const tableColumns = columns.map((c) => c.enable && c.key);
|
||||
localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns);
|
||||
}
|
||||
|
||||
return (
|
||||
<Header
|
||||
checkboxSize="48px"
|
||||
containerRef={tableRef}
|
||||
columns={columns}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
sectionWidth={sectionWidth}
|
||||
checkboxMargin="12px"
|
||||
showSettings={false}
|
||||
useReactWindow
|
||||
setHideColumns={setHideColumns}
|
||||
infoPanelVisible={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
return {
|
||||
userId: auth.userStore.user.id,
|
||||
};
|
||||
})(observer(TableHeader));
|
@ -0,0 +1,155 @@
|
||||
import React, { useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import { TableRow as Row } from "@docspace/components/table-container/TableRow";
|
||||
import TableCell from "@docspace/components/table-container/TableCell";
|
||||
import Text from "@docspace/components/text";
|
||||
|
||||
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 StatusBadge from "../../StatusBadge";
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: contents;
|
||||
`;
|
||||
|
||||
const StyledTableRow = styled(Row)`
|
||||
.table-container_cell {
|
||||
padding-right: 30px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mr-8 {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.textOverflow {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
`;
|
||||
|
||||
const TableRow = (props) => {
|
||||
const {
|
||||
webhook,
|
||||
toggleEnabled,
|
||||
openSettingsModal,
|
||||
openDeleteModal,
|
||||
setCurrentWebhook,
|
||||
hideColumns,
|
||||
} = props;
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { t } = useTranslation(["Webhooks", "Common"]);
|
||||
|
||||
const [isChecked, setIsChecked] = useState(webhook.enabled);
|
||||
|
||||
const redirectToHistory = () => {
|
||||
navigate(window.location.pathname + `/${webhook.id}`);
|
||||
};
|
||||
|
||||
const handleRowClick = (e) => {
|
||||
if (
|
||||
e.target.closest(".checkbox") ||
|
||||
e.target.closest(".table-container_row-checkbox") ||
|
||||
e.target.closest(".type-combobox") ||
|
||||
e.target.closest(".table-container_row-context-menu-wrapper") ||
|
||||
e.target.closest(".toggleButton") ||
|
||||
e.detail === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
redirectToHistory();
|
||||
};
|
||||
const handleToggleEnabled = () => {
|
||||
toggleEnabled(webhook);
|
||||
setIsChecked((prevIsChecked) => !prevIsChecked);
|
||||
};
|
||||
|
||||
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 (
|
||||
<>
|
||||
<StyledWrapper onClick={handleRowClick}>
|
||||
<StyledTableRow
|
||||
contextOptions={contextOptions}
|
||||
hideColumns={hideColumns}
|
||||
>
|
||||
<TableCell>
|
||||
<Text as="span" fontWeight={600} className="mr-8 textOverflow">
|
||||
{webhook.name}{" "}
|
||||
</Text>
|
||||
{/* <StatusBadge status={webhook.status} /> */}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize="11px"
|
||||
color="#A3A9AE"
|
||||
fontWeight={600}
|
||||
className="textOverflow"
|
||||
>
|
||||
{webhook.uri}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<ToggleButton
|
||||
className="toggle toggleButton"
|
||||
id="toggle id"
|
||||
isChecked={isChecked}
|
||||
onChange={handleToggleEnabled}
|
||||
/>
|
||||
</TableCell>
|
||||
</StyledTableRow>
|
||||
</StyledWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ webhooksStore }) => {
|
||||
const { toggleEnabled, setCurrentWebhook } = webhooksStore;
|
||||
|
||||
return {
|
||||
toggleEnabled,
|
||||
setCurrentWebhook,
|
||||
};
|
||||
})(observer(TableRow));
|
@ -0,0 +1,117 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
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 { Base } from "@docspace/components/themes";
|
||||
|
||||
const TableWrapper = styled(TableContainer)`
|
||||
margin-top: 16px;
|
||||
|
||||
.header-container-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-container_header {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.table-list-item {
|
||||
margin-top: -1px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: ${(props) =>
|
||||
props.theme.isBase ? "#F8F9F9" : "#282828"};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
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 TableView = (props) => {
|
||||
const {
|
||||
webhooks,
|
||||
loadWebhooks,
|
||||
sectionWidth,
|
||||
viewAs,
|
||||
setViewAs,
|
||||
openSettingsModal,
|
||||
openDeleteModal,
|
||||
userId,
|
||||
} = props;
|
||||
|
||||
const tableRef = useRef(null);
|
||||
const [hideColumns, setHideColumns] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!sectionWidth) return;
|
||||
if (sectionWidth < 1025 || isMobile) {
|
||||
viewAs !== "row" && setViewAs("row");
|
||||
} else {
|
||||
viewAs !== "table" && setViewAs("table");
|
||||
}
|
||||
}, [sectionWidth]);
|
||||
|
||||
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
|
||||
const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
|
||||
|
||||
return (
|
||||
<TableWrapper forwardedRef={tableRef} useReactWindow>
|
||||
<TableHeader
|
||||
sectionWidth={sectionWidth}
|
||||
tableRef={tableRef}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
setHideColumns={setHideColumns}
|
||||
/>
|
||||
<TableBody
|
||||
itemHeight={49}
|
||||
useReactWindow
|
||||
infoPanelVisible={false}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
filesLength={webhooks.length}
|
||||
fetchMoreFiles={loadWebhooks}
|
||||
hasMoreFiles={false}
|
||||
itemCount={webhooks.length}
|
||||
>
|
||||
{webhooks.map((webhook, index) => (
|
||||
<TableRow
|
||||
key={webhook.id}
|
||||
webhook={webhook}
|
||||
index={index}
|
||||
openSettingsModal={openSettingsModal}
|
||||
openDeleteModal={openDeleteModal}
|
||||
hideColumns={hideColumns}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
</TableWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ webhooksStore, setup, auth }) => {
|
||||
const { webhooks, loadWebhooks } = webhooksStore;
|
||||
|
||||
const { viewAs, setViewAs } = setup;
|
||||
const { id: userId } = auth.userStore.user;
|
||||
|
||||
return {
|
||||
webhooks,
|
||||
viewAs,
|
||||
setViewAs,
|
||||
loadWebhooks,
|
||||
userId,
|
||||
};
|
||||
})(observer(TableView));
|
@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
|
||||
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;
|
||||
|
||||
return (
|
||||
<Consumer>
|
||||
{(context) =>
|
||||
viewAs === "table" ? (
|
||||
<TableView
|
||||
sectionWidth={context.sectionWidth}
|
||||
openSettingsModal={openSettingsModal}
|
||||
openDeleteModal={openDeleteModal}
|
||||
/>
|
||||
) : (
|
||||
<RowView
|
||||
sectionWidth={context.sectionWidth}
|
||||
openSettingsModal={openSettingsModal}
|
||||
openDeleteModal={openDeleteModal}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Consumer>
|
||||
);
|
||||
};
|
||||
export default inject(({ setup }) => {
|
||||
const { viewAs } = setup;
|
||||
|
||||
return {
|
||||
viewAs,
|
||||
};
|
||||
})(observer(List));
|
@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
|
||||
|
||||
import JavascriptSDK from "./JavascriptSDK";
|
||||
import Webhooks from "./Webhooks";
|
||||
import OAuth from "./OAuth";
|
||||
|
||||
import AppLoader from "@docspace/common/components/AppLoader";
|
||||
import SSOLoader from "./sub-components/ssoLoader";
|
||||
@ -48,6 +49,11 @@ const DeveloperToolsWrapper = (props) => {
|
||||
name: t("Webhooks:Webhooks"),
|
||||
content: <Webhooks />,
|
||||
},
|
||||
{
|
||||
id: "oauth",
|
||||
name: "OAuth",
|
||||
content: <OAuth />,
|
||||
},
|
||||
];
|
||||
|
||||
const load = async () => {
|
||||
@ -71,8 +77,8 @@ const DeveloperToolsWrapper = (props) => {
|
||||
combineUrl(
|
||||
window.DocSpaceConfig?.proxy?.url,
|
||||
config.homepage,
|
||||
`/portal-settings/developer-tools/${e.id}`,
|
||||
),
|
||||
`/portal-settings/developer-tools/${e.id}`
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
@ -85,7 +91,9 @@ const DeveloperToolsWrapper = (props) => {
|
||||
<AppLoader />
|
||||
);
|
||||
|
||||
return <StyledSubmenu data={data} startSelect={currentTab} onSelect={onSelect} />;
|
||||
return (
|
||||
<StyledSubmenu data={data} startSelect={currentTab} onSelect={onSelect} />
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ setup, webhooksStore }) => {
|
||||
|
@ -304,6 +304,14 @@ export const settingsTree = [
|
||||
tKey: "DeveloperTools",
|
||||
isCategory: true,
|
||||
},
|
||||
{
|
||||
id: "portal-settings_catalog-oauth",
|
||||
key: "5-2",
|
||||
icon: "",
|
||||
link: "oauth",
|
||||
tKey: "OAuth",
|
||||
isCategory: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
@ -12,65 +12,100 @@ import { generalRoutes } from "./general";
|
||||
const PortalSettings = loadable(() => import("../pages/PortalSettings"));
|
||||
|
||||
const CustomizationSettings = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/common/index.js"),
|
||||
import("../pages/PortalSettings/categories/common/index.js")
|
||||
);
|
||||
const LanguageAndTimeZoneSettings = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/common/Customization/language-and-time-zone"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/common/Customization/language-and-time-zone"
|
||||
)
|
||||
);
|
||||
const WelcomePageSettings = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/common/Customization/welcome-page-settings"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/common/Customization/welcome-page-settings"
|
||||
)
|
||||
);
|
||||
const DNSSettings = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/common/Customization/dns-settings"),
|
||||
import("../pages/PortalSettings/categories/common/Customization/dns-settings")
|
||||
);
|
||||
const PortalRenaming = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/common/Customization/portal-renaming"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/common/Customization/portal-renaming"
|
||||
)
|
||||
);
|
||||
const WhiteLabel = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/common/Branding/whitelabel"),
|
||||
import("../pages/PortalSettings/categories/common/Branding/whitelabel")
|
||||
);
|
||||
const SecuritySettings = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/security/index.js"),
|
||||
import("../pages/PortalSettings/categories/security/index.js")
|
||||
);
|
||||
const TfaPage = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/security/access-portal/tfa"),
|
||||
import("../pages/PortalSettings/categories/security/access-portal/tfa")
|
||||
);
|
||||
const PasswordStrengthPage = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/security/access-portal/passwordStrength"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/security/access-portal/passwordStrength"
|
||||
)
|
||||
);
|
||||
const TrustedMailPage = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/security/access-portal/trustedMail"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/security/access-portal/trustedMail"
|
||||
)
|
||||
);
|
||||
const IpSecurityPage = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/security/access-portal/ipSecurity"),
|
||||
import("../pages/PortalSettings/categories/security/access-portal/ipSecurity")
|
||||
);
|
||||
const AdminMessagePage = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/security/access-portal/adminMessage"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/security/access-portal/adminMessage"
|
||||
)
|
||||
);
|
||||
const SessionLifetimePage = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/security/access-portal/sessionLifetime"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/security/access-portal/sessionLifetime"
|
||||
)
|
||||
);
|
||||
const Integration = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/integration")
|
||||
);
|
||||
const Payments = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/payments")
|
||||
);
|
||||
const Integration = loadable(() => import("../pages/PortalSettings/categories/integration"));
|
||||
const Payments = loadable(() => import("../pages/PortalSettings/categories/payments"));
|
||||
const ThirdParty = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings"
|
||||
)
|
||||
);
|
||||
const SingleSignOn = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/integration/SingleSignOn"),
|
||||
import("../pages/PortalSettings/categories/integration/SingleSignOn")
|
||||
);
|
||||
const DeveloperTools = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/developer-tools/index.js"),
|
||||
import("../pages/PortalSettings/categories/developer-tools/index.js")
|
||||
);
|
||||
const WebhookHistory = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory"
|
||||
)
|
||||
);
|
||||
const WebhookDetails = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails"
|
||||
)
|
||||
);
|
||||
const OAuthDetails = loadable(() =>
|
||||
import(
|
||||
"../pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails"
|
||||
)
|
||||
);
|
||||
const Backup = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/data-management/index")
|
||||
);
|
||||
const DeleteDataPage = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/delete-data")
|
||||
);
|
||||
const Backup = loadable(() => import("../pages/PortalSettings/categories/data-management/index"));
|
||||
const DeleteDataPage = loadable(() => import("../pages/PortalSettings/categories/delete-data"));
|
||||
const RestoreBackup = loadable(() =>
|
||||
import("../pages/PortalSettings/categories/data-management/backup/restore-backup/index"),
|
||||
import(
|
||||
"../pages/PortalSettings/categories/data-management/backup/restore-backup/index"
|
||||
)
|
||||
);
|
||||
|
||||
const PortalSettingsRoutes = {
|
||||
@ -192,6 +227,14 @@ const PortalSettingsRoutes = {
|
||||
path: "developer-tools/webhooks",
|
||||
element: <DeveloperTools />,
|
||||
},
|
||||
{
|
||||
path: "developer-tools/oauth",
|
||||
element: <DeveloperTools />,
|
||||
},
|
||||
{
|
||||
path: "developer-tools/oauth/:id",
|
||||
element: <OAuthDetails />,
|
||||
},
|
||||
{
|
||||
path: "developer-tools/webhooks/:id",
|
||||
element: <WebhookHistory />,
|
||||
|
Loading…
Reference in New Issue
Block a user