Edit widget

generate-plugins-index.js

@@ -8,7 +8,9 @@ const dependencies = processArgs.slice(2);
 const importStatements = dependencies?.map((dependency) => {
   const packageName = `@${dependency.split('@')?.at(1)}`;
   const moduleNamespace = camelCase(packageName);
-  return `export * as ${moduleNamespace} from '${packageName}';`;
+  const moduleImport = `export * as ${moduleNamespace} from '${packageName}';`;
+  const moduleSchemaImport = `export * as ${moduleNamespace}Schema from '${packageName}/dist/ops-types.json';`;
+  return `${moduleImport}\n${moduleSchemaImport}`;
 });
 
 if (importStatements.length === 0) {

package.json

@@ -44,9 +44,12 @@
     "i18next": "^22.4.9",
     "img-loader": "^4.0.0",
     "lodash.camelcase": "^4.3.0",
+    "lodash.get": "^4.4.2",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.4.0",
+    "lodash.isplainobject": "^4.0.6",
     "lodash.kebabcase": "^4.1.1",
+    "lodash.sortby": "^4.7.0",
     "lodash.upperfirst": "^4.3.1",
     "next": "13.2.4",
     "next-compose-plugins": "^2.2.1",
@@ -68,10 +71,14 @@
     "@types/cached": "^6.0.0",
     "@types/eslint-plugin-prettier": "^3.1.0",
     "@types/jest": "^29.4.0",
+    "@types/json-schema": "^7.0.12",
     "@types/lodash.camelcase": "^4.3.7",
+    "@types/lodash.get": "^4.4.7",
     "@types/lodash.isempty": "^4.4.7",
     "@types/lodash.isequal": "^4.4.7",
+    "@types/lodash.isplainobject": "^4.0.7",
     "@types/lodash.kebabcase": "^4.1.7",
+    "@types/lodash.sortby": "^4.7.7",
     "@types/lodash.upperfirst": "^4.3.7",
     "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",

src/components/dashboard/dashboard.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import isEmpty from 'lodash.isempty';
 import isEqual from 'lodash.isequal';
 import camelCase from 'lodash.camelcase';
+import get from 'lodash.get';
+import sortBy from 'lodash.sortby';
 import apis from 'ops-frontend/utils/apis';
 import WrappedWidget from 'ops-frontend/components/widget/wrapped-widget';
 import { useRouter } from 'next/router'
@@ -18,11 +20,12 @@ import { AppDispatch } from 'ops-frontend/store/store';
 import { FullpageLayout } from 'ops-frontend/components/layout/fullpage-layout';
 import { Parameter, Widget, TinyStacksError as TinyStacksErrorType } from '@tinystacks/ops-model';
 import { TinyStacksError } from '@tinystacks/ops-core';
-import { FlatMap, Json, WidgetMap } from 'ops-frontend/types';
+import { FlatMap, FlatSchema, Json, WidgetMap } from 'ops-frontend/types';
 import ErrorWidget from 'ops-frontend/widgets/error-widget';
 import LoadingWidget from 'ops-frontend/widgets/loading-widget';
 // eslint-disable-next-line import/no-unresolved
 import { useParams } from 'react-router-dom';
+import { JSONSchema7, JSONSchema7Definition } from 'json-schema';
 
 // A dashboard consists of
 // 1. A dashboard-level header with the dashboard title and actions
@@ -247,14 +250,28 @@ async function renderWidgetAndChildren(
   return await renderWidget(widget, renderedChildren, dependencies, dashboardId, parameters);
 }
 
+function getSchemaProperties (schema: JSONSchema7, requiredProperties: string[]): FlatSchema[] {
+  return Object.entries(schema.properties || {}).map(
+    ([propertyName, propertySchema]: [string, JSONSchema7Definition]) => {
+      const propertyDef: JSONSchema7 = typeof propertySchema === 'boolean' ? {} : propertySchema;
+      return {
+        ...propertyDef,
+        name: propertyName,
+        isRequired: requiredProperties.includes(propertyName)
+      }
+    }
+  );
+}
+
 async function renderWidget(
   widget: Widget,
   children: (Widget & { renderedElement: JSX.Element })[],
   dependencies: FlatMap,
   dashboardId?: string,
   parameters?: Json
 ): Promise<JSX.Element> {
-  let hydratedWidget; 
+  let hydratedWidget;
+  let widgetProperties: FlatSchema[] | undefined;
   if (widget.type === 'ErrorWidget') {
     hydratedWidget = ErrorWidget.fromJson(
       {
@@ -281,6 +298,36 @@ async function renderWidget(
         cause: `Cannot find module ${moduleName} for widget type ${widget.type} used in ${widget.id}.`
       }).toJson();
     }
+    const schemaJson = (plugins as any)[`${moduleNamespace}Schema`];
+    const widgetSchema = get(schemaJson, `definitions.${widget.type}`) as JSONSchema7;
+    if (widgetSchema) {
+      const {
+        allOf = [],
+        anyOf = [],
+        oneOf = [],
+        required = []
+      } = widgetSchema;
+      const widgetSchemaProperties = getSchemaProperties(widgetSchema, required);
+      // FIXME: This is wrong.  Instead of spreading oneOf,
+      // we should present the subSchemas under it as variants that the user can choose from.
+      // Consider this when implementing typed inputs in Phase 2 or 3
+      const subSchemas = [...allOf, ...anyOf, ...oneOf];
+      if (subSchemas.length > 0) {
+        subSchemas.forEach((subSchema: JSONSchema7Definition) => {
+          const jsonSchema: JSONSchema7 = typeof subSchema === 'boolean' ? {} : subSchema;
+          const subSchemaProperties = getSchemaProperties(jsonSchema, jsonSchema.required || []);
+          widgetSchemaProperties.push(...subSchemaProperties);
+        });
+      }
+      const noEditProperties = ['id', 'type', 'additionalProperties'];
+      const editableProperties = widgetSchemaProperties
+        .filter(p => !noEditProperties.includes(p.name));
+      const requiredProperties = editableProperties.filter(p => p.isRequired);
+      const optionalProperties = editableProperties.filter(p => !p.isRequired);
+      widgetProperties = [
+        ...sortBy(requiredProperties, 'name'),
+        ...sortBy(optionalProperties, 'name')
+      ];
     hydratedWidget = plugin[widget.type].fromJson(widget);
   }
 
@@ -290,6 +337,7 @@ async function renderWidget(
     hydratedWidget={hydratedWidget}
     widget={widget}
     childrenWidgets={children}
+    widgetProperties={widgetProperties}
     dashboardId={dashboardId}
     parameters={parameters}
   />;

src/components/modal/dynamic-modal-body.tsx

@@ -1,7 +1,7 @@
 import { ModalBody, Spinner } from '@chakra-ui/react';
 import React from 'react';
 
-export default function DynamicModalBody(props: { body: JSX.Element, loading: boolean, error?: string }) {
+export default function DynamicModalBody(props: { body: JSX.Element[], loading: boolean, error?: string }) {
   const { body, loading, error } = props;
   const errorView = 'ERROR!';
 

src/components/widget/delete-widget-modal.tsx

@@ -53,7 +53,7 @@ export default function DeleteWidgetModal(props: { console: string, widget: Widg
           <DynamicModalBody
             loading={loading}
             error={error}
-            body={<>{widgetMsg('deleteConfirmation', { ...widget })}</>}
+            body={[<>{widgetMsg('deleteConfirmation', { ...widget })}</>]}
           />
           <ModalFooter>
             <Button mr={3} onClick={onClose}>