IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client:PluginSDK: init

Browse Source
This commit is contained in:
Timofey Boyko 2023-11-17 10:01:27 +03:00
parent 45d74b5fe2
commit 07aef4ca41
11 changed files with 193 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/client/public/locales/en/WebPlugins.json
View File

@ -3,10 +3,15 @@
"DeletePluginDescription": "This plugin will no longer be available to DocSpace users. Are you sure you want to continue?",
"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.",
"ExpandFunctionality": "Expand functionality using Plugin SDK",
"Metadata": "Metadata",
"NeedSettings": "Need enter settings",
"NoPlugins": "No plugins added",
"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",
"UploadPlugin": "Upload plugin"
}

69
packages/client/src/pages/PortalSettings/categories/developer-tools/PluginSDK/StyledPluginSDK.js Normal file
View File

@ -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;
}
}
}
}
`;

76
packages/client/src/pages/PortalSettings/categories/developer-tools/PluginSDK/index.js Normal file
View File

@ -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));

24
packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
View File

@ -19,6 +19,8 @@ import AppLoader from "@docspace/common/components/AppLoader";
import SSOLoader from "./sub-components/ssoLoader";
import { WebhookConfigsLoader } from "./Webhooks/sub-components/Loaders";
import { DeviceType } from "@docspace/common/constants";
import PluginSDK from "./PluginSDK";
import Badge from "@docspace/components/badge";
const StyledSubmenu = styled(Submenu)`
.sticky {
@ -36,6 +38,7 @@ const DeveloperToolsWrapper = (props) => {
"JavascriptSdk",
"Webhooks",
"Settings",
"WebPlugins",
]);
const [isPending, startTransition] = useTransition();
@ -45,6 +48,22 @@ const DeveloperToolsWrapper = (props) => {
</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 = [
{
id: "api",
@ -56,6 +75,11 @@ const DeveloperToolsWrapper = (props) => {
name: sdkLabel,
content: <JavascriptSDK />,
},
{
id: "plugin-sdk",
name: pluginLabel,
content: <PluginSDK />,
},
{
id: "webhooks",
name: t("Webhooks:Webhooks"),

2
packages/client/src/pages/PortalSettings/categories/integration/index.js
View File

@ -71,7 +71,7 @@ const IntegrationWrapper = (props) => {
<Box>
<Badge
label={t("Settings:BetaLabel")}
backgroundColor="#7763F0"
backgroundColor="#533ED1"
fontSize="9px"
borderRadius="50px"
noHover={true}

14
packages/client/src/pages/PortalSettings/utils/settingsTree.js
View File

@ -336,19 +336,19 @@ export const settingsTree = [
isCategory: true,
},
{
id: "portal-settings_catalog-webhooks",
id: "portal-settings_catalog-plugin-sdk",
key: "5-2",
icon: "",
link: "webhooks",
tKey: "DeveloperTools",
link: "plugin-sdk",
tKey: "PluginSDK",
isCategory: true,
},
{
id: "portal-settings_catalog-plugins",
key: "5-1",
id: "portal-settings_catalog-webhooks",
key: "5-3",
icon: "",
link: "plugins",
tKey: "Plugins",
link: "webhooks",
tKey: "DeveloperTools",
isCategory: true,
},
],

4
packages/client/src/routes/portalSettings.js
View File

@ -290,6 +290,10 @@ const PortalSettingsRoutes = {
path: "developer-tools/javascript-sdk",
element: <DeveloperTools />,
},
{
path: "developer-tools/plugin-sdk",
element: <DeveloperTools />,
},
{
path: "developer-tools/webhooks",
element: <DeveloperTools />,

4
packages/client/src/store/PluginStore.js
View File

@ -1032,6 +1032,10 @@ class PluginStore {
return this.plugins.filter((p) => p.enabled);
}
get systemPluginList() {
return this.plugins.filter((p) => p.system);
}
get contextMenuItemsList() {
const items = [];

1
packages/components/themes/base.js
View File

@ -3174,6 +3174,7 @@ const Base = {
plugins: {
borderColor: "#D0D5DA",
pluginName: "#5C5C5C",
descriptionColor: "#657077",
},
};

1
packages/components/themes/dark.js
View File

@ -3175,6 +3175,7 @@ const Dark = {
plugins: {
borderColor: "#474747",
pluginName: "#A3A9AE",
descriptionColor: "#ADADAD",
},
};

1
public/locales/en/Common.json
View File

@ -241,6 +241,7 @@
"PunycodeDomain": "Punycode domains are not supported",
"PunycodeLocalPart": "Punycode local part is not supported",
"QuotaPaidUserLimitError": "The paid user limit has been reached.",
"ReadInstructions": "Read instructions",
"ReconnectStorage": "Reconnect storage",
"RecoverDescribeYourProblemPlaceholder": "Describe your problem",
"RecoverTitle": "Access recovery",