diff --git a/static/src/js/components/CustomSelectWidget/CustomSelectWidget.jsx b/static/src/js/components/CustomSelectWidget/CustomSelectWidget.jsx index 3442af815..232194851 100644 --- a/static/src/js/components/CustomSelectWidget/CustomSelectWidget.jsx +++ b/static/src/js/components/CustomSelectWidget/CustomSelectWidget.jsx @@ -217,7 +217,8 @@ CustomSelectWidget.defaultProps = { selectOptions: null, uiSchema: {}, value: undefined, - options: {} + options: {}, + required: false } CustomSelectWidget.propTypes = { @@ -236,7 +237,7 @@ CustomSelectWidget.propTypes = { retrieveSchema: PropTypes.func }) }).isRequired, - required: PropTypes.bool.isRequired, + required: PropTypes.bool, schema: PropTypes.shape({ items: PropTypes.shape({}), description: PropTypes.string, diff --git a/static/src/js/components/CustomTextWidget/CustomTextWidget.jsx b/static/src/js/components/CustomTextWidget/CustomTextWidget.jsx index e8a1df8b6..b48d7b225 100644 --- a/static/src/js/components/CustomTextWidget/CustomTextWidget.jsx +++ b/static/src/js/components/CustomTextWidget/CustomTextWidget.jsx @@ -50,9 +50,7 @@ const CustomTextWidget = ({ setFocusField } = formContext - const { maxLength, description } = schema - - const fieldType = uiSchema['ui:type'] + const { maxLength, description, type } = schema let title = startCase(label.split(/-/)[0]) if (uiSchema['ui:title']) { @@ -105,7 +103,7 @@ const CustomTextWidget = ({ placeholder={placeholder} ref={focusRef} tabIndex={0} - type={fieldType && fieldType === 'number' ? 'number' : 'text'} + type={type && type === 'number' ? 'number' : 'text'} value={value} /> @@ -116,7 +114,8 @@ CustomTextWidget.defaultProps = { disabled: false, onBlur: null, placeholder: null, - value: '' + value: '', + required: false } CustomTextWidget.propTypes = { @@ -132,14 +131,14 @@ CustomTextWidget.propTypes = { setFocusField: PropTypes.func }).isRequired }).isRequired, - required: PropTypes.bool.isRequired, + required: PropTypes.bool, schema: PropTypes.shape({ description: PropTypes.string, - maxLength: PropTypes.number + maxLength: PropTypes.number, + type: PropTypes.string }).isRequired, uiSchema: PropTypes.shape({ - 'ui:title': PropTypes.string, - 'ui:type': PropTypes.string + 'ui:title': PropTypes.string }).isRequired, value: PropTypes.oneOfType([ PropTypes.string, diff --git a/static/src/js/components/CustomTextWidget/__tests__/CustomTextWidget.test.js b/static/src/js/components/CustomTextWidget/__tests__/CustomTextWidget.test.js index 26ece0ec2..c0b97ca00 100644 --- a/static/src/js/components/CustomTextWidget/__tests__/CustomTextWidget.test.js +++ b/static/src/js/components/CustomTextWidget/__tests__/CustomTextWidget.test.js @@ -185,8 +185,8 @@ describe('CustomTextWidget', () => { describe('when the input is a number field', () => { test('renders a number field', () => { setup({ - uiSchema: { - 'ui:type': 'number' + schema: { + type: 'number' } }) diff --git a/static/src/js/components/CustomWidgetWrapper/CustomWidgetWrapper.jsx b/static/src/js/components/CustomWidgetWrapper/CustomWidgetWrapper.jsx index edebea403..c10f286ef 100644 --- a/static/src/js/components/CustomWidgetWrapper/CustomWidgetWrapper.jsx +++ b/static/src/js/components/CustomWidgetWrapper/CustomWidgetWrapper.jsx @@ -137,7 +137,8 @@ const CustomWidgetWrapper = ({ CustomWidgetWrapper.defaultProps = { charactersUsed: null, description: null, - maxLength: null + maxLength: null, + required: null } CustomWidgetWrapper.propTypes = { @@ -146,7 +147,7 @@ CustomWidgetWrapper.propTypes = { description: PropTypes.string, id: PropTypes.string.isRequired, maxLength: PropTypes.number, - required: PropTypes.bool.isRequired, + required: PropTypes.bool, scrollRef: PropTypes.shape({}).isRequired, title: PropTypes.string.isRequired } diff --git a/static/src/js/components/GridGroupedSinglePanel/GridGroupedSinglePanel.jsx b/static/src/js/components/GridGroupedSinglePanel/GridGroupedSinglePanel.jsx index 2ef2eea3b..70431d2fc 100644 --- a/static/src/js/components/GridGroupedSinglePanel/GridGroupedSinglePanel.jsx +++ b/static/src/js/components/GridGroupedSinglePanel/GridGroupedSinglePanel.jsx @@ -1,13 +1,147 @@ -import React from 'react' -import Col from 'react-bootstrap/Col' -import Row from 'react-bootstrap/Row' - -const GridGroupedSinglePanel = () => ( - - - This is where the Grouped Single Panel would go. - - -) +import React, { useState } from 'react' +import { FaMinusCircle, FaPlusCircle } from 'react-icons/fa' +import PropTypes from 'prop-types' +import Button from '../Button/Button' + +// eslint-disable-next-line import/no-cycle +import GridLayout from '../GridLayout/GridLayout' + +const GridGroupedSinglePanel = ({ + uiSchema, + formData = {}, + onChange, + registry, + schema, + layout, + idSchema, + errorSchema +}) => { + // Use state hook for showSinglePanel flag + const [showSinglePanel, setShowSinglePanel] = useState() + + // Check if a value is null or undefined + const isNullOrUndefined = (value) => value === undefined || value === null + + // Check if the form arrays don't have anything other than null or undefined + const checkEmpty = (formDataParam) => { + const formArrays = Object.values(formDataParam) + + // eslint-disable-next-line max-len + return formArrays.every((formArray) => formArray.filter(isNullOrUndefined).length === formArray.length) + } + + // When Remove group button clicked + const removeGroup = () => { + setShowSinglePanel(false) + if (!checkEmpty(formData)) { + Object.getOwnPropertyNames(formData).map((field) => ( + // eslint-disable-next-line no-param-reassign + delete formData[field] + // } + )) + } + + // eslint-disable-next-line no-param-reassign + formData = {} + onChange(formData) + } + + // Create Remove button + const createGroupRemoveHeader = () => { + const title = uiSchema['ui:title'] + + return ( + + ) + } + + // When Add group button clicked + const addGroup = () => { + setShowSinglePanel(true) + } + + // Create Add button + const createGroupAddHeader = () => { + const title = uiSchema['ui:title'] + + return ( + + ) + } + + // Render fields + const renderChildren = (rows) => { + const { schemaUtils } = registry + const retrievedSchema = schemaUtils.retrieveSchema(schema) + + return rows.map((layoutSchema) => ( + { onChange(props) }} + /> + )) + } + + const rows = layout['ui:row'] + + return ( +
+ { + !showSinglePanel + && checkEmpty(formData) + ? ( + createGroupAddHeader() + ) + // If the user has clicked showSinglePanelField, this is will show the remove button. + : ( +
+ {createGroupRemoveHeader()} + {renderChildren(rows)} +
+ ) + } +
+ ) +} + +GridGroupedSinglePanel.propTypes = { + layout: PropTypes.shape({ + 'ui:row': PropTypes.arrayOf(PropTypes.shape({})) + }).isRequired, + uiSchema: PropTypes.shape({ + 'ui:title': PropTypes.string + }).isRequired, + formData: PropTypes.shape({}).isRequired, + onChange: PropTypes.func.isRequired, + registry: PropTypes.shape({ + schemaUtils: PropTypes.shape({ + retrieveSchema: PropTypes.func + }) + }).isRequired, + schema: PropTypes.shape({}).isRequired, + idSchema: PropTypes.shape({}).isRequired, + errorSchema: PropTypes.shape({}).isRequired +} export default GridGroupedSinglePanel diff --git a/static/src/js/components/GridGroupedSinglePanel/__tests__/GridGroupedSinglePanel.test.js b/static/src/js/components/GridGroupedSinglePanel/__tests__/GridGroupedSinglePanel.test.js new file mode 100644 index 000000000..5c36326f9 --- /dev/null +++ b/static/src/js/components/GridGroupedSinglePanel/__tests__/GridGroupedSinglePanel.test.js @@ -0,0 +1,172 @@ +import React from 'react' +import { render, screen } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' +import GridGroupedSinglePanel from '../GridGroupedSinglePanel' + +jest.mock('../../CustomWidgetWrapper/CustomWidgetWrapper') + +const setup = (overrideProps = {}) => { + const onChange = jest.fn() + const layout = { + 'ui:group': 'Index Ranges', + 'ui:group-description': true, + 'ui:group-single-panel': true, + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [{ + 'ui:row': [{ + 'ui:col': { + md: 12, + children: ['LatRange'] + } + }] + }, { + 'ui:row': [{ + 'ui:col': { + md: 12, + children: ['LonRange'] + } + }] + }] + } + } + ] + } + + const uiSchema = { + 'ui:field': 'layout', + 'ui:title': 'Index Ranges', + 'ui:layout_grid': { + 'ui:group': 'Index Ranges', + 'ui:group-description': true, + 'ui:group-single-panel': true, + 'ui:row': [{ + 'ui:col': { + md: 12, + children: [{ + 'ui:row': [{ + 'ui:col': { + md: 12, + children: ['LatRange'] + } + }] + }, { + 'ui:row': [{ + 'ui:col': { + md: 12, + children: ['LonRange'] + } + }] + }] + } + }] + }, + LatRange: { + 'ui:canAdd': false, + items: { 'ui:type': 'number' } + }, + LonRange: { + 'ui:canAdd': false, + items: { 'ui:type': 'number' } + } + } + + const schema = { + type: 'object', + additionalProperties: false, + description: 'This element describes the x and y dimension ranges for this variable. Typically these values are 2 latitude and longitude ranges, but they dont necessarily have to be.', + properties: { + LatRange: { + description: 'The LatRange consists of an index range for latitude.', + type: 'array', + items: { type: 'number' }, + minItems: 2, + maxItems: 2 + }, + LonRange: { + description: 'The LonRange consists of an index range for longitude.', + type: 'array', + items: { type: 'number' }, + minItems: 2, + maxItems: 2 + } + }, + required: ['LatRange', 'LonRange'] + } + + const props = { + layout, + formData: {}, + onChange, + registry: { + fields: { + SchemaField: jest.fn(), + TitleField: jest.fn() + }, + formContext: {}, + schemaUtils: { + retrieveSchema: () => schema + } + }, + schema, + idSchema: {}, + errorSchema: {}, + uiSchema, + ...overrideProps + } + + render( + + ) + + return { + props, + user: userEvent.setup() + } +} + +describe('GridGroupedSinglePanel', () => { + describe('when initial rendering', () => { + test('renders the add group button', async () => { + const { user } = setup() + expect(screen.getByText('Add Index Ranges')).toBeInTheDocument() + const addButton = screen.getByRole('button', { name: 'Add Index Ranges' }) + await user.click(addButton) + expect(screen.getByText('Remove Index Ranges')).toBeInTheDocument() + }) + }) + + describe('when add button clicked', () => { + test('renders the remove group button', async () => { + const { user } = setup() + const addButton = screen.getByRole('button', { name: 'Add Index Ranges' }) + await user.click(addButton) + const removeButton = screen.getByRole('button', { name: 'Remove Index Ranges' }) + await user.click(removeButton) + expect(screen.getByText('Add Index Ranges')).toBeInTheDocument() + }) + }) + + describe('when change form data', () => { + test('renders updated data', async () => { + const formData = { + LatRange: [ + 1, + 2 + ], + LonRange: [ + 3, + 4 + ] + } + + const { user } = setup({ formData }) + expect(screen.getByText('Remove Index Ranges')).toBeInTheDocument() + const removeButton = screen.getByRole('button', { name: 'Remove Index Ranges' }) + await user.click(removeButton) + expect(screen.getByText('Add Index Ranges')).toBeInTheDocument() + }) + }) +}) diff --git a/static/src/js/components/GridRow/GridRow.jsx b/static/src/js/components/GridRow/GridRow.jsx index ca4c94f9d..cb1e22e2b 100644 --- a/static/src/js/components/GridRow/GridRow.jsx +++ b/static/src/js/components/GridRow/GridRow.jsx @@ -111,7 +111,18 @@ const GridRow = ( { groupSinglePanel - ? () + ? ( + + ) : (
{renderChildren()} @@ -165,7 +176,7 @@ GridRow.propTypes = { 'ui:group-box-classname': PropTypes.string, 'ui:required': PropTypes.bool, 'ui:hide': PropTypes.func, - 'ui:group-single-panel': PropTypes.string + 'ui:group-single-panel': PropTypes.bool }).isRequired, onChange: PropTypes.func.isRequired, registry: PropTypes.shape({ diff --git a/static/src/js/components/GridRow/__tests__/GridRow.test.js b/static/src/js/components/GridRow/__tests__/GridRow.test.js index edd65e494..99d1d4ee6 100644 --- a/static/src/js/components/GridRow/__tests__/GridRow.test.js +++ b/static/src/js/components/GridRow/__tests__/GridRow.test.js @@ -203,7 +203,11 @@ describe('when there is a group title', () => { }) expect(GridGroupedSinglePanel).toHaveBeenCalledTimes(1) - expect(GridGroupedSinglePanel).toHaveBeenCalledWith(props, {}) + expect(GridGroupedSinglePanel).toHaveBeenCalledWith(expect.objectContaining({ + idSchema: props.idSchema, + onChange: props.onChange, + schema: props.schema + }), {}) }) }) diff --git a/static/src/js/components/OneOfField/OneOfField.jsx b/static/src/js/components/OneOfField/OneOfField.jsx index e4b414bab..4177d7bf4 100644 --- a/static/src/js/components/OneOfField/OneOfField.jsx +++ b/static/src/js/components/OneOfField/OneOfField.jsx @@ -45,7 +45,7 @@ class OneOfField extends React.Component { } = this.props // Cache the retrieved options in state in case they have $refs to save doing it later const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData)) - const data = removeEmpty(cloneDeep(formData)) + const data = removeEmpty(cloneDeep(formData)) || {} let selectedOption = this.getMatchingOption(NaN, data, retrievedOptions) if (Object.keys(data).length === 0) { selectedOption = NaN @@ -180,7 +180,7 @@ class OneOfField extends React.Component { onFocus, registry, schema, - uiSchema + uiSchema = {} } = this.props const { @@ -227,11 +227,11 @@ class OneOfField extends React.Component { value: index }))) - const { oneOf } = schema - const found = oneOf.some((value) => (value).properties) - if (!found) { - return null - } + // Const { oneOf } = schema + // const found = oneOf.some((value) => (value).properties) + // if (!found) { + // return null + // } return (
@@ -278,7 +278,8 @@ class OneOfField extends React.Component { OneOfField.defaultProps = { baseType: null, errorSchema: null, - formData: undefined + formData: null, + uiSchema: {} } OneOfField.propTypes = { @@ -316,7 +317,7 @@ OneOfField.propTypes = { onFocus: PropTypes.func.isRequired, uiSchema: PropTypes.shape({ 'ui:required': PropTypes.bool - }).isRequired + }) } diff --git a/static/src/js/constants/conceptTypeDraftQueries.js b/static/src/js/constants/conceptTypeDraftQueries.js index 727b18191..a37a82e60 100644 --- a/static/src/js/constants/conceptTypeDraftQueries.js +++ b/static/src/js/constants/conceptTypeDraftQueries.js @@ -1,12 +1,13 @@ import { SERVICE_DRAFT } from '../operations/queries/getServiceDraft' import { TOOL_DRAFT } from '../operations/queries/getToolDraft' import { COLLECTION_DRAFT } from '../operations/queries/getCollectionDraft' +import { VARIABLE_DRAFT } from '../operations/queries/getVariableDraft' const conceptTypeDraftQueries = { Collection: COLLECTION_DRAFT, Service: SERVICE_DRAFT, Tool: TOOL_DRAFT, - Variable: TOOL_DRAFT + Variable: VARIABLE_DRAFT } export default conceptTypeDraftQueries diff --git a/static/src/js/constants/conceptTypeDraftsQueries.js b/static/src/js/constants/conceptTypeDraftsQueries.js index a896bf5a8..613f6e01e 100644 --- a/static/src/js/constants/conceptTypeDraftsQueries.js +++ b/static/src/js/constants/conceptTypeDraftsQueries.js @@ -1,12 +1,13 @@ import { GET_SERVICE_DRAFTS } from '../operations/queries/getServiceDrafts' import { GET_TOOL_DRAFTS } from '../operations/queries/getToolDrafts' +import { GET_VARIABLE_DRAFTS } from '../operations/queries/getVariableDrafts' import { GET_COLLECTION_DRAFTS } from '../operations/queries/getCollectionDrafts' const conceptTypeDraftsQueries = { Collection: GET_COLLECTION_DRAFTS, Service: GET_SERVICE_DRAFTS, Tool: GET_TOOL_DRAFTS, - Variable: GET_TOOL_DRAFTS + Variable: GET_VARIABLE_DRAFTS } export default conceptTypeDraftsQueries diff --git a/static/src/js/operations/queries/getVariableDraft.js b/static/src/js/operations/queries/getVariableDraft.js new file mode 100644 index 000000000..e51a7c057 --- /dev/null +++ b/static/src/js/operations/queries/getVariableDraft.js @@ -0,0 +1,53 @@ +import { gql } from '@apollo/client' + +export const VARIABLE_DRAFT = gql` + query VariableDraft($params: DraftInput) { + draft(params: $params) { + conceptId + conceptType + deleted + name + nativeId + providerId + revisionDate + revisionId + ummMetadata + previewMetadata { + ... on Variable { + additionalIdentifiers + associationDetails + conceptId + dataType + definition + dimensions + fillValues + indexRanges + instanceInformation + longName + measurementIdentifiers + name + nativeId + offset + relatedUrls + samplingIdentifiers + scale + scienceKeywords + sets + standardName + units + validRanges + variableSubType + variableType + } + } + } + } +` + +// Example Variables: +// { +// "params": { +// "conceptId": "VD1200000096-MMT_2", +// "conceptType": "Variable" +// } +// } diff --git a/static/src/js/operations/queries/getVariableDrafts.js b/static/src/js/operations/queries/getVariableDrafts.js new file mode 100644 index 000000000..2dceead35 --- /dev/null +++ b/static/src/js/operations/queries/getVariableDrafts.js @@ -0,0 +1,30 @@ +import { gql } from '@apollo/client' + +// Query to retrieve service drafts for listing open drafts +export const GET_VARIABLE_DRAFTS = gql` + query VariableDrafts($params: DraftsInput) { + drafts(params: $params) { + count + items { + conceptId + revisionDate + previewMetadata { + ... on Variable { + name + longName + } + } + } + } + } +` + +// Example Variables: +// { +// "params": { +// "conceptType": "Variable", +// "limit": 5, +// "provider": "MMT_2", +// "sortKey": ["-revision_date"] +// } +// } diff --git a/static/src/js/schemas/uiForms/index.js b/static/src/js/schemas/uiForms/index.js index a7ced36a7..062154c68 100644 --- a/static/src/js/schemas/uiForms/index.js +++ b/static/src/js/schemas/uiForms/index.js @@ -1,11 +1,13 @@ import servicesConfiguration from './serviceConfiguration' import toolsConfiguration from './toolsConfiguration' import collectionsConfiguration from './collectionsConfiguration' +import variableConfiguration from './variableConfiguration' const formConfigurations = { Tool: toolsConfiguration, Service: servicesConfiguration, - Collection: collectionsConfiguration + Collection: collectionsConfiguration, + Variable: variableConfiguration } export default formConfigurations diff --git a/static/src/js/schemas/uiForms/variableConfiguration.js b/static/src/js/schemas/uiForms/variableConfiguration.js new file mode 100644 index 000000000..cf8a3c8ca --- /dev/null +++ b/static/src/js/schemas/uiForms/variableConfiguration.js @@ -0,0 +1,53 @@ +const variableConfiguration = [ + { + displayName: 'Variable Information', + properties: [ + 'Name', + 'StandardName', + 'LongName', + 'Definition', + 'AdditionalIdentifiers', + 'VariableType', + 'VariableSubType', + 'Units', + 'DataType', + 'Scale', + 'Offset', + 'ValidRanges', + 'IndexRanges' + ] + }, + { + displayName: 'Fill Values', + properties: ['FillValues'] + }, + { + displayName: 'Dimensions', + properties: ['Dimensions'] + }, + { + displayName: 'Measurement Identifiers', + properties: ['MeasurementIdentifiers'] + }, + { + displayName: 'Sampling Identifiers', + properties: ['SamplingIdentifiers'] + }, + { + displayName: 'Science Keywords', + properties: ['ScienceKeywords'] + }, + { + displayName: 'Sets', + properties: ['Sets'] + }, + { + displayName: 'Related URLs', + properties: ['RelatedURLs'] + }, + { + displayName: 'Instance Information', + properties: ['InstanceInformation'] + } +] +export default variableConfiguration diff --git a/static/src/js/schemas/uiSchemas/variables/dimensions.js b/static/src/js/schemas/uiSchemas/variables/dimensions.js new file mode 100644 index 000000000..6bf391b4e --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/dimensions.js @@ -0,0 +1,79 @@ +import CustomSelectWidget from '../../../components/CustomSelectWidget/CustomSelectWidget' + +const dimensionsUiSchema = { + 'ui:field': 'layout', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Dimensions'] + } + } + ] + } + ] + } + } + ] + }, + Dimensions: { + 'ui:heading-level': 'h3', + items: { + 'ui:field': 'layout', + 'ui:title': 'Dimension', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Name'] + } + } + ] + }, + { + 'ui:group': 'Size', + 'ui:row': [ + { + 'ui:col': { + md: 6, + children: ['Size'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Type'] + } + } + ] + } + ] + } + } + ] + }, + Type: { + 'ui:widget': CustomSelectWidget + } + } + } +} +export default dimensionsUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/fillValue.js b/static/src/js/schemas/uiSchemas/variables/fillValue.js new file mode 100644 index 000000000..8489d9010 --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/fillValue.js @@ -0,0 +1,62 @@ +import CustomSelectWidget from '../../../components/CustomSelectWidget/CustomSelectWidget' +import CustomTextareaWidget from '../../../components/CustomTextareaWidget/CustomTextareaWidget' +import CustomTextWidget from '../../../components/CustomTextWidget/CustomTextWidget' + +const fillValuesUiSchema = { + FillValues: { + 'ui:heading-level': 'h3', + items: { + 'ui:field': 'layout', + 'ui:title': 'Fill Value', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 6, + children: ['Value'] + } + }, + { + 'ui:col': { + md: 6, + children: ['Type'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Description'] + } + } + ] + } + + ] + } + } + ] + }, + Value: { + 'ui:widget': CustomTextWidget + }, + Type: { + 'ui:widget': CustomSelectWidget + + }, + Description: { + 'ui:widget': CustomTextareaWidget + } + } + } +} +export default fillValuesUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/index.js b/static/src/js/schemas/uiSchemas/variables/index.js new file mode 100644 index 000000000..592cfe804 --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/index.js @@ -0,0 +1,23 @@ +import dimensionsUiSchema from './dimensions' +import fillValuesUiSchema from './fillValue' +import measurementIdentifiersUiSchema from './measurementIdentifiers' +import SamplingIdentifiersUiSchema from './samplingIdentifiers' +import scienceKeywordsUiSchema from './scienceKeywords' +import variableInformationUiSchema from './variableInformation' +import relatedUrlsUiSchema from './relatedUrls' +import SetsUiSchema from './sets' +import instanceInformationUiSchema from './instanceInformation' + +const variableUiSchema = { + 'variable-information': variableInformationUiSchema, + 'fill-values': fillValuesUiSchema, + dimensions: dimensionsUiSchema, + 'measurement-identifiers': measurementIdentifiersUiSchema, + 'sampling-identifiers': SamplingIdentifiersUiSchema, + 'science-keywords': scienceKeywordsUiSchema, + sets: SetsUiSchema, + 'related-urls': relatedUrlsUiSchema, + 'instance-information': instanceInformationUiSchema +} + +export default variableUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/instanceInformation.js b/static/src/js/schemas/uiSchemas/variables/instanceInformation.js new file mode 100644 index 000000000..b5d8490d9 --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/instanceInformation.js @@ -0,0 +1,147 @@ +import CustomTextWidget from '../../../components/CustomTextWidget/CustomTextWidget' +import CustomSelectWidget from '../../../components/CustomSelectWidget/CustomSelectWidget' + +const instanceInformationUiSchema = { + 'ui:field': 'layout', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['InstanceInformation'] + } + } + ] + } + ] + } + } + ] + }, + InstanceInformation: { + 'ui:title': 'Instance Information', + 'ui:heading-level': 'h3', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['URL'] + } + }, + { + 'ui:col': { + md: 12, + children: ['Format'] + } + }, + { + 'ui:col': { + md: 12, + children: ['Description'] + } + }, + { + 'ui:col': { + md: 12, + children: ['DirectDistributionInformation'] + } + }, + { + 'ui:col': { + md: 12, + children: ['ChunkingInformation'] + } + } + ] + } + ] + } + } + ] + }, + Format: { + 'ui:widget': CustomSelectWidget, + 'ui:controlled': { + name: 'granule-data-format', + controlName: 'short_name' + } + }, + Description: { + 'ui:widget': 'textarea' + }, + DirectDistributionInformation: { + 'ui:field': 'layout', + 'ui:heading-level': 'h4', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:group': 'Direct Distribution Information', + 'ui:group-description': true, + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Region'] + } + }, + { + 'ui:col': { + md: 12, + children: ['S3BucketAndObjectPrefixNames'] + } + }, + { + 'ui:col': { + md: 12, + children: ['S3CredentialsAPIEndpoint'] + } + }, + { + 'ui:col': { + md: 12, + children: ['S3CredentialsAPIDocumentationURL'] + } + } + ] + } + ] + } + } + ] + }, + S3BucketAndObjectPrefixNames: { + 'ui:title': 'S3 Bucket and Object Prefix Name', + 'ui:heading-level': 'h4', + items: { + 'ui:title': 'S3 Bucket and Object Prefix Name' + } + }, + S3CredentialsAPIEndpoint: { + 'ui:title': 'S3 Credentials API Endpoint', + 'ui:widget': CustomTextWidget + }, + S3CredentialsAPIDocumentationURL: { + 'ui:title': 'S3 Credentials API Documentation URL', + 'ui:widget': CustomTextWidget + } + } + } +} +export default instanceInformationUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/measurementIdentifiers.js b/static/src/js/schemas/uiSchemas/variables/measurementIdentifiers.js new file mode 100644 index 000000000..461a7186c --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/measurementIdentifiers.js @@ -0,0 +1,152 @@ +import CustomSelectWidget from '../../../components/CustomSelectWidget/CustomSelectWidget' +import CustomTextWidget from '../../../components/CustomTextWidget/CustomTextWidget' + +const measurementIdentifiersUiSchema = { + MeasurementIdentifiers: { + 'ui:title': 'Measurement Identifiers', + items: { + 'ui:field': 'layout', + 'ui:title': 'Measurement Identifier', + 'ui:controlled': { + name: 'measurement_name', + map: { + MeasurementContextMedium: 'context_medium', + MeasurementObject: 'object' + }, + clearAdditions: ['MeasurementQuantities.Value'] + }, + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + controlName: 'context_medium', + children: ['MeasurementContextMedium'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['MeasurementContextMediumURI'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + controlName: 'object', + children: ['MeasurementObject'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['MeasurementObjectURI'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['MeasurementQuantities'] + } + } + ] + } + + ] + } + } + ] + }, + MeasurementContextMedium: { + 'ui:widget': CustomSelectWidget + }, + MeasurementContextMediumURI: { + 'ui:widget': CustomTextWidget + }, + MeasurementObject: { + 'ui:title': 'Measurement Object', + 'ui:widget': CustomSelectWidget + }, + MeasurementObjectURI: { + 'ui:widget': CustomTextWidget + }, + MeasurementQuantities: { + 'ui:title': 'Measurement Quantity', + items: { + 'ui:title': 'Measurement Quantity', + 'ui:field': 'layout', + 'ui:controlled': { + name: 'measurement_name', + map: { + MeasurementContextMedium: 'context_medium', + MeasurementObject: 'object', + Value: 'quantity' + }, + includeParentFormData: true + }, + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + controlName: 'quantity', + children: ['Value'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['MeasurementQuantityURI'] + } + } + ] + } + ] + } + } + ] + }, + Value: { + 'ui:widget': CustomSelectWidget + }, + MeasurementQuantityURI: { + 'ui:widget': CustomTextWidget + } + } + } + } + } +} +export default measurementIdentifiersUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/relatedUrls.js b/static/src/js/schemas/uiSchemas/variables/relatedUrls.js new file mode 100644 index 000000000..ace35de8f --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/relatedUrls.js @@ -0,0 +1,123 @@ +import CustomSelectWidget from '../../../components/CustomSelectWidget/CustomSelectWidget' + +const relatedUrlsUiSchema = { + RelatedURLs: { + 'ui:title': 'Related URLs', + 'ui:heading-level': 'h3', + items: { + 'ui:field': 'layout', + 'ui:title': 'Related URL', + 'ui:controlled': { + name: 'related-urls', + map: { + URLContentType: 'url_content_type', + Type: 'type', + Subtype: 'subtype' + } + }, + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Description'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + controlName: 'url_content_type', + md: 12, + children: ['URLContentType'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + controlName: 'type', + md: 12, + children: ['Type'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + controlName: 'subtype', + md: 12, + children: ['Subtype'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['URL'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Format'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['MimeType'] + } + } + ] + } + ] + } + } + ] + }, + Description: { + 'ui:widget': 'textarea' + }, + Format: { + 'ui:widget': CustomSelectWidget, + 'ui:controlled': { + name: 'granule-data-format', + controlName: 'short_name' + } + }, + MimeType: { + 'ui:widget': CustomSelectWidget, + 'ui:controlled': { + name: 'mime-type', + controlName: 'mime_type' + } + + } + } + } +} +export default relatedUrlsUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/samplingIdentifiers.js b/static/src/js/schemas/uiSchemas/variables/samplingIdentifiers.js new file mode 100644 index 000000000..7ffb801c3 --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/samplingIdentifiers.js @@ -0,0 +1,62 @@ +const SamplingIdentifiersUiSchema = { + SamplingIdentifiers: { + 'ui:heading-level': 'h3', + items: { + 'ui:field': 'layout', + 'ui:title': 'Sampling Identifier', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['SamplingMethod'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['MeasurementConditions'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['ReportingConditions'] + } + } + ] + } + ] + } + } + ] + }, + SamplingMethod: { + 'ui:widget': 'textarea' + }, + MeasurementConditions: { + 'ui:widget': 'textarea' + }, + ReportingConditions: { + 'ui:widget': 'textarea' + } + + } + + } +} +export default SamplingIdentifiersUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/scienceKeywords.js b/static/src/js/schemas/uiSchemas/variables/scienceKeywords.js new file mode 100644 index 000000000..1047f1375 --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/scienceKeywords.js @@ -0,0 +1,35 @@ +const scienceKeywordsUiSchema = { + 'ui:field': 'layout', + 'ui:heading-level': 'h3', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:group': 'Science Keywords', + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['ScienceKeywords'] + } + } + ] + } + ] + } + } + ] + }, + ScienceKeywords: { + 'ui:field': 'keywordPicker', + 'ui:keyword_scheme': 'science_keywords', + 'ui:picker_title': 'SERVICE KEYWORD', + 'ui:keyword_scheme_column_names': ['sciencekeywords', 'category', 'topic', 'term', 'variable_level_1', 'variable_level_2', 'variable_level_3'], + 'ui:filter': 'EARTH SCIENCE', + 'ui:scheme_values': ['Category', 'Topic', 'Term', 'VariableLevel1', 'VariableLevel2', 'VariableLevel3'] + } +} +export default scienceKeywordsUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/sets.js b/static/src/js/schemas/uiSchemas/variables/sets.js new file mode 100644 index 000000000..809309ca8 --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/sets.js @@ -0,0 +1,57 @@ +const SetsUiSchema = { + Sets: { + 'ui:heading-level': 'h3', + items: { + 'ui:field': 'layout', + 'ui:title': 'Set', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Name'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Type'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 6, + children: ['Size'] + } + }, + { + 'ui:col': { + md: 6, + children: ['Index'] + } + } + ] + } + ] + } + } + ] + } + } + } +} +export default SetsUiSchema diff --git a/static/src/js/schemas/uiSchemas/variables/variableInformation.js b/static/src/js/schemas/uiSchemas/variables/variableInformation.js new file mode 100644 index 000000000..15776a163 --- /dev/null +++ b/static/src/js/schemas/uiSchemas/variables/variableInformation.js @@ -0,0 +1,303 @@ +import CustomSelectWidget from '../../../components/CustomSelectWidget/CustomSelectWidget' + +const variableInformationUiSchema = { + 'ui:heading-level': 'h3', + 'ui:field': 'layout', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:group': 'Variable Information', + 'ui:required': true, + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 6, + children: ['Name'] + } + }, + { + 'ui:col': { + md: 6, + children: ['StandardName'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['LongName'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Definition'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['AdditionalIdentifiers'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 6, + children: ['VariableType'] + } + }, + { + 'ui:col': { + md: 6, + children: ['VariableSubType'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 6, + children: ['Units'] + } + }, + { + 'ui:col': { + md: 6, + children: ['DataType'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 6, + children: ['Scale'] + } + }, + { + 'ui:col': { + md: 6, + children: ['Offset'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['ValidRanges'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['IndexRanges'] + } + } + ] + } + ] + } + } + ] + }, + Scale: { + 'ui:type': 'number' + }, + Offset: { + 'ui:type': 'number' + }, + Definition: { + 'ui:widget': 'textarea' + }, + AdditionalIdentifiers: { + 'ui:heading-level': 'h4', + items: { + 'ui:field': 'layout', + 'ui:title': 'Additional Identifier', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Identifier'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['Description'] + } + } + ] + } + ] + } + } + ] + }, + Description: { + 'ui:widget': 'textarea' + } + } + }, + VariableType: { + 'ui:widget': CustomSelectWidget + }, + VariableSubType: { + 'ui:widget': CustomSelectWidget + }, + DataType: { + 'ui:widget': CustomSelectWidget + }, + ValidRanges: { + 'ui:heading-level': 'h4', + items: { + 'ui:field': 'layout', + 'ui:title': 'Valid Range', + 'ui:layout_grid': { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 6, + children: ['Min'] + } + }, + { + 'ui:col': { + md: 6, + children: ['Max'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['CodeSystemIdentifierMeaning'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['CodeSystemIdentifierValue'] + } + } + ] + } + ] + } + } + ] + }, + CodeSystemIdentifierMeaning: { + 'ui:header-classname': 'h3-title' + }, + CodeSystemIdentifierValue: { + 'ui:header-classname': 'h3-title' + } + } + }, + IndexRanges: { + 'ui:field': 'layout', + 'ui:title': 'Index Ranges', + 'ui:layout_grid': { + 'ui:group': 'Index Ranges', + 'ui:group-description': true, + 'ui:group-single-panel': true, + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: [ + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['LatRange'] + } + } + ] + }, + { + 'ui:row': [ + { + 'ui:col': { + md: 12, + children: ['LonRange'] + } + } + ] + } + ] + } + } + ] + }, + LatRange: { + 'ui:canAdd': false, + items: { + 'ui:type': 'number' + } + }, + LonRange: { + 'ui:canAdd': false, + items: { + 'ui:type': 'number' + } + } + } +} +export default variableInformationUiSchema diff --git a/static/src/js/utils/__tests__/getUiSchema.test.js b/static/src/js/utils/__tests__/getUiSchema.test.js index dec91b95f..bce753bab 100644 --- a/static/src/js/utils/__tests__/getUiSchema.test.js +++ b/static/src/js/utils/__tests__/getUiSchema.test.js @@ -1,5 +1,6 @@ import serviceUiSchema from '../../schemas/uiSchemas/services' import toolsUiSchema from '../../schemas/uiSchemas/tools' +import variableUiSchema from '../../schemas/uiSchemas/variables' import getUiSchema from '../getUiSchema' describe('getUiSchema', () => { @@ -15,10 +16,9 @@ describe('getUiSchema', () => { }) }) - // TODO MMT-3418 describe('when the concept type is variable-draft', () => { - test.skip('returns the UMM-V schema', () => { - expect(getUiSchema('Variable')).toEqual('Replace with Variable uiSchema') + test('returns the UMM-V schema', () => { + expect(getUiSchema('Variable')).toEqual(variableUiSchema) }) }) @@ -28,4 +28,10 @@ describe('getUiSchema', () => { expect(getUiSchema('Collection')).toEqual('Replace with Collection uiSchema') }) }) + + describe('when the concept type is not recognized', () => { + test('returns null', () => { + expect(getUiSchema('bad-draft')).toEqual(null) + }) + }) }) diff --git a/static/src/js/utils/getUiSchema.js b/static/src/js/utils/getUiSchema.js index d9a5cbc30..67b0096cc 100644 --- a/static/src/js/utils/getUiSchema.js +++ b/static/src/js/utils/getUiSchema.js @@ -1,5 +1,6 @@ import serviceUiSchema from '../schemas/uiSchemas/services' import toolsUiSchema from '../schemas/uiSchemas/tools' +import variableUiSchema from '../schemas/uiSchemas/variables' /** * Returns the UI Schema of the provided conceptType @@ -14,7 +15,7 @@ const getUiSchema = (conceptType) => { case 'Tool': return toolsUiSchema case 'Variable': - return 'variableUiSchema' + return variableUiSchema default: return null }