mirror of
https://github.com/datahub-project/datahub.git
synced 2026-01-06 14:57:12 +00:00
updates sytles and text for json uploader component. updates member data component styles
This commit is contained in:
Seyi Adebajo
parent
ef4e304862
commit
b5b2b2b8ba
@ -19,7 +19,11 @@ export default Component.extend({
|
||||
* Action handler for click event, invokes closure action with type as argument
|
||||
*/
|
||||
click() {
|
||||
const { intent, action } = getProperties(this, 'type', 'action');
|
||||
const { type: intent, action } = <{ type: string | void; action: Function | void }>getProperties(
|
||||
this,
|
||||
'type',
|
||||
'action'
|
||||
);
|
||||
|
||||
if (typeof action === 'function') {
|
||||
return action(intent);
|
||||
@ -14,6 +14,12 @@ const { computed, get, getProperties } = Ember;
|
||||
*/
|
||||
const acceptIntent = 'accept';
|
||||
|
||||
/**
|
||||
* String indicating that the user ignored a suggestion
|
||||
* @type {string}
|
||||
*/
|
||||
const ignoreIntent = 'ignore';
|
||||
|
||||
/**
|
||||
* Checks if the identifierType is a mixed Id
|
||||
* @param {string} identifierType
|
||||
@ -93,6 +99,23 @@ export default DatasetTableRow.extend({
|
||||
*/
|
||||
dataType: computed.alias('field.dataType'),
|
||||
|
||||
/**
|
||||
* aliases the suggestionAuthority field property if present
|
||||
* @type {Ember.computed}
|
||||
*/
|
||||
suggestionAuthority: computed.alias('field.suggestionAuthority'),
|
||||
|
||||
/**
|
||||
* Maps the suggestion response to a string resolution
|
||||
* @type {Ember.computed}
|
||||
*/
|
||||
suggestionResolution: computed('field.suggestionAuthority', function() {
|
||||
return {
|
||||
[acceptIntent]: 'Accepted',
|
||||
[ignoreIntent]: 'Discarded'
|
||||
}[get(this, 'field.suggestionAuthority')];
|
||||
}),
|
||||
|
||||
/**
|
||||
* Checks if the field format drop-down should be disabled based on the type of the field
|
||||
* @type {Ember.computed}
|
||||
|
||||
@ -323,14 +323,16 @@ export default Component.extend({
|
||||
datasetClassification: computed(`${datasetClassificationKey}.{${datasetClassifiersKeys.join(',')}}`, function() {
|
||||
const sourceDatasetClassification = get(this, datasetClassificationKey) || {};
|
||||
|
||||
return Object.keys(datasetClassifiers).reduce((datasetClassification, classifier) => {
|
||||
return Object.assign({}, datasetClassification, {
|
||||
[classifier]: {
|
||||
return Object.keys(datasetClassifiers).sort().reduce((classifiers, classifier) => {
|
||||
return [
|
||||
...classifiers,
|
||||
{
|
||||
classifier,
|
||||
value: sourceDatasetClassification[classifier],
|
||||
label: datasetClassifiers[classifier]
|
||||
}
|
||||
});
|
||||
}, {});
|
||||
];
|
||||
}, []);
|
||||
}),
|
||||
|
||||
/**
|
||||
|
||||
@ -53,7 +53,8 @@ $color-scheme: (
|
||||
blue: (
|
||||
oxford: rgb(53, 75, 87),
|
||||
curious: rgb(26, 161, 217),
|
||||
eastern: rgb(26, 132, 188)
|
||||
eastern: rgb(26, 132, 188),
|
||||
blue5: rgb(26, 161, 217)
|
||||
),
|
||||
grey: (
|
||||
light: rgb(237, 237, 237),
|
||||
|
||||
@ -9,7 +9,19 @@
|
||||
|
||||
/// Forces td cells on dataset field classification table to not wrap
|
||||
.dataset-field-content {
|
||||
white-space: nowrap;
|
||||
&__prompt {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__header {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/// Default visual state for dataset-field-value selector
|
||||
|
||||
@ -13,30 +13,26 @@
|
||||
}
|
||||
|
||||
&__header {
|
||||
font-size: 24px;
|
||||
font-weight: fw(normal, 2);
|
||||
font-size: 20px;
|
||||
font-weight: fw(normal, 4);
|
||||
}
|
||||
}
|
||||
|
||||
/// Wraps a status notification icon for a given dataset
|
||||
.dataset-tag-container {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dataset-classification-indicator {
|
||||
/// A notification that a dataset contains a tag
|
||||
&--tagged {
|
||||
&::before {
|
||||
color: set-color(green, green5);
|
||||
}
|
||||
color: set-color(green, green5);
|
||||
}
|
||||
|
||||
/// A notification that a dataset does not contains a tag
|
||||
&--not-tagged {
|
||||
&::before {
|
||||
color: set-color(red, red5);
|
||||
}
|
||||
color: set-color(red, red5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,23 @@
|
||||
.nacho-uploader {
|
||||
@include flex-center;
|
||||
display: inline-flex;
|
||||
display: block;
|
||||
|
||||
&__label {
|
||||
width: 250px;
|
||||
margin-bottom: 0;
|
||||
padding-right: 5px;
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
&__cta,
|
||||
&__cta-subtext {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
font-size: 20px;
|
||||
font-weight: fw(normal, 4);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__cta-subtext {
|
||||
font-weight: fw(normal, 4);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -15,6 +15,10 @@
|
||||
border-color: $compliance-suggestion-hint;
|
||||
}
|
||||
|
||||
&--is-unsaved {
|
||||
border-color: set-color(blue, blue5);
|
||||
}
|
||||
|
||||
/// Adapts the notification-dot for a tab header
|
||||
&--on-tab {
|
||||
position: absolute;
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
fieldFormats=fieldFormats
|
||||
logicalType=logicalType
|
||||
classification=classification
|
||||
suggestionAuthority=suggestionAuthority
|
||||
suggestionResolution=suggestionResolution
|
||||
suggestion=prediction
|
||||
onFieldIdentifierTypeChange=(action 'onFieldIdentifierTypeChange')
|
||||
onFieldClassificationChange=(action 'onFieldClassificationChange')
|
||||
|
||||
@ -51,11 +51,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{#if isEditing}}
|
||||
{{#if (not _hasBadData)}}
|
||||
{{json-upload receiveJsonFile=(action "onComplianceJsonUpload") class="secondary-actions__action"}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{#unless isEditing}}
|
||||
<button
|
||||
{{action "onEdit"}}
|
||||
class="nacho-button--large nacho-button--secondary secondary-actions__action">
|
||||
@ -69,13 +65,17 @@
|
||||
Download as a JSON file
|
||||
</button>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
</div>
|
||||
|
||||
{{#if (and isEditing (not _hasBadData))}}
|
||||
{{json-upload receiveJsonFile=(action "onComplianceJsonUpload") class="secondary-actions__action"}}
|
||||
{{/if}}
|
||||
|
||||
<section class="metadata-prompt">
|
||||
<header class="metadata-prompt__header">
|
||||
<p>
|
||||
1. Does this dataset contain the following types of Member data:
|
||||
Does this dataset contain the following types of Member data?
|
||||
|
||||
<!--TODO: DSS-6716-->
|
||||
<!-- DRY out with wrapper component that takes the link as an attribute-->
|
||||
@ -96,57 +96,73 @@
|
||||
<table class="nacho-table nacho-table--bordered nacho-table--stripped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Dataset Content Type</th>
|
||||
<th>
|
||||
<th>Types of Member Data</th>
|
||||
<th class="dataset-field-content__header">
|
||||
<span class="dataset-field-value">Is this type of member data contained in this dataset?</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each-in datasetClassification as |classification props|}}
|
||||
{{#each datasetClassification as |classification|}}
|
||||
<tr>
|
||||
<td class="dataset-field-content">
|
||||
{{props.label}}
|
||||
|
||||
<td class="dataset-field-content__prompt">
|
||||
<span class="dataset-tag-container">
|
||||
{{#if (eq props.value true)}}
|
||||
<i class="glyphicon glyphicon-ok dataset-classification-indicator--tagged"
|
||||
title="{{props.label}} is in dataset"></i>
|
||||
{{#if (eq classification.value true)}}
|
||||
|
||||
<i class="dataset-classification-indicator dataset-classification-indicator--tagged"
|
||||
title="{{classification.label}} is in dataset">
|
||||
<svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet">
|
||||
<g class="large-icon" style="fill: currentColor">
|
||||
<path
|
||||
d="M19.68,4L9,17.7,4.36,12,3,13.06l5.42,6.67A0.72,0.72,0,0,0,9,20a0.7,0.7,0,0,0,.59-0.28L21,5.05Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</i>
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq props.value false)}}
|
||||
<i class="glyphicon glyphicon-remove dataset-classification-indicator--not-tagged"
|
||||
title="{{props.label}} is not in dataset"></i>
|
||||
{{#if (eq classification.value false)}}
|
||||
<i class="dataset-classification-indicator dataset-classification-indicator--not-tagged"
|
||||
title="{{classification.label}} is not in dataset">
|
||||
<svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet">
|
||||
<g class="large-icon" style="fill: currentColor">
|
||||
<path
|
||||
d="M20,5.32L13.32,12,20,18.68,18.66,20,12,13.33,5.34,20,4,18.68,10.68,12,4,5.32,5.32,4,12,10.69,18.68,4Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</i>
|
||||
{{/if}}
|
||||
|
||||
{{classification.label}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="dataset-field-content__input">
|
||||
<span class="dataset-field-value">
|
||||
{{#radio-button-composer
|
||||
value=true
|
||||
name=classification
|
||||
groupValue=(readonly props.value)
|
||||
name=classification.classifier
|
||||
groupValue=(readonly classification.value)
|
||||
changed=(action "onChangeDatasetClassification")}}
|
||||
Yes
|
||||
{{/radio-button-composer}}
|
||||
{{#radio-button-composer
|
||||
value=false
|
||||
name=classification
|
||||
groupValue=(readonly props.value)
|
||||
name=classification.classifier
|
||||
groupValue=(readonly classification.value)
|
||||
changed=(action "onChangeDatasetClassification")}}
|
||||
No
|
||||
{{/radio-button-composer}}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each-in}}
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<section class="metadata-prompt">
|
||||
<header class="metadata-prompt__header">
|
||||
<p>
|
||||
2. Do fields in the schema contain the ID of a member (e.g. id, urn,
|
||||
Do fields in the schema contain the ID of a member (e.g. id, urn,
|
||||
etcetera) and what are the formats of the fields in the schema?
|
||||
<a
|
||||
target="_blank"
|
||||
@ -245,7 +261,12 @@
|
||||
{{#row.cell}}
|
||||
{{#if row.suggestion}}
|
||||
<span class="notification-dot notification-dot--has-prediction"
|
||||
aria-label="Has Suggested Values"></span>
|
||||
aria-label="Compliance fields have suggested values"></span>
|
||||
{{/if}}
|
||||
|
||||
{{#if isNewComplianceInfo}}
|
||||
<span class="notification-dot notification-dot--is-unsaved"
|
||||
aria-label="Compliance has not been saved"></span>
|
||||
{{/if}}
|
||||
{{/row.cell}}
|
||||
|
||||
@ -263,7 +284,11 @@
|
||||
{{auto-suggest-action type="accept" action=(action row.onSuggestionAction)}}
|
||||
{{auto-suggest-action action=(action row.onSuggestionAction)}}
|
||||
{{else}}
|
||||
—
|
||||
{{#if row.suggestionAuthority}}
|
||||
{{capitalize row.suggestionResolution}}
|
||||
{{else}}
|
||||
—
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/row.cell}}
|
||||
|
||||
|
||||
@ -4,13 +4,17 @@
|
||||
style="display:none"
|
||||
id="{{uploadInputId}}">
|
||||
|
||||
|
||||
<label for="{{concat elementId '-button'}}" class="nacho-uploader__label">
|
||||
Have existing metadata from a similar dataset that you want to apply here?
|
||||
<span class="nacho-uploader__cta">Do you have existing compliance metadata from a similar dataset? (Optional)</span>
|
||||
<span class="nacho-uploader__cta-subtext">We can apply metadata from a similar dataset to this dataset.</span>
|
||||
</label>
|
||||
|
||||
<br>
|
||||
|
||||
<button
|
||||
{{action "didSelectUpload"}}
|
||||
id="{{concat elementId '-button'}}"
|
||||
class="nacho-button nacho-button--large-inverse">
|
||||
class="nacho-button nacho-button--large-inverse nacho-uploader__button">
|
||||
Choose File
|
||||
</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user