Skip to content

Commit

Permalink
feat(plugin): load plugins from BE, show plugin meta details
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmitry-yudakov
dmitry-yudakov committed Oct 24, 2023
1 parent 5df5c75 commit 203f88b
Show file tree
Hide file tree
Showing 5 changed files with 177 additions and 34 deletions.
14 changes: 14 additions & 0 deletions packages/app/src/core/utils/renderService.utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,17 @@ export const getTrackAbsoluteUrl = (trackUrlOrHash: string | undefined | null):

return null;
};

export const getPluginAbsoluteUrl = (pluginUrlOrHash: string | undefined | null): string | null => {
const pluginServerUrl = `${appVariables.RENDER_SERVICE_URL}/plugin`;
// const pluginServerUrl = `http://localhost:4000/api/v4/media/render/plugin`;
if (pluginUrlOrHash) {
if (pluginUrlOrHash.startsWith('http')) {
return pluginUrlOrHash;
} else {
return `${pluginServerUrl}/${pluginUrlOrHash}/remoteEntry.js`;
}
}

return null;
};
35 changes: 28 additions & 7 deletions ...rc/scenes/admin/pages/NodeConfig/components/PluginsManagement/PluginsManagement.styled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,44 @@ export const List = styled.div`
margin-bottom: 20px;
`;

export const ExpandHolder = styled.div``;

export const Item = styled.div`
margin: 10px 0 0 0;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
background: ${(props) => props.theme.accentBg && rgba(props.theme.accentBg, 0.5)};
box-shadow: -1px -1px 2px ${(props) => props.theme.accentText && rgba(props.theme.accentText, 0.1)};
border-radius: 4px;
gap: 15px;
`;

export const Date = styled.div`
font-size: var(--font-size-xs);
export const Date = styled.div``;

export const Title = styled.div`
font-size: var(--font-size-l);
font-weight: 500;
`;

export const Description = styled.div`
font-style: italic;
font-weight: 300;
`;

export const LayoutCollapsed = styled.div`
display: grid;
grid-template-columns: 200px auto 50px;
gap: 10px;
width: 100%;
`;

export const LayoutExpanded = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
`;

export const BottomPanel = styled.div`
Expand All @@ -38,9 +61,7 @@ export const BottomPanel = styled.div`
flex-direction: column;
`;

export const Error = styled.div`
font-size: var(--font-size-xs);
`;
export const Error = styled.div``;

export const FilePreview = styled.div`
display: flex;
Expand Down
107 changes: 100 additions & 7 deletions .../app/src/scenes/admin/pages/NodeConfig/components/PluginsManagement/PluginsManagement.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {FC, useState} from 'react';
import {observer} from 'mobx-react-lite';
import {Button, ErrorsEnum, FileUploader, Heading} from '@momentum-xyz/ui-kit';
import {Button, ErrorsEnum, FileUploader, Heading, IconButton} from '@momentum-xyz/ui-kit';
import {i18n} from '@momentum-xyz/core';

import {useStore} from 'shared/hooks';
Expand All @@ -15,6 +15,8 @@ const PluginsManagement: FC = () => {
const [fileToUpload, setFileToUpload] = useState<File>();
const [error, setError] = useState<string>();

const [expandedPluginId, setExpandedPluginId] = useState<string>();

const handleUpload = async () => {
if (!fileToUpload) {
return;
Expand Down Expand Up @@ -43,12 +45,103 @@ const PluginsManagement: FC = () => {
<styled.Container>
<styled.List>
<Heading variant="h3">Plugins</Heading>
{pluginStore.plugins?.map((plugin) => (
<styled.Item key={plugin.plugin_id}>
<span>{plugin.meta.name}</span>
{/* <styled.Date>{plugin.updated_at?.slice(0, 19)}</styled.Date> */}
</styled.Item>
))}
{pluginStore.plugins?.map(({plugin_id, meta, updated_at}) => {
const {
name,
displayName,
description,
version,
scopes,
author,
homepage,
repository,
license
} = meta || {};
const isExpanded = expandedPluginId === plugin_id;
return (
<styled.Item key={plugin_id}>
<styled.ExpandHolder>
<IconButton
name={isExpanded ? 'chevron_down' : 'chevron_right'}
isWhite
size="s"
onClick={() => {
setExpandedPluginId(isExpanded ? undefined : plugin_id);
}}
/>
</styled.ExpandHolder>
{!isExpanded && (
<styled.LayoutCollapsed>
<styled.Title>{displayName || name}</styled.Title>
<styled.Description>{description?.slice(0, 100)}</styled.Description>
<span>{version}</span>
</styled.LayoutCollapsed>
)}
{isExpanded && (
<div>
<styled.LayoutExpanded>
<styled.Title>{displayName || name}</styled.Title>
<span />

<span>Version:</span>
<span>{version}</span>

{!!author && (
<>
<span>Author:</span>
<span>{author}</span>
</>
)}

{!!homepage && (
<>
<span>Homepage:</span>
<a href={homepage} target="_blank" rel="noreferrer">
{homepage}
</a>
</>
)}

{!!repository && (
<>
<span>Repository:</span>
<a href={repository} target="_blank" rel="noreferrer">
{repository}
</a>
</>
)}

{!!license && (
<>
<span>License:</span>
<span>{license}</span>
</>
)}

<span>Last modified:</span>
<span>{updated_at?.slice(0, 16)?.split('T')?.join(' ')}</span>

{!!scopes && (
<>
<span>Scopes:</span>
<ul>
{Object.entries<string[]>(scopes).map(([scope, value]) => (
<li key={scope}>
{scope}: {value.join(', ')}
</li>
))}
</ul>
</>
)}
</styled.LayoutExpanded>

<br />
<styled.Description>{description?.slice(0, 100)}</styled.Description>
</div>
)}
</styled.Item>
);
})}
</styled.List>
<styled.BottomPanel>
<Heading variant="h3">Upload plugin</Heading>
Expand Down
49 changes: 31 additions & 18 deletions packages/app/src/stores/PluginStore/PluginStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {RequestModel} from '@momentum-xyz/core';

import {api} from 'api';
import {DynamicScriptList, MediaUploader, PluginAttributesManager, PluginLoader} from 'core/models';
import {getRootStore} from 'core/utils';
import {getPluginAbsoluteUrl, getRootStore} from 'core/utils';

interface PluginInfoInterface {
plugin_id: string;
Expand All @@ -13,18 +13,18 @@ interface PluginInfoInterface {
updated_at?: string;
}

const localPluginInfosByScopes = {
creatorTab: [
{
plugin_id: '99c9a0ba-0c19-4ef5-a995-9bc3af39a0a5',
meta: {
name: 'plugin_odyssey_creator_openai',
scopeName: 'plugin_odyssey_creator_openai',
scriptUrl: 'http://localhost:3001/remoteEntry.js'
}
}
]
};
// const localPluginInfosByScopes = {
// creatorTab: [
// {
// plugin_id: '99c9a0ba-0c19-4ef5-a995-9bc3af39a0a5',
// meta: {
// name: 'plugin_odyssey_creator_openai',
// scopeName: 'plugin_odyssey_creator_openai',
// scriptUrl: 'http://localhost:3001/remoteEntry.js'
// }
// }
// ]
// };

export const PluginStore = types
.model('PluginStore', {
Expand Down Expand Up @@ -57,10 +57,21 @@ export const PluginStore = types
console.log('pluginsResponse', pluginsResponse);
self._plugins = pluginsResponse || [];

// if (pluginsResponse) {
// self.pluginInfosByScopes = pluginsResponse.plugins;
self.pluginInfosByScopes = localPluginInfosByScopes;
// }
// self.pluginInfosByScopes = localPluginInfosByScopes;
if (pluginsResponse) {
const pluginInfosByScopes: Record<string, PluginInfoInterface[]> = {};
for (const p of pluginsResponse) {
if (Array.isArray(p.meta?.scopes?.ui)) {
for (const scope of p.meta.scopes.ui) {
if (!pluginInfosByScopes[scope]) {
pluginInfosByScopes[scope] = [];
}
pluginInfosByScopes[scope].push(p);
}
}
}
self.pluginInfosByScopes = pluginInfosByScopes;
}
}),
storePluginLoadersByScope: (scope: string, pluginLoaders: any[]) => {
self.pluginLoadersByScopes.set(scope, cast(pluginLoaders));
Expand All @@ -84,7 +95,9 @@ export const PluginStore = types
console.log('create plugin ', {plugin_id, meta, options});

if (!self.dynamicScriptList.containsLoaderWithName(meta.scopeName)) {
await self.dynamicScriptList.addScript(meta.scopeName, meta.scriptUrl);
const scriptUrl = getPluginAbsoluteUrl(meta.scriptUrl)!;
console.log('Load plugin', plugin_id, 'from scriptUrl', scriptUrl);
await self.dynamicScriptList.addScript(meta.scopeName, scriptUrl);
}

const worldId = getRootStore(self).universeStore.worldId;
Expand Down
6 changes: 4 additions & 2 deletions packages/app/src/stores/UniverseStore/models/ObjectStore/ObjectStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
ObjectUserAttribute,
User
} from 'core/models';
import {getRootStore} from 'core/utils';
import {getPluginAbsoluteUrl, getRootStore} from 'core/utils';

import {ObjectContentStore} from './models';

Expand Down Expand Up @@ -80,7 +80,9 @@ const ObjectStore = types
const {options, meta} = assetData;

if (!self.dynamicScriptList.containsLoaderWithName(meta.scopeName)) {
yield self.dynamicScriptList.addScript(meta.scopeName, meta.scriptUrl);
const scriptUrl = getPluginAbsoluteUrl(meta.scriptUrl)!;
console.log('Load plugin', assetData, 'from scriptUrl', scriptUrl);
yield self.dynamicScriptList.addScript(meta.scopeName, scriptUrl);
}

self.pluginLoader = PluginLoader.create({
Expand Down

0 comments on commit 203f88b

Please sign in to comment.