refactors RadioButtonComposer element. renames compliance util function idFieldHasLogicalType to idTagHasLogicalType: semantically more aligned with mutli-tagging feature. fixes styling for field tag properties dropdown modal

This commit is contained in:
Seyi Adebajo 2018-06-05 22:52:11 -07:00
parent 4e6e46e9eb
commit f2219bdd1d
6 changed files with 117 additions and 13 deletions

View File

@ -3,7 +3,7 @@ import ComputedProperty from '@ember/object/computed';
import { set, get, getProperties, computed } from '@ember/object';
import {
ComplianceFieldIdValue,
idTypeFieldHasLogicalType,
idTypeTagHasLogicalType,
isTagIdType,
NonIdLogicalType
} from 'wherehows-web/constants';
@ -161,7 +161,7 @@ export default class DatasetComplianceFieldTag extends Component {
* @memberof DatasetComplianceFieldTag
*/
isTagFormatMissing = computed('isIdType', 'tag.logicalType', function(this: DatasetComplianceFieldTag): boolean {
return get(this, 'isIdType') && !idTypeFieldHasLogicalType(get(this, 'tag'));
return get(this, 'isIdType') && !idTypeTagHasLogicalType(get(this, 'tag'));
});
/**

View File

@ -26,7 +26,7 @@ import {
mergeComplianceEntitiesWithSuggestions,
tagsRequiringReview,
isTagIdType,
idTypeFieldsHaveLogicalType,
idTypeTagsHaveLogicalType,
changeSetReviewableAttributeTriggers,
asyncMapSchemaColumnPropsToCurrentPrivacyPolicy,
foldComplianceChangeSets,
@ -827,7 +827,7 @@ export default class DatasetCompliance extends Component {
const idTypeComplianceEntities = complianceEntities.filter(isTagIdType(get(this, 'complianceDataTypes')));
// Validation operations
const idFieldsHaveValidLogicalType: boolean = idTypeFieldsHaveLogicalType(idTypeComplianceEntities);
const idFieldsHaveValidLogicalType: boolean = idTypeTagsHaveLogicalType(idTypeComplianceEntities);
const isSchemaFieldLengthGreaterThanUniqComplianceEntities: boolean = this.isSchemaFieldLengthGreaterThanUniqComplianceEntities();
if (!isSchemaFieldLengthGreaterThanUniqComplianceEntities) {

View File

@ -0,0 +1,90 @@
import { get, getWithDefault, computed } from '@ember/object';
import ComputedProperty from '@ember/object/computed';
import RadioButton from 'ember-radio-button/components/radio-button';
import { action } from '@ember-decorators/object';
export default class RadioButtonComposer extends RadioButton.extend({
// RadioButton is a fragment, to allow DOM events, override with a DOM element
tagName: 'span'
}) {
classNameBindings = ['_disabledClass', '_checkedClass'];
/**
* Specifies the className to be added to the component when the class has a disabled
* property that evaluates to a truthy value
* @type {string}
* @memberof RadioButtonComposer
*/
disabledClass: string;
/**
* Resolves the class name binding for a component instance that is disabled i.e.
* disabled attribute is truthy
* @type {ComputedProperty<string>}
* @memberof RadioButtonComposer
*/
_disabledClass: ComputedProperty<string> = computed('disabled', function(this: RadioButtonComposer): string {
const disabledClass = getWithDefault(this, 'disabledClass', '');
return get(this, 'disabled') ? disabledClass : '';
});
/**
* Resolves the class name binding for a component instance this is checked,
* returns the inherited checkedClass property on RadioButton component, or
* the runtime attribute with the same name
* @type {ComputedProperty<string>}
* @memberof RadioButtonComposer
*/
_checkedClass: ComputedProperty<string> = computed('checked', function(this: RadioButtonComposer): string {
const checkedClass = get(this, 'checkedClass');
return get(this, 'checked') ? checkedClass : '';
});
didReceiveAttrs() {
this._super(...arguments);
// ensures that the values a supplied at the component call site
['name', 'groupValue', 'value'].forEach(attr => {
if (!(attr in this)) {
throw new Error(`Attribute '${attr}' is required to be passed in when instantiating this component.`);
}
});
}
/**
* Handles the mouseenter event on the component element and invokes
* the external action if provided as an attribute
*/
mouseEnter() {
const onMouseEnter = get(this, 'onMouseEnter');
if (typeof onMouseEnter === 'function') {
onMouseEnter({ value: get(this, 'value') });
}
}
/**
* Handles the mouseleave event on the component element and invokes
* the external action if provided as an attribute
*/
mouseLeave() {
const onMouseLeave = get(this, 'onMouseLeave');
if (typeof onMouseLeave === 'function') {
onMouseLeave({ value: get(this, 'value') });
}
}
/**
* Invokes the external changed action component attribute
* using spread args due to TS/ember-decorator being unable to discriminate
* action vs component attribute
* @param _args
*/
@action
changed(..._args: Array<any>): void {
const closureAction = get(this, 'changed');
if (typeof closureAction === 'function') {
return closureAction(...arguments);
}
}
}

View File

@ -53,7 +53,7 @@ const compliancePolicyStrings = {
* @type {string}
*/
const changeSetReviewableAttributeTriggers =
'isDirty,suggestion,privacyPolicyExists,suggestionAuthority,logicalType,identifierType';
'isDirty,suggestion,privacyPolicyExists,suggestionAuthority,logicalType,identifierType,nonOwner';
/**
* Takes a compliance data type and transforms it into a compliance field identifier option
@ -206,7 +206,7 @@ const tagNeedsReview = (complianceDataTypes: Array<IComplianceDataType>) =>
}
if (isTagIdType(complianceDataTypes)(tag)) {
isReviewRequired = isReviewRequired || !idTypeFieldHasLogicalType(tag);
isReviewRequired = isReviewRequired || !idTypeTagHasLogicalType(tag) || !tagOwnerIsSet(tag);
}
// If either the privacy policy doesn't exists, or user hasn't made changes, then review is required
return isReviewRequired || !(privacyPolicyExists || isDirty);
@ -289,13 +289,15 @@ const fieldTagsHaveIdentifierType = arrayEvery(tagHasIdentifierType);
* @param {IComplianceEntity} { logicalType }
* @returns {boolean}
*/
const idTypeFieldHasLogicalType = ({ logicalType }: IComplianceEntity): boolean => !!logicalType;
const idTypeTagHasLogicalType = ({ logicalType }: Pick<IComplianceEntity, 'logicalType'>): boolean => !!logicalType;
const tagOwnerIsSet = ({ nonOwner }: Pick<IComplianceChangeSet, 'nonOwner'>): boolean => typeof nonOwner === 'boolean';
/**
* Asserts that a list of compliance entities each have a logicalType attribute value
* @type {(array: IComplianceEntity[]) => boolean}
*/
const idTypeFieldsHaveLogicalType = arrayEvery(idTypeFieldHasLogicalType);
const idTypeTagsHaveLogicalType = arrayEvery(idTypeTagHasLogicalType);
/**
* Describes the function interface for tagsForIdentifierField
@ -581,8 +583,8 @@ export {
initialComplianceObjectFactory,
getIdTypeDataTypes,
fieldTagsHaveIdentifierType,
idTypeFieldHasLogicalType,
idTypeFieldsHaveLogicalType,
idTypeTagHasLogicalType,
idTypeTagsHaveLogicalType,
changeSetReviewableAttributeTriggers,
asyncMapSchemaColumnPropsToCurrentPrivacyPolicy,
foldComplianceChangeSets,

View File

@ -126,12 +126,15 @@
}
&__tag-radio {
$hover-state: get-color(gray1);
width: 100%;
padding: item-spacing(1 4 0);
padding: item-spacing(1 2 0 4);
.ember-radio-button {
color: get-color(black, 0.6);
left: 0;
width: 100%;
&::before,
&::after {
@ -140,7 +143,7 @@
}
&:hover {
background-color: get-color(gray1);
background-color: $hover-state;
}
&--disabled {
@ -157,6 +160,10 @@
&--checked {
background-color: get-color(blue0);
&:hover {
background-color: $hover-state;
}
.ember-radio-button {
color: get-color(blue7);
}

View File

@ -210,8 +210,10 @@
value=tagOption.value
name="datasetFieldClassification"
groupValue=(readonly tag.identifierType)
disabled=tagOption.isDisabled
class="dataset-compliance-fields__tag-radio"
disabled=tagOption.isDisabled
disabledClass="dataset-compliance-fields__tag-radio--disabled"
checkedClass="dataset-compliance-fields__tag-radio--checked"
onMouseEnter=(action tagRowComponent.onFieldTagIdentifierEnter)
onMouseLeave=(action tagRowComponent.onFieldTagIdentifierLeave)
changed=(action metrics.trackOnAction (action tagRowComponent.tagIdentifierTypeDidChange))}}
@ -256,6 +258,7 @@
name="datasetFieldFieldFormat"
groupValue=(readonly tag.logicalType)
class="dataset-compliance-fields__tag-radio"
checkedClass="dataset-compliance-fields__tag-radio--checked"
changed=(action metrics.trackOnAction (action tagRowComponent.tagLogicalTypeDidChange))}}
{{fieldFormat.label}}
{{/radio-button-composer}}
@ -315,6 +318,7 @@
name="datasetFieldOwnerToggle"
groupValue=(readonly tag.nonOwner)
class="dataset-compliance-fields__tag-radio"
checkedClass="dataset-compliance-fields__tag-radio--checked"
changed=(action tagRowComponent.tagOwnerDidChange)}}
Yes
{{/radio-button-composer}}
@ -324,6 +328,7 @@
name="datasetFieldOwnerToggle"
groupValue=(readonly tag.nonOwner)
class="dataset-compliance-fields__tag-radio"
checkedClass="dataset-compliance-fields__tag-radio--checked"
changed=(action tagRowComponent.tagOwnerDidChange)}}
No
{{/radio-button-composer}}