Client:PluginSDK: init
This commit is contained in:
parent
45d74b5fe2
commit
07aef4ca41
@ -3,10 +3,15 @@
|
|||||||
"DeletePluginDescription": "This plugin will no longer be available to DocSpace users. Are you sure you want to continue?",
|
"DeletePluginDescription": "This plugin will no longer be available to DocSpace users. Are you sure you want to continue?",
|
||||||
"DeletePluginTitle": "Delete plugin?",
|
"DeletePluginTitle": "Delete plugin?",
|
||||||
"Description": "You can add plugins to extend the functionality of DocSpace with extra features. Click Upload plugin and select the plugin file in the ZIP archive.",
|
"Description": "You can add plugins to extend the functionality of DocSpace with extra features. Click Upload plugin and select the plugin file in the ZIP archive.",
|
||||||
|
"ExpandFunctionality": "Expand functionality using Plugin SDK",
|
||||||
"Metadata": "Metadata",
|
"Metadata": "Metadata",
|
||||||
"NeedSettings": "Need enter settings",
|
"NeedSettings": "Need enter settings",
|
||||||
"NoPlugins": "No plugins added",
|
"NoPlugins": "No plugins added",
|
||||||
"NotNeedSettings": "Not need enter settings",
|
"NotNeedSettings": "Not need enter settings",
|
||||||
|
"PluginSamples": "Plugin samples",
|
||||||
|
"PluginSDK": "Plugin SDK",
|
||||||
|
"PluginSDKDescription": "Using Plugin SDK you can extend your DocSpace functionality, connect the third-party services or enhance the existing user experience. Here you can find the plugin samples with code source available on GitHub. ",
|
||||||
|
"PluginSDKInstruction": "Click the button for the detailed instructions on how to create your own plugins.",
|
||||||
"PluginsHelp": "Plugins allow you to extend the functionality of DocSpace",
|
"PluginsHelp": "Plugins allow you to extend the functionality of DocSpace",
|
||||||
"UploadPlugin": "Upload plugin"
|
"UploadPlugin": "Upload plugin"
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,69 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
import { mobile } from "@docspace/components/utils/device";
|
||||||
|
|
||||||
|
export const StyledContainer = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.read-instructions-button {
|
||||||
|
{
|
||||||
|
width: fit-content;
|
||||||
|
|
||||||
|
@media ${mobile} {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
color: ${(props) => props.theme.plugins.descriptionColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-list {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(328px, 1fr));
|
||||||
|
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.plugin-list__item {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 164px;
|
||||||
|
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
border: 1px solid ${(props) => props.theme.plugins.borderColor};
|
||||||
|
|
||||||
|
.plugin-list__item-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.plugin-logo {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-info-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
@ -0,0 +1,76 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
import { StyledContainer } from "./StyledPluginSDK";
|
||||||
|
import Text from "@docspace/components/text";
|
||||||
|
import Button from "@docspace/components/button";
|
||||||
|
|
||||||
|
const PluginSDK = ({ systemPluginList, currentDeviceType }) => {
|
||||||
|
const { t } = useTranslation(["WebPlugins", "Common"]);
|
||||||
|
|
||||||
|
const isMobile = currentDeviceType === "mobile";
|
||||||
|
|
||||||
|
const getPluginList = () => {
|
||||||
|
const list = systemPluginList.map((p) => (
|
||||||
|
<div className="plugin-list__item">
|
||||||
|
<div className="plugin-list__item-info">
|
||||||
|
<img className="plugin-logo" />
|
||||||
|
<div className="plugin-info-container">
|
||||||
|
<Text></Text>
|
||||||
|
<Text></Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Text>123</Text>
|
||||||
|
<Button />
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
|
||||||
|
return list;
|
||||||
|
};
|
||||||
|
|
||||||
|
const list = getPluginList();
|
||||||
|
|
||||||
|
console.log(currentDeviceType);
|
||||||
|
return (
|
||||||
|
<StyledContainer>
|
||||||
|
<Text fontSize={"16px"} fontWeight={700} lineHeight={"22px"}>
|
||||||
|
{t("ExpandFunctionality")}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
className={"description"}
|
||||||
|
fontSize={"13px"}
|
||||||
|
fontWeight={400}
|
||||||
|
lineHeight={"20px"}
|
||||||
|
>
|
||||||
|
{t("PluginSDKDescription")}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
className={"description"}
|
||||||
|
fontSize={"13px"}
|
||||||
|
fontWeight={400}
|
||||||
|
lineHeight={"20px"}
|
||||||
|
>
|
||||||
|
{t("PluginSDKInstruction")}
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
className={"read-instructions-button"}
|
||||||
|
label={t("Common:ReadInstructions")}
|
||||||
|
primary
|
||||||
|
scale={isMobile}
|
||||||
|
size={isMobile ? "normal" : "small"}
|
||||||
|
></Button>
|
||||||
|
<Text fontSize={"16px"} fontWeight={700} lineHeight={"22px"}>
|
||||||
|
{t("PluginSamples")}
|
||||||
|
</Text>
|
||||||
|
<div className="plugin-list">{list}</div>
|
||||||
|
</StyledContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject(({ pluginStore, auth }) => {
|
||||||
|
const { currentDeviceType } = auth.settingsStore;
|
||||||
|
const { systemPluginList } = pluginStore;
|
||||||
|
|
||||||
|
return { currentDeviceType, systemPluginList };
|
||||||
|
})(observer(PluginSDK));
|
@ -19,6 +19,8 @@ import AppLoader from "@docspace/common/components/AppLoader";
|
|||||||
import SSOLoader from "./sub-components/ssoLoader";
|
import SSOLoader from "./sub-components/ssoLoader";
|
||||||
import { WebhookConfigsLoader } from "./Webhooks/sub-components/Loaders";
|
import { WebhookConfigsLoader } from "./Webhooks/sub-components/Loaders";
|
||||||
import { DeviceType } from "@docspace/common/constants";
|
import { DeviceType } from "@docspace/common/constants";
|
||||||
|
import PluginSDK from "./PluginSDK";
|
||||||
|
import Badge from "@docspace/components/badge";
|
||||||
|
|
||||||
const StyledSubmenu = styled(Submenu)`
|
const StyledSubmenu = styled(Submenu)`
|
||||||
.sticky {
|
.sticky {
|
||||||
@ -36,6 +38,7 @@ const DeveloperToolsWrapper = (props) => {
|
|||||||
"JavascriptSdk",
|
"JavascriptSdk",
|
||||||
"Webhooks",
|
"Webhooks",
|
||||||
"Settings",
|
"Settings",
|
||||||
|
"WebPlugins",
|
||||||
]);
|
]);
|
||||||
const [isPending, startTransition] = useTransition();
|
const [isPending, startTransition] = useTransition();
|
||||||
|
|
||||||
@ -45,6 +48,22 @@ const DeveloperToolsWrapper = (props) => {
|
|||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const pluginLabel = (
|
||||||
|
<Box displayProp="flex" style={{ gap: "8px" }}>
|
||||||
|
{t("WebPlugins:PluginSDK")}
|
||||||
|
<Box>
|
||||||
|
<Badge
|
||||||
|
label={t("Settings:BetaLabel")}
|
||||||
|
backgroundColor="#533ED1"
|
||||||
|
fontSize="9px"
|
||||||
|
borderRadius="50px"
|
||||||
|
noHover={true}
|
||||||
|
isHovered={false}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{
|
{
|
||||||
id: "api",
|
id: "api",
|
||||||
@ -56,6 +75,11 @@ const DeveloperToolsWrapper = (props) => {
|
|||||||
name: sdkLabel,
|
name: sdkLabel,
|
||||||
content: <JavascriptSDK />,
|
content: <JavascriptSDK />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "plugin-sdk",
|
||||||
|
name: pluginLabel,
|
||||||
|
content: <PluginSDK />,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "webhooks",
|
id: "webhooks",
|
||||||
name: t("Webhooks:Webhooks"),
|
name: t("Webhooks:Webhooks"),
|
||||||
|
@ -71,7 +71,7 @@ const IntegrationWrapper = (props) => {
|
|||||||
<Box>
|
<Box>
|
||||||
<Badge
|
<Badge
|
||||||
label={t("Settings:BetaLabel")}
|
label={t("Settings:BetaLabel")}
|
||||||
backgroundColor="#7763F0"
|
backgroundColor="#533ED1"
|
||||||
fontSize="9px"
|
fontSize="9px"
|
||||||
borderRadius="50px"
|
borderRadius="50px"
|
||||||
noHover={true}
|
noHover={true}
|
||||||
|
@ -336,19 +336,19 @@ export const settingsTree = [
|
|||||||
isCategory: true,
|
isCategory: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "portal-settings_catalog-webhooks",
|
id: "portal-settings_catalog-plugin-sdk",
|
||||||
key: "5-2",
|
key: "5-2",
|
||||||
icon: "",
|
icon: "",
|
||||||
link: "webhooks",
|
link: "plugin-sdk",
|
||||||
tKey: "DeveloperTools",
|
tKey: "PluginSDK",
|
||||||
isCategory: true,
|
isCategory: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "portal-settings_catalog-plugins",
|
id: "portal-settings_catalog-webhooks",
|
||||||
key: "5-1",
|
key: "5-3",
|
||||||
icon: "",
|
icon: "",
|
||||||
link: "plugins",
|
link: "webhooks",
|
||||||
tKey: "Plugins",
|
tKey: "DeveloperTools",
|
||||||
isCategory: true,
|
isCategory: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -290,6 +290,10 @@ const PortalSettingsRoutes = {
|
|||||||
path: "developer-tools/javascript-sdk",
|
path: "developer-tools/javascript-sdk",
|
||||||
element: <DeveloperTools />,
|
element: <DeveloperTools />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "developer-tools/plugin-sdk",
|
||||||
|
element: <DeveloperTools />,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "developer-tools/webhooks",
|
path: "developer-tools/webhooks",
|
||||||
element: <DeveloperTools />,
|
element: <DeveloperTools />,
|
||||||
|
@ -1032,6 +1032,10 @@ class PluginStore {
|
|||||||
return this.plugins.filter((p) => p.enabled);
|
return this.plugins.filter((p) => p.enabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get systemPluginList() {
|
||||||
|
return this.plugins.filter((p) => p.system);
|
||||||
|
}
|
||||||
|
|
||||||
get contextMenuItemsList() {
|
get contextMenuItemsList() {
|
||||||
const items = [];
|
const items = [];
|
||||||
|
|
||||||
|
@ -3174,6 +3174,7 @@ const Base = {
|
|||||||
plugins: {
|
plugins: {
|
||||||
borderColor: "#D0D5DA",
|
borderColor: "#D0D5DA",
|
||||||
pluginName: "#5C5C5C",
|
pluginName: "#5C5C5C",
|
||||||
|
descriptionColor: "#657077",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -3175,6 +3175,7 @@ const Dark = {
|
|||||||
plugins: {
|
plugins: {
|
||||||
borderColor: "#474747",
|
borderColor: "#474747",
|
||||||
pluginName: "#A3A9AE",
|
pluginName: "#A3A9AE",
|
||||||
|
descriptionColor: "#ADADAD",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -241,6 +241,7 @@
|
|||||||
"PunycodeDomain": "Punycode domains are not supported",
|
"PunycodeDomain": "Punycode domains are not supported",
|
||||||
"PunycodeLocalPart": "Punycode local part is not supported",
|
"PunycodeLocalPart": "Punycode local part is not supported",
|
||||||
"QuotaPaidUserLimitError": "The paid user limit has been reached.",
|
"QuotaPaidUserLimitError": "The paid user limit has been reached.",
|
||||||
|
"ReadInstructions": "Read instructions",
|
||||||
"ReconnectStorage": "Reconnect storage",
|
"ReconnectStorage": "Reconnect storage",
|
||||||
"RecoverDescribeYourProblemPlaceholder": "Describe your problem",
|
"RecoverDescribeYourProblemPlaceholder": "Describe your problem",
|
||||||
"RecoverTitle": "Access recovery",
|
"RecoverTitle": "Access recovery",
|
||||||
|
Loading…
Reference in New Issue
Block a user