mirror of
https://github.com/datahub-project/datahub.git
synced 2025-10-17 11:58:10 +00:00
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:
parent
4e6e46e9eb
commit
f2219bdd1d
@ -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'));
|
||||
});
|
||||
|
||||
/**
|
||||
|
@ -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) {
|
||||
|
90
wherehows-web/app/components/radio-button-composer.ts
Normal file
90
wherehows-web/app/components/radio-button-composer.ts
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
@ -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,
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user