From c4cc8cb078eeed7aba167f5263d65bae3bf6e115 Mon Sep 17 00:00:00 2001 From: Lucas Di Pentima Date: Wed, 10 Nov 2021 20:27:17 -0300 Subject: [PATCH] 17944: Adds property key/value auto-selection when changing focus. Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima --- cypress/integration/collection.spec.js | 27 +++++++++++++++++-- src/models/vocabulary.ts | 4 +-- .../property-key-field.tsx | 11 ++++++-- .../property-value-field.tsx | 11 ++++++-- 4 files changed, 45 insertions(+), 8 deletions(-) diff --git a/cypress/integration/collection.spec.js b/cypress/integration/collection.spec.js index fb126af6..3e06d7e5 100644 --- a/cypress/integration/collection.spec.js +++ b/cypress/integration/collection.spec.js @@ -97,14 +97,37 @@ describe('Collection panel tests', function () { }); // Confirm proper vocabulary labels are displayed on the UI. cy.get('[data-cy=collection-properties-panel]') - .should('contain', 'Color') - .and('contain', 'Magenta'); + .should('contain', 'Color: Magenta'); // Confirm proper vocabulary IDs were saved on the backend. cy.doRequest('GET', `/arvados/v1/collections/${this.testCollection.uuid}`) .its('body').as('collection') .then(function () { expect(this.collection.properties.IDTAGCOLORS).to.equal('IDVALCOLORS3'); }); + + // Case-insensitive on-blur auto-selection test + // Key: Size (IDTAGSIZES) - Value: Small (IDVALSIZES2) + cy.get('[data-cy=resource-properties-form]').within(() => { + cy.get('[data-cy=property-field-key]').within(() => { + cy.get('input').type('sIzE'); + }); + cy.get('[data-cy=property-field-value]').within(() => { + cy.get('input').type('sMaLL'); + }); + // Cannot "type()" TAB on Cypress so let's click another field + // to trigger the onBlur event. + cy.get('[data-cy=property-field-key]').click(); + cy.root().submit(); + }); + // Confirm proper vocabulary labels are displayed on the UI. + cy.get('[data-cy=collection-properties-panel]') + .should('contain', 'Size: S'); + // Confirm proper vocabulary IDs were saved on the backend. + cy.doRequest('GET', `/arvados/v1/collections/${this.testCollection.uuid}`) + .its('body').as('collection') + .then(function () { + expect(this.collection.properties.IDTAGSIZES).to.equal('IDVALSIZES2'); + }); }); }); diff --git a/src/models/vocabulary.ts b/src/models/vocabulary.ts index 03f28c07..3c542844 100644 --- a/src/models/vocabulary.ts +++ b/src/models/vocabulary.ts @@ -47,7 +47,7 @@ export const getTagValueID = (tagKeyID:string, tagValueLabel:string, vocabulary: (tagKeyID && vocabulary.tags[tagKeyID] && vocabulary.tags[tagKeyID].values) ? Object.keys(vocabulary.tags[tagKeyID].values!).find( k => vocabulary.tags[tagKeyID].values![k].labels.find( - l => l.label === tagValueLabel) !== undefined) || '' + l => l.label.toLowerCase() === tagValueLabel.toLowerCase()) !== undefined) || '' : ''; export const getTagValueLabel = (tagKeyID:string, tagValueID:string, vocabulary: Vocabulary) => @@ -94,7 +94,7 @@ export const getTags = ({ tags }: Vocabulary) => { export const getTagKeyID = (tagKeyLabel:string, vocabulary: Vocabulary) => Object.keys(vocabulary.tags).find( k => vocabulary.tags[k].labels.find( - l => l.label === tagKeyLabel) !== undefined + l => l.label.toLowerCase() === tagKeyLabel.toLowerCase()) !== undefined ) || ''; export const getTagKeyLabel = (tagKeyID:string, vocabulary: Vocabulary) => diff --git a/src/views-components/resource-properties-form/property-key-field.tsx b/src/views-components/resource-properties-form/property-key-field.tsx index 029d44cc..791949f5 100644 --- a/src/views-components/resource-properties-form/property-key-field.tsx +++ b/src/views-components/resource-properties-form/property-key-field.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { WrappedFieldProps, Field, FormName, reset, change, WrappedFieldInputProps, WrappedFieldMetaProps } from 'redux-form'; import { memoize } from 'lodash'; import { Autocomplete } from 'components/autocomplete/autocomplete'; -import { Vocabulary, getTags, getTagKeyID } from 'models/vocabulary'; +import { Vocabulary, getTags, getTagKeyID, getTagKeyLabel } from 'models/vocabulary'; import { handleSelect, handleBlur, @@ -39,7 +39,14 @@ const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & Vocabula label='Key' suggestions={getSuggestions(props.input.value, vocabulary)} onSelect={handleSelect(PROPERTY_KEY_FIELD_ID, data.form, props.input, props.meta)} - onBlur={handleBlur(PROPERTY_KEY_FIELD_ID, data.form, props.meta, props.input, getTagKeyID(props.input.value, vocabulary))} + onBlur={() => { + // Case-insensitive search for the key in the vocabulary + const foundKeyID = getTagKeyID(props.input.value, vocabulary); + if (foundKeyID !== '') { + props.input.value = getTagKeyLabel(foundKeyID, vocabulary); + } + handleBlur(PROPERTY_KEY_FIELD_ID, data.form, props.meta, props.input, foundKeyID)(); + }} onChange={(e: ChangeEvent) => { const newValue = e.currentTarget.value; handleChange(data.form, props.input, props.meta, newValue); diff --git a/src/views-components/resource-properties-form/property-value-field.tsx b/src/views-components/resource-properties-form/property-value-field.tsx index a2b53b3c..b023e412 100644 --- a/src/views-components/resource-properties-form/property-value-field.tsx +++ b/src/views-components/resource-properties-form/property-value-field.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { WrappedFieldProps, Field, formValues, FormName, WrappedFieldInputProps, WrappedFieldMetaProps, change } from 'redux-form'; import { compose } from 'redux'; import { Autocomplete } from 'components/autocomplete/autocomplete'; -import { Vocabulary, isStrictTag, getTagValues, getTagValueID } from 'models/vocabulary'; +import { Vocabulary, isStrictTag, getTagValues, getTagValueID, getTagValueLabel } from 'models/vocabulary'; import { PROPERTY_KEY_FIELD_ID, PROPERTY_KEY_FIELD_NAME } from 'views-components/resource-properties-form/property-key-field'; import { handleSelect, @@ -60,7 +60,14 @@ const PropertyValueInput = ({ vocabulary, propertyKeyId, propertyKeyName, ...pro disabled={props.disabled} suggestions={getSuggestions(props.input.value, propertyKeyId, vocabulary)} onSelect={handleSelect(PROPERTY_VALUE_FIELD_ID, data.form, props.input, props.meta)} - onBlur={handleBlur(PROPERTY_VALUE_FIELD_ID, data.form, props.meta, props.input, getTagValueID(propertyKeyId, props.input.value, vocabulary))} + onBlur={() => { + // Case-insensitive search for the value in the vocabulary + const foundValueID = getTagValueID(propertyKeyId, props.input.value, vocabulary); + if (foundValueID !== '') { + props.input.value = getTagValueLabel(propertyKeyId, foundValueID, vocabulary); + } + handleBlur(PROPERTY_VALUE_FIELD_ID, data.form, props.meta, props.input, foundValueID)(); + }} onChange={(e: ChangeEvent) => { const newValue = e.currentTarget.value; const tagValueID = getTagValueID(propertyKeyId, newValue, vocabulary); -- 2.30.2