diff --git a/package.json b/package.json index 4655fe197..05ac27391 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ ] }, "dependencies": { + "@rjsf/core": "^3.0.0", + "@rjsf/material-ui": "^3.0.0", "babel-polyfill": "^6.26.0", "cache": "^2.1.0", "chalk": "^2.0.1", diff --git a/src/components/Launch/LaunchForm/StructInput.tsx b/src/components/Launch/LaunchForm/StructInput.tsx index 7ec8ffe49..6149a7cc7 100644 --- a/src/components/Launch/LaunchForm/StructInput.tsx +++ b/src/components/Launch/LaunchForm/StructInput.tsx @@ -1,8 +1,25 @@ -import { TextField } from '@material-ui/core'; +import { TextField, Card, CardContent, CardHeader } from '@material-ui/core'; import * as React from 'react'; +import { useState } from 'react'; +import Form from '@rjsf/material-ui'; +import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import { makeStringChangeHandler } from './handlers'; import { InputProps } from './types'; import { getLaunchInputId } from './utils'; +import { protobufValueToPrimitive, PrimitiveType } from './inputHelpers/struct'; + +const muiTheme = createMuiTheme({ + props: { + MuiTextField: { + variant: 'outlined' + } + } +}); + +muiTheme.typography.h5 = { + fontSize: '16px', + fontWeight: 400 +}; /** Handles rendering of the input component for a Struct */ export const StructInput: React.FC = props => { @@ -11,12 +28,56 @@ export const StructInput: React.FC = props => { label, name, onChange, - typeDefinition: { subtype }, + typeDefinition: { literalType }, value = '' } = props; const hasError = !!error; const helperText = hasError ? error : props.helperText; - return ( + + const [paramData, setParamData] = useState({}); + const onFormChange = ({ formData }, e) => { + onChange(JSON.stringify(formData)); + setParamData(formData); + }; + + let jsonFormRenderable = false; + let parsedJson: PrimitiveType = {}; + + if (literalType?.metadata?.fields?.definitions?.structValue?.fields) { + const keys = Object.keys( + literalType?.metadata?.fields?.definitions?.structValue?.fields + ); + + if (keys[0]) { + parsedJson = protobufValueToPrimitive( + literalType.metadata.fields.definitions.structValue.fields[ + `${keys[0]}` + ] + ); + + if (parsedJson) jsonFormRenderable = true; + } + } + + return jsonFormRenderable ? ( + + + + +
+
+
+ + + + ) : (