chore: rewrite precession of assets-discovery and small RegistryUI ch…

…anges

ilc/client/ilcConfig.js

@@ -12,12 +12,12 @@ export default function () {
 
     registryConf = JSON.parse(confScript.innerHTML);
 
-    document.head.appendChild(getSystemjsImportmap(registryConf));
+    document.head.appendChild(getSystemjsImportmap(registryConf.apps, registryConf.sharedLibs));
 
     return registryConf;
 };
 
-function getSystemjsImportmap({ apps, sharedLibs }) {
+function getSystemjsImportmap(apps, sharedLibs) {
     const deps = {};
 
     /**

registry/client/src/sharedLibs/Edit.js

@@ -6,8 +6,9 @@ import {
     TabbedForm,
     TextInput,
     FormDataConsumer,
-    TextField,
+    FunctionField,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
+import { Typography } from '@material-ui/core';
 
 import * as validators from '../validators';
 import Title from './Title';
@@ -42,13 +43,28 @@ const validateSharedLib = (values) => {
     return errors;
 };
 
+const styles = {
+    row: {
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+    },
+};
+
 const InputForm = ({mode = 'edit', ...props}) => {
     return (
         <TabbedForm {...props}>
             <FormTab label="Summary">
                 {mode === 'edit'
-                    ? <TextField source="name" />
-                    : <TextInput source="name" fullWidth />}
+                    ? <FunctionField
+                        label="Name"
+                        render={record => `@sharedLibrary/${record.name}`}
+                    />
+                    : <div style={styles.row}>
+                        <Typography variant="body1">@sharedLibrary/</Typography>
+                        <TextInput source="name" fullWidth />
+                    </div>
+                }
                 <TextInput
                     fullWidth
                     multiline

registry/client/src/sharedLibs/List.js

@@ -6,6 +6,7 @@ import {
     SimpleList,
     TextField,
     EditButton,
+    FunctionField,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
 import {
     Empty,
@@ -29,12 +30,15 @@ const PostList = props => {
         >
             {isSmall ? (
                 <SimpleList
-                    primaryText={record => record.name}
+                    primaryText={record => `@sharedLibrary/${record.name}`}
                     secondaryText={record => record.spaBundle}
                 />
             ) : (
                 <Datagrid rowClick="show" optimized>
-                    <TextField source="name" />
+                    <FunctionField
+                        label="Name"
+                        render={record => `@sharedLibrary/${record.name}`}
+                    />
                     <TextField source="spaBundle" />
                     <ListActionsToolbar>
                         <EditButton />

registry/client/src/sharedLibs/Show.js

@@ -5,6 +5,7 @@ import {
     TabbedShowLayout,
     TextField,
     UrlField,
+    FunctionField,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
 
 import Title from './Title';
@@ -16,7 +17,10 @@ export default ({ permissions, hasList, hasEdit, hasShow, hasCreate, ...props })
         <Show {...props} title={<Title />} actions={<ShowTopToolbar />}>
             <TabbedShowLayout {...props} toolbar={null}>
                 <Tab label="Summary">
-                    <TextField source="name" />
+                    <FunctionField
+                        label="Name"
+                        render={record => `@sharedLibrary/${record.name}`}
+                    />
                     <TextField source="adminNotes" component="pre" emptyText={EMPTY_TEXT} />
                 </Tab>
                 <Tab label="Assets">

registry/server/apps/routes/createApp.ts

@@ -22,6 +22,13 @@ const validateRequestBeforeCreateApp = validateRequestFactory([{
 const createApp = async (req: Request, res: Response): Promise<void> => {
     const app = req.body;
 
+    try {
+        await setDataFromManifest(app, 'apps');
+    } catch (error) {
+        res.status(422).send(error.message);
+        return;
+    }
+
     await db.versioning(req.user, {type: 'apps', id: app.name}, async (trx) => {
         await db('apps')
             .insert(stringifyJSON(['dependencies', 'props', 'ssrProps', 'ssr', 'configSelector', 'discoveryMetadata'], app))
@@ -33,4 +40,4 @@ const createApp = async (req: Request, res: Response): Promise<void> => {
     res.status(200).send(preProcessResponse(savedApp));
 };
 
-export default [validateRequestBeforeCreateApp, setDataFromManifest, createApp];
+export default [validateRequestBeforeCreateApp, createApp];

registry/server/apps/routes/updateApp.ts

@@ -37,6 +37,13 @@ const updateApp = async (req: Request<UpdateAppRequestParams>, res: Response): P
     const app = req.body;
     const appName = req.params.name;
 
+    try {
+        await setDataFromManifest(app, 'apps');
+    } catch (error) {
+        res.status(422).send(error.message);
+        return;
+    }
+
     const countToUpdate = await db('apps').where({ name: appName })
     if (!countToUpdate.length) {
         res.status(404).send('Not found');
@@ -55,4 +62,4 @@ const updateApp = async (req: Request<UpdateAppRequestParams>, res: Response): P
     res.status(200).send(preProcessResponse(updatedApp));
 };
 
-export default [validateRequestBeforeUpdateApp, setDataFromManifest, updateApp];
+export default [validateRequestBeforeUpdateApp, updateApp];

registry/server/common/middlewares/setDataFromManifest.ts

@@ -9,10 +9,9 @@ import {
     parseJSON,
 } from '../services/json';
 import processManifest from '../services/assetsManifestProcessor';
+import AssetsDiscoveryWhiteLists from '../services/AssetsDiscoveryWhiteLists';
 
-const setDataFromManifest = async (req: Request, res: Response, next: NextFunction) => {
-    const entity = req.body;
-
+const setDataFromManifest = async (entity: Record<string, any>, entityName: string) => {
     if (entity.assetsDiscoveryUrl) {
         let response;
 
@@ -22,21 +21,19 @@ const setDataFromManifest = async (req: Request, res: Response, next: NextFuncti
             });
         } catch (error) {
             console.error(`Caught an error while trying to fetch a manifest file from '${entity.assetsDiscoveryUrl}':`, error);
-            res.status(422).send('"assetsDiscoveryUrl" is not available. Check the url via browser manually.');
-            return;
+            throw new Error('"assetsDiscoveryUrl" is not available. Check the url via browser manually.');
         }
 
         const {
             spaBundle,
             cssBundle,
             dependencies,
-        } = processManifest(entity.assetsDiscoveryUrl, response.data);
+        } = processManifest(entity.assetsDiscoveryUrl, response.data, AssetsDiscoveryWhiteLists[entityName]);
 
         if (spaBundle) {
             entity.spaBundle = spaBundle;
         } else {
-            res.status(422).send('"spaBundle" must be specified in the manifest file from provided "assetsDiscoveryUrl" if it was not specified manually');
-            return;
+            throw new Error('"spaBundle" must be specified in the manifest file from provided "assetsDiscoveryUrl" if it was not specified manually');
         }
 
         if (cssBundle) {
@@ -47,8 +44,6 @@ const setDataFromManifest = async (req: Request, res: Response, next: NextFuncti
             entity.dependencies = parseJSON(dependencies);
         }
     }
-
-    next();
 };
 
 export default setDataFromManifest;

registry/server/common/services/AssetsDiscovery.ts

@@ -4,6 +4,7 @@ import urljoin from 'url-join';
 
 import knex from '../../db';
 import manifestProcessor from './assetsManifestProcessor';
+import AssetsDiscoveryWhiteLists from './AssetsDiscoveryWhiteLists';
 
 export default class AssetsDiscovery {
     private tableName: string;
@@ -58,11 +59,7 @@ export default class AssetsDiscovery {
                 continue;
             }
 
-            let data = manifestProcessor(reqUrl, res.data);
-            if (this.tableName === 'shared_libs') {
-                // "dependencies" comes from assets-discovery.json, but we don't have column dependencies at the current moment
-                delete data.dependencies;
-            }
+            let data = manifestProcessor(reqUrl, res.data, AssetsDiscoveryWhiteLists[this.tableName]);
 
             await knex(this.tableName).where(this.tableId, entity[this.tableId]).update(Object.assign({}, data, {
                 assetsDiscoveryUpdatedAt: now,

registry/server/common/services/AssetsDiscoveryWhiteLists.ts

@@ -0,0 +1,6 @@
+const AssetsDiscoveryWhiteLists: Record<string, string[]> = {
+    shared_libs: ['spaBundle'],
+    apps: ['spaBundle', 'cssBundle', 'dependencies'],
+};
+
+export default AssetsDiscoveryWhiteLists;

registry/server/common/services/assetsManifestProcessor.ts

@@ -1,9 +1,8 @@
 import _ from 'lodash';
 import url from 'url';
 
-
-export default function processManifest(baseUrl: string, manifest: any) {
-    let data = _.pick(manifest, ['spaBundle', 'cssBundle', 'dependencies']);
+export default function processManifest(baseUrl: string, manifest: any, whiteList: string[]) {
+    const data = _.pick(manifest, whiteList);
 
     if (data.spaBundle) {
         data.spaBundle = url.resolve(baseUrl, data.spaBundle);

registry/server/sharedLibs/routes/createSharedLib.ts

@@ -19,8 +19,12 @@ const validateRequestBeforeCreateSharedLib = validateRequestFactory([{
 const createSharedLib = async (req: Request, res: Response): Promise<void> => {
     const sharedLib = req.body;
 
-    // "dependencies" comes from assets-discovery.json, but we don't have column dependencies at the current moment
-    delete sharedLib.dependencies;
+    try {
+        await setDataFromManifest(sharedLib, 'shared_libs');
+    } catch (error) {
+        res.status(422).send(error.message);
+        return;
+    }
 
     await db.versioning(req.user, { type: 'shared_libs', id: sharedLib.name }, async (trx) => {
         await db('shared_libs').insert(sharedLib).transacting(trx);
@@ -31,4 +35,4 @@ const createSharedLib = async (req: Request, res: Response): Promise<void> => {
     res.status(200).send(preProcessResponse(savedSharedLib));
 };
 
-export default [validateRequestBeforeCreateSharedLib, setDataFromManifest, createSharedLib];
+export default [validateRequestBeforeCreateSharedLib, createSharedLib];

registry/server/sharedLibs/routes/updateSharedLib.ts

@@ -34,8 +34,12 @@ const updateSharedLib = async (req: Request<UpdateSharedLibRequestParams>, res:
     const sharedLib = req.body;
     const sharedLibName = req.params.name;
 
-    // "dependencies" comes from assets-discovery.json, but we don't have column dependencies at the current moment
-    delete sharedLib.dependencies;
+    try {
+        await setDataFromManifest(sharedLib, 'shared_libs');
+    } catch (error) {
+        res.status(422).send(error.message);
+        return;
+    }
 
     const countToUpdate = await db('shared_libs').where({ name: sharedLibName })
     if (!countToUpdate.length) {
@@ -52,4 +56,4 @@ const updateSharedLib = async (req: Request<UpdateSharedLibRequestParams>, res:
     res.status(200).send(preProcessResponse(updatedSharedLib));
 };
 
-export default [validateRequestBeforeUpdateSharedLib, setDataFromManifest, updateSharedLib];
+export default [validateRequestBeforeUpdateSharedLib, updateSharedLib];

registry/tests/assetsManifestProcessor.spec.ts

@@ -3,7 +3,7 @@ import { expect } from './common';
 import processor from '../server/common/services/assetsManifestProcessor'
 
 describe('assetsManifestProcessor', () => {
-    it('perform basic link resolution & cleanup of extra props',  () => {
+    it('perform basic link resolution & cleanup non white listed properties', () => {
         expect(processor('https://example.com/folder/assets-discovery.js', {
             a: 'tst',
             spaBundle: 'https://example.com/aa.js',
@@ -12,48 +12,57 @@ describe('assetsManifestProcessor', () => {
                 a1: 'https://example.com/aa.js',
                 a2: './tst/aa.js',
             }
-        })).to.eql({
-            spaBundle: 'https://example.com/aa.js',
-            cssBundle: 'https://example.com/folder/tst/aa.js',
-            dependencies: JSON.stringify({
-                a1: 'https://example.com/aa.js',
-                a2: 'https://example.com/folder/tst/aa.js',
-            })
-        });
+        },
+            ['spaBundle', 'cssBundle', 'dependencies']))
+            .to.eql({
+                spaBundle: 'https://example.com/aa.js',
+                cssBundle: 'https://example.com/folder/tst/aa.js',
+                dependencies: JSON.stringify({
+                    a1: 'https://example.com/aa.js',
+                    a2: 'https://example.com/folder/tst/aa.js',
+                })
+            });
     });
 
-    it('handles absence of dependencies object or invalid type correctly',  () => {
+    it('handles absence of dependencies object or invalid type correctly', () => {
         expect(processor('https://example.com/folder/assets-discovery.js', {
             spaBundle: 'https://example.com/aa.js',
             cssBundle: './tst/aa.js',
-        })).to.eql({
-            spaBundle: 'https://example.com/aa.js',
-            cssBundle: 'https://example.com/folder/tst/aa.js',
-        });
+        },
+            ['spaBundle', 'cssBundle', 'dependencies']))
+            .to.eql({
+                spaBundle: 'https://example.com/aa.js',
+                cssBundle: 'https://example.com/folder/tst/aa.js',
+            });
 
         expect(processor('https://example.com/folder/assets-discovery.js', {
             spaBundle: 'https://example.com/aa.js',
             cssBundle: './tst/aa.js',
             dependencies: ['aaa']
-        })).to.eql({
-            spaBundle: 'https://example.com/aa.js',
-            cssBundle: 'https://example.com/folder/tst/aa.js',
-        });
+        },
+            ['spaBundle', 'cssBundle', 'dependencies']))
+            .to.eql({
+                spaBundle: 'https://example.com/aa.js',
+                cssBundle: 'https://example.com/folder/tst/aa.js',
+            });
     });
 
-    it('handles absence of cssBundle correctly',  () => {
+    it('handles absence of cssBundle correctly', () => {
         expect(processor('https://example.com/folder/assets-discovery.js', {
             spaBundle: 'https://example.com/aa.js',
-        })).to.eql({
-            spaBundle: 'https://example.com/aa.js',
-        });
+        },
+            ['spaBundle', 'cssBundle', 'dependencies']))
+            .to.eql({
+                spaBundle: 'https://example.com/aa.js',
+            });
     });
 
-    it('handles absence of spaBundle correctly',  () => {
+    it('handles absence of spaBundle correctly', () => {
         expect(processor('https://example.com/folder/assets-discovery.js', {
             cssBundle: 'https://example.com/aa.css',
-        })).to.eql({
-            cssBundle: 'https://example.com/aa.css',
-        });
+        }, ['spaBundle', 'cssBundle', 'dependencies']))
+            .to.eql({
+                cssBundle: 'https://example.com/aa.css',
+            });
     });
 });