@truedat/dd 8.8.0 → 8.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/src/components/EditDomainForm.js +51 -27
- package/src/components/EditDomainPopup.js +32 -13
- package/src/components/StructureSummary.js +1 -2
- package/src/components/__tests__/__snapshots__/EditDomainForm.spec.js.snap +105 -81
- package/src/components/__tests__/__snapshots__/StructureProperties.spec.js.snap +7 -7
- package/src/components/__tests__/__snapshots__/StructureSummary.spec.js.snap +14 -14
- package/src/selectors/__tests__/getStructureProperties.spec.js +14 -0
- package/src/selectors/getStructureProperties.js +46 -20
- package/src/styles/editDomainForm.less +77 -0
- package/src/styles/structureProperties.less +29 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@truedat/dd",
|
|
3
|
-
"version": "8.8.
|
|
3
|
+
"version": "8.8.2",
|
|
4
4
|
"description": "Truedat Web Data Dictionary",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@testing-library/jest-dom": "^6.6.3",
|
|
52
52
|
"@testing-library/react": "^16.3.0",
|
|
53
53
|
"@testing-library/user-event": "^14.6.1",
|
|
54
|
-
"@truedat/test": "8.8.
|
|
54
|
+
"@truedat/test": "8.8.2",
|
|
55
55
|
"identity-obj-proxy": "^3.0.0",
|
|
56
56
|
"jest": "^29.7.0",
|
|
57
57
|
"redux-saga-test-plan": "^4.0.6"
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"svg-pan-zoom": "^3.6.2",
|
|
87
87
|
"swr": "^2.3.3"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "38c01f192b1632a4690109716f191129f2f9ac37"
|
|
90
90
|
}
|
|
@@ -1,14 +1,6 @@
|
|
|
1
1
|
import _ from "lodash/fp";
|
|
2
2
|
import { useState } from "react";
|
|
3
|
-
import {
|
|
4
|
-
Button,
|
|
5
|
-
Checkbox,
|
|
6
|
-
Container,
|
|
7
|
-
Form,
|
|
8
|
-
Header,
|
|
9
|
-
Segment,
|
|
10
|
-
} from "semantic-ui-react";
|
|
11
|
-
import { linkTo } from "@truedat/core/routes";
|
|
3
|
+
import { Button, Checkbox, Form, Header } from "semantic-ui-react";
|
|
12
4
|
import PropTypes from "prop-types";
|
|
13
5
|
import { useIntl } from "react-intl";
|
|
14
6
|
import { connect } from "react-redux";
|
|
@@ -20,9 +12,9 @@ export const EditDomainForm = ({
|
|
|
20
12
|
title,
|
|
21
13
|
updateStructure,
|
|
22
14
|
structure,
|
|
15
|
+
onClose,
|
|
23
16
|
}) => {
|
|
24
17
|
const { formatMessage } = useIntl();
|
|
25
|
-
const [loading, setLoading] = useState(true);
|
|
26
18
|
const [domainIds, setDomainIds] = useState(structure?.domain_ids || []);
|
|
27
19
|
const [inherit, setInherit] = useState(true);
|
|
28
20
|
|
|
@@ -32,21 +24,44 @@ export const EditDomainForm = ({
|
|
|
32
24
|
updateStructure({ data_structure, inherit });
|
|
33
25
|
};
|
|
34
26
|
|
|
27
|
+
const handleReset = () => {
|
|
28
|
+
setDomainIds(structure?.domain_ids || []);
|
|
29
|
+
setInherit(true);
|
|
30
|
+
};
|
|
31
|
+
|
|
35
32
|
return (
|
|
36
|
-
<
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
33
|
+
<div className="edit-domain-form">
|
|
34
|
+
<div className="header-wrapper">
|
|
35
|
+
<div className="header-text">
|
|
36
|
+
<Header as="h3" style={{ margin: 0 }}>
|
|
37
|
+
{title}
|
|
38
|
+
</Header>
|
|
39
|
+
<p className="subtitle">
|
|
40
|
+
{formatMessage({ id: "structure.edit_domain.subtitle" })}
|
|
41
|
+
</p>
|
|
42
|
+
</div>
|
|
43
|
+
<button
|
|
44
|
+
type="button"
|
|
45
|
+
className="close-button"
|
|
46
|
+
onClick={onClose}
|
|
47
|
+
title={formatMessage({ id: "structure.edit_domain.close" })}
|
|
48
|
+
>
|
|
49
|
+
×
|
|
50
|
+
</button>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<Form className="form-body" onSubmit={saving ? null : onSubmit}>
|
|
54
|
+
<div className="domain-selector-label">
|
|
55
|
+
{formatMessage({ id: "domain.multiple.placeholder" })}
|
|
56
|
+
</div>
|
|
57
|
+
<DomainSelector
|
|
58
|
+
action="manageStructuresDomain"
|
|
59
|
+
labels
|
|
60
|
+
multiple
|
|
61
|
+
onChange={(_e, { value }) => setDomainIds(value)}
|
|
62
|
+
value={domainIds}
|
|
63
|
+
/>
|
|
64
|
+
|
|
50
65
|
<Checkbox
|
|
51
66
|
label={formatMessage({
|
|
52
67
|
id: "structureDomain.actions.update.inherit",
|
|
@@ -56,13 +71,21 @@ export const EditDomainForm = ({
|
|
|
56
71
|
setInherit(!inherit);
|
|
57
72
|
e.preventDefault();
|
|
58
73
|
}}
|
|
74
|
+
className="inherit-checkbox"
|
|
59
75
|
/>
|
|
60
|
-
|
|
76
|
+
|
|
77
|
+
<div className="footer-actions">
|
|
78
|
+
<Button
|
|
79
|
+
type="button"
|
|
80
|
+
secondary
|
|
81
|
+
size="tiny"
|
|
82
|
+
content={formatMessage({ id: "structure.edit_domain.reset" })}
|
|
83
|
+
onClick={handleReset}
|
|
84
|
+
/>
|
|
61
85
|
<Button
|
|
62
86
|
type="submit"
|
|
63
87
|
loading={saving}
|
|
64
88
|
disabled={
|
|
65
|
-
loading ||
|
|
66
89
|
saving ||
|
|
67
90
|
_.isEmpty(domainIds) ||
|
|
68
91
|
domainIds == [structure?.domain_ids]
|
|
@@ -72,7 +95,7 @@ export const EditDomainForm = ({
|
|
|
72
95
|
/>
|
|
73
96
|
</div>
|
|
74
97
|
</Form>
|
|
75
|
-
</
|
|
98
|
+
</div>
|
|
76
99
|
);
|
|
77
100
|
};
|
|
78
101
|
|
|
@@ -81,6 +104,7 @@ EditDomainForm.propTypes = {
|
|
|
81
104
|
updateStructure: PropTypes.func,
|
|
82
105
|
title: PropTypes.string,
|
|
83
106
|
saving: PropTypes.bool,
|
|
107
|
+
onClose: PropTypes.func,
|
|
84
108
|
};
|
|
85
109
|
|
|
86
110
|
const mapStateToProps = ({ structure, structureUpdating }) => ({
|
|
@@ -1,43 +1,60 @@
|
|
|
1
1
|
import { useState, useEffect } from "react";
|
|
2
2
|
import { useIntl } from "react-intl";
|
|
3
3
|
import { connect } from "react-redux";
|
|
4
|
-
import { Button,
|
|
4
|
+
import { Button, Popup } from "semantic-ui-react";
|
|
5
5
|
import PropTypes from "prop-types";
|
|
6
6
|
import EditDomainForm from "./EditDomainForm";
|
|
7
7
|
|
|
8
|
-
export const EditDomainPopup = ({
|
|
8
|
+
export const EditDomainPopup = ({
|
|
9
|
+
userPermissions,
|
|
10
|
+
saving,
|
|
11
|
+
text,
|
|
12
|
+
trigger,
|
|
13
|
+
onOpenChange,
|
|
14
|
+
}) => {
|
|
9
15
|
const { formatMessage } = useIntl();
|
|
10
16
|
const [open, setOpen] = useState(false);
|
|
11
17
|
|
|
18
|
+
const handleOpen = (value) => {
|
|
19
|
+
setOpen(value);
|
|
20
|
+
if (onOpenChange) onOpenChange(value);
|
|
21
|
+
};
|
|
22
|
+
|
|
12
23
|
useEffect(() => {
|
|
13
24
|
if (saving === false) {
|
|
14
|
-
|
|
25
|
+
handleOpen(false);
|
|
15
26
|
}
|
|
16
27
|
}, [saving]);
|
|
17
28
|
|
|
29
|
+
const defaultTrigger = (
|
|
30
|
+
<Button
|
|
31
|
+
basic
|
|
32
|
+
className="edit-domain-button"
|
|
33
|
+
size="tiny"
|
|
34
|
+
circular
|
|
35
|
+
icon="plus"
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
38
|
+
|
|
18
39
|
return userPermissions?.update && userPermissions?.update_domain ? (
|
|
19
40
|
<Popup
|
|
41
|
+
className="edit-domain-popup"
|
|
20
42
|
on="click"
|
|
21
43
|
basic
|
|
22
44
|
flowing
|
|
23
45
|
content={
|
|
24
46
|
<EditDomainForm
|
|
25
47
|
title={formatMessage({ id: "structure.edit_domain.title" })}
|
|
48
|
+
onClose={() => handleOpen(false)}
|
|
26
49
|
/>
|
|
27
50
|
}
|
|
28
|
-
onOpen={() =>
|
|
29
|
-
onClose={() =>
|
|
51
|
+
onOpen={() => handleOpen(true)}
|
|
52
|
+
onClose={() => handleOpen(false)}
|
|
30
53
|
open={open}
|
|
31
|
-
position="
|
|
54
|
+
position="right center"
|
|
32
55
|
size="large"
|
|
33
56
|
positionFixed
|
|
34
|
-
trigger={
|
|
35
|
-
<Button
|
|
36
|
-
basic
|
|
37
|
-
icon={<Icon name="pencil alternate" />}
|
|
38
|
-
style={{ boxShadow: "none" }}
|
|
39
|
-
/>
|
|
40
|
-
}
|
|
57
|
+
trigger={trigger || defaultTrigger}
|
|
41
58
|
/>
|
|
42
59
|
) : null;
|
|
43
60
|
};
|
|
@@ -45,6 +62,8 @@ export const EditDomainPopup = ({ userPermissions, saving, text }) => {
|
|
|
45
62
|
EditDomainPopup.propTypes = {
|
|
46
63
|
userPermissions: PropTypes.object,
|
|
47
64
|
saving: PropTypes.bool,
|
|
65
|
+
trigger: PropTypes.node,
|
|
66
|
+
onOpenChange: PropTypes.func,
|
|
48
67
|
};
|
|
49
68
|
|
|
50
69
|
export const mapStateToProps = ({
|
|
@@ -63,7 +63,6 @@ export const StructureSummary = ({
|
|
|
63
63
|
}) => {
|
|
64
64
|
const { formatMessage } = useIntl();
|
|
65
65
|
const shareUrl = window.location.href;
|
|
66
|
-
const shareTitle = formatMessage({ id: "structure.share.title" });
|
|
67
66
|
|
|
68
67
|
return (
|
|
69
68
|
<>
|
|
@@ -89,7 +88,7 @@ export const StructureSummary = ({
|
|
|
89
88
|
) : null}
|
|
90
89
|
<ShareLinkPopup
|
|
91
90
|
url={shareUrl}
|
|
92
|
-
title={
|
|
91
|
+
title={formatMessage({ id: "structure.share.title" })}
|
|
93
92
|
name={name}
|
|
94
93
|
description={description}
|
|
95
94
|
icon="structures"
|
|
@@ -3,114 +3,132 @@
|
|
|
3
3
|
exports[`<EditDomainForm /> matches the latest snapshot 1`] = `
|
|
4
4
|
<div>
|
|
5
5
|
<div
|
|
6
|
-
class="
|
|
7
|
-
style="width: 400px;"
|
|
6
|
+
class="edit-domain-form"
|
|
8
7
|
>
|
|
9
|
-
<
|
|
10
|
-
class="
|
|
8
|
+
<div
|
|
9
|
+
class="header-wrapper"
|
|
11
10
|
>
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
<div
|
|
12
|
+
class="header-text"
|
|
13
|
+
>
|
|
14
|
+
<h3
|
|
15
|
+
class="ui header"
|
|
16
|
+
style="margin: 0px;"
|
|
17
|
+
>
|
|
18
|
+
title
|
|
19
|
+
</h3>
|
|
20
|
+
<p
|
|
21
|
+
class="subtitle"
|
|
22
|
+
>
|
|
23
|
+
structure.edit_domain.subtitle
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
<button
|
|
27
|
+
class="close-button"
|
|
28
|
+
title="structure.edit_domain.close"
|
|
29
|
+
type="button"
|
|
30
|
+
>
|
|
31
|
+
×
|
|
32
|
+
</button>
|
|
33
|
+
</div>
|
|
14
34
|
<form
|
|
15
|
-
class="ui form"
|
|
35
|
+
class="ui form form-body"
|
|
16
36
|
>
|
|
17
37
|
<div
|
|
18
|
-
class="
|
|
38
|
+
class="domain-selector-label"
|
|
39
|
+
>
|
|
40
|
+
domain.multiple.placeholder
|
|
41
|
+
</div>
|
|
42
|
+
<div
|
|
43
|
+
class="field fix-dropdown-selector "
|
|
19
44
|
>
|
|
20
45
|
<div
|
|
21
|
-
|
|
46
|
+
aria-disabled="false"
|
|
47
|
+
aria-expanded="false"
|
|
48
|
+
aria-multiselectable="true"
|
|
49
|
+
class="ui floating multiple dropdown"
|
|
50
|
+
role="listbox"
|
|
51
|
+
tabindex="0"
|
|
22
52
|
>
|
|
23
|
-
<
|
|
53
|
+
<div
|
|
54
|
+
class="default text"
|
|
55
|
+
>
|
|
24
56
|
domain.multiple.placeholder
|
|
25
|
-
</
|
|
57
|
+
</div>
|
|
58
|
+
<i
|
|
59
|
+
aria-hidden="true"
|
|
60
|
+
class="dropdown icon"
|
|
61
|
+
/>
|
|
26
62
|
<div
|
|
27
|
-
|
|
28
|
-
aria-expanded="false"
|
|
29
|
-
aria-multiselectable="true"
|
|
30
|
-
class="ui floating multiple dropdown"
|
|
31
|
-
role="listbox"
|
|
32
|
-
tabindex="0"
|
|
63
|
+
class="menu transition"
|
|
33
64
|
>
|
|
34
65
|
<div
|
|
35
|
-
class="
|
|
66
|
+
class="ui fluid left icon input search "
|
|
36
67
|
>
|
|
37
|
-
|
|
68
|
+
<input
|
|
69
|
+
type="text"
|
|
70
|
+
/>
|
|
71
|
+
<i
|
|
72
|
+
aria-hidden="true"
|
|
73
|
+
class="search icon"
|
|
74
|
+
/>
|
|
38
75
|
</div>
|
|
39
|
-
<i
|
|
40
|
-
aria-hidden="true"
|
|
41
|
-
class="dropdown icon"
|
|
42
|
-
/>
|
|
43
76
|
<div
|
|
44
|
-
class="menu transition"
|
|
77
|
+
class="scrolling menu transition"
|
|
45
78
|
>
|
|
46
79
|
<div
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
type="text"
|
|
51
|
-
/>
|
|
52
|
-
<i
|
|
53
|
-
aria-hidden="true"
|
|
54
|
-
class="search icon"
|
|
55
|
-
/>
|
|
56
|
-
</div>
|
|
57
|
-
<div
|
|
58
|
-
class="scrolling menu transition"
|
|
80
|
+
aria-selected="false"
|
|
81
|
+
class="item"
|
|
82
|
+
role="option"
|
|
59
83
|
>
|
|
60
84
|
<div
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
role="option"
|
|
85
|
+
class="item-content"
|
|
86
|
+
style="margin-left: 0px; padding-left: 5px;"
|
|
64
87
|
>
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
88
|
+
<i
|
|
89
|
+
aria-hidden="true"
|
|
90
|
+
class="chevron right icon"
|
|
91
|
+
/>
|
|
92
|
+
<span
|
|
93
|
+
style="opacity: 1;"
|
|
94
|
+
title="barDomain"
|
|
68
95
|
>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
class="chevron right icon"
|
|
72
|
-
/>
|
|
73
|
-
<span
|
|
74
|
-
style="opacity: 1;"
|
|
75
|
-
title="barDomain"
|
|
76
|
-
>
|
|
77
|
-
barDomain
|
|
78
|
-
</span>
|
|
79
|
-
</div>
|
|
96
|
+
barDomain
|
|
97
|
+
</span>
|
|
80
98
|
</div>
|
|
99
|
+
</div>
|
|
100
|
+
<div
|
|
101
|
+
aria-selected="false"
|
|
102
|
+
class="item"
|
|
103
|
+
role="option"
|
|
104
|
+
>
|
|
81
105
|
<div
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
role="option"
|
|
106
|
+
class="item-content"
|
|
107
|
+
style="margin-left: 0px; padding-left: 25px;"
|
|
85
108
|
>
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
109
|
+
<span
|
|
110
|
+
style="opacity: 1;"
|
|
111
|
+
title="bazDomain"
|
|
89
112
|
>
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
title="bazDomain"
|
|
93
|
-
>
|
|
94
|
-
bazDomain
|
|
95
|
-
</span>
|
|
96
|
-
</div>
|
|
113
|
+
bazDomain
|
|
114
|
+
</span>
|
|
97
115
|
</div>
|
|
116
|
+
</div>
|
|
117
|
+
<div
|
|
118
|
+
aria-selected="false"
|
|
119
|
+
class="item"
|
|
120
|
+
role="option"
|
|
121
|
+
>
|
|
98
122
|
<div
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
role="option"
|
|
123
|
+
class="item-content"
|
|
124
|
+
style="margin-left: 0px; padding-left: 25px;"
|
|
102
125
|
>
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
|
|
126
|
+
<span
|
|
127
|
+
style="opacity: 1;"
|
|
128
|
+
title="fooDomain"
|
|
106
129
|
>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
title="fooDomain"
|
|
110
|
-
>
|
|
111
|
-
fooDomain
|
|
112
|
-
</span>
|
|
113
|
-
</div>
|
|
130
|
+
fooDomain
|
|
131
|
+
</span>
|
|
114
132
|
</div>
|
|
115
133
|
</div>
|
|
116
134
|
</div>
|
|
@@ -118,7 +136,7 @@ exports[`<EditDomainForm /> matches the latest snapshot 1`] = `
|
|
|
118
136
|
</div>
|
|
119
137
|
</div>
|
|
120
138
|
<div
|
|
121
|
-
class="ui checked checkbox"
|
|
139
|
+
class="ui checked checkbox inherit-checkbox"
|
|
122
140
|
>
|
|
123
141
|
<input
|
|
124
142
|
checked=""
|
|
@@ -132,8 +150,14 @@ exports[`<EditDomainForm /> matches the latest snapshot 1`] = `
|
|
|
132
150
|
</label>
|
|
133
151
|
</div>
|
|
134
152
|
<div
|
|
135
|
-
class="actions"
|
|
153
|
+
class="footer-actions"
|
|
136
154
|
>
|
|
155
|
+
<button
|
|
156
|
+
class="ui tiny secondary button"
|
|
157
|
+
type="button"
|
|
158
|
+
>
|
|
159
|
+
structure.edit_domain.reset
|
|
160
|
+
</button>
|
|
137
161
|
<button
|
|
138
162
|
class="ui primary disabled button"
|
|
139
163
|
disabled=""
|
|
@@ -52,7 +52,7 @@ exports[`<StructureProperties /> matches the latest snapshot 1`] = `
|
|
|
52
52
|
class="row"
|
|
53
53
|
>
|
|
54
54
|
<div
|
|
55
|
-
class="
|
|
55
|
+
class="four wide column"
|
|
56
56
|
>
|
|
57
57
|
<div
|
|
58
58
|
class="item"
|
|
@@ -72,7 +72,7 @@ exports[`<StructureProperties /> matches the latest snapshot 1`] = `
|
|
|
72
72
|
</div>
|
|
73
73
|
</div>
|
|
74
74
|
<div
|
|
75
|
-
class="
|
|
75
|
+
class="four wide column"
|
|
76
76
|
>
|
|
77
77
|
<div
|
|
78
78
|
class="item"
|
|
@@ -83,18 +83,18 @@ exports[`<StructureProperties /> matches the latest snapshot 1`] = `
|
|
|
83
83
|
<h5
|
|
84
84
|
class="header"
|
|
85
85
|
>
|
|
86
|
-
|
|
86
|
+
type
|
|
87
87
|
</h5>
|
|
88
88
|
<div
|
|
89
89
|
class="description"
|
|
90
90
|
>
|
|
91
|
-
|
|
91
|
+
Database
|
|
92
92
|
</div>
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
95
95
|
</div>
|
|
96
96
|
<div
|
|
97
|
-
class="
|
|
97
|
+
class="eight wide column"
|
|
98
98
|
>
|
|
99
99
|
<div
|
|
100
100
|
class="item"
|
|
@@ -105,12 +105,12 @@ exports[`<StructureProperties /> matches the latest snapshot 1`] = `
|
|
|
105
105
|
<h5
|
|
106
106
|
class="header"
|
|
107
107
|
>
|
|
108
|
-
|
|
108
|
+
group
|
|
109
109
|
</h5>
|
|
110
110
|
<div
|
|
111
111
|
class="description"
|
|
112
112
|
>
|
|
113
|
-
|
|
113
|
+
gp
|
|
114
114
|
</div>
|
|
115
115
|
</div>
|
|
116
116
|
</div>
|
|
@@ -85,7 +85,7 @@ exports[`<StructureSummary /> matches the latest snapshot 1`] = `
|
|
|
85
85
|
class="row"
|
|
86
86
|
>
|
|
87
87
|
<div
|
|
88
|
-
class="
|
|
88
|
+
class="four wide column"
|
|
89
89
|
>
|
|
90
90
|
<div
|
|
91
91
|
class="item"
|
|
@@ -105,7 +105,7 @@ exports[`<StructureSummary /> matches the latest snapshot 1`] = `
|
|
|
105
105
|
</div>
|
|
106
106
|
</div>
|
|
107
107
|
<div
|
|
108
|
-
class="
|
|
108
|
+
class="four wide column"
|
|
109
109
|
>
|
|
110
110
|
<div
|
|
111
111
|
class="item"
|
|
@@ -116,18 +116,18 @@ exports[`<StructureSummary /> matches the latest snapshot 1`] = `
|
|
|
116
116
|
<h5
|
|
117
117
|
class="header"
|
|
118
118
|
>
|
|
119
|
-
|
|
119
|
+
type
|
|
120
120
|
</h5>
|
|
121
121
|
<div
|
|
122
122
|
class="description"
|
|
123
123
|
>
|
|
124
|
-
|
|
124
|
+
foo
|
|
125
125
|
</div>
|
|
126
126
|
</div>
|
|
127
127
|
</div>
|
|
128
128
|
</div>
|
|
129
129
|
<div
|
|
130
|
-
class="
|
|
130
|
+
class="eight wide column"
|
|
131
131
|
>
|
|
132
132
|
<div
|
|
133
133
|
class="item"
|
|
@@ -138,12 +138,12 @@ exports[`<StructureSummary /> matches the latest snapshot 1`] = `
|
|
|
138
138
|
<h5
|
|
139
139
|
class="header"
|
|
140
140
|
>
|
|
141
|
-
|
|
141
|
+
group
|
|
142
142
|
</h5>
|
|
143
143
|
<div
|
|
144
144
|
class="description"
|
|
145
145
|
>
|
|
146
|
-
|
|
146
|
+
gp
|
|
147
147
|
</div>
|
|
148
148
|
</div>
|
|
149
149
|
</div>
|
|
@@ -243,7 +243,7 @@ exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
|
|
|
243
243
|
class="row"
|
|
244
244
|
>
|
|
245
245
|
<div
|
|
246
|
-
class="
|
|
246
|
+
class="four wide column"
|
|
247
247
|
>
|
|
248
248
|
<div
|
|
249
249
|
class="item"
|
|
@@ -263,7 +263,7 @@ exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
|
|
|
263
263
|
</div>
|
|
264
264
|
</div>
|
|
265
265
|
<div
|
|
266
|
-
class="
|
|
266
|
+
class="four wide column"
|
|
267
267
|
>
|
|
268
268
|
<div
|
|
269
269
|
class="item"
|
|
@@ -274,18 +274,18 @@ exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
|
|
|
274
274
|
<h5
|
|
275
275
|
class="header"
|
|
276
276
|
>
|
|
277
|
-
|
|
277
|
+
type
|
|
278
278
|
</h5>
|
|
279
279
|
<div
|
|
280
280
|
class="description"
|
|
281
281
|
>
|
|
282
|
-
|
|
282
|
+
foo
|
|
283
283
|
</div>
|
|
284
284
|
</div>
|
|
285
285
|
</div>
|
|
286
286
|
</div>
|
|
287
287
|
<div
|
|
288
|
-
class="
|
|
288
|
+
class="eight wide column"
|
|
289
289
|
>
|
|
290
290
|
<div
|
|
291
291
|
class="item"
|
|
@@ -296,12 +296,12 @@ exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
|
|
|
296
296
|
<h5
|
|
297
297
|
class="header"
|
|
298
298
|
>
|
|
299
|
-
|
|
299
|
+
group
|
|
300
300
|
</h5>
|
|
301
301
|
<div
|
|
302
302
|
class="description"
|
|
303
303
|
>
|
|
304
|
-
|
|
304
|
+
gp
|
|
305
305
|
</div>
|
|
306
306
|
</div>
|
|
307
307
|
</div>
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _ from "lodash/fp";
|
|
1
2
|
import { getStructureProperties, defaultStructureProperties } from "..";
|
|
2
3
|
|
|
3
4
|
describe("selectors: getStructureProperties", () => {
|
|
@@ -16,3 +17,16 @@ describe("selectors: getStructureProperties", () => {
|
|
|
16
17
|
expect(res).toEqual(defaultStructureProperties);
|
|
17
18
|
});
|
|
18
19
|
});
|
|
20
|
+
|
|
21
|
+
describe("selectors: defaultStructureProperties widths", () => {
|
|
22
|
+
it("should have correct widths for default properties", () => {
|
|
23
|
+
const res = getStructureProperties({});
|
|
24
|
+
const widths = _.flow(_.map(_.prop("width")))(res);
|
|
25
|
+
expect(widths).toEqual([4, 4, 8]);
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
it("should have properties in order: domain, type, group", () => {
|
|
29
|
+
const res = getStructureProperties({});
|
|
30
|
+
expect(res.map(_.prop("name"))).toEqual(["domain", "type", "group"]);
|
|
31
|
+
});
|
|
32
|
+
});
|
|
@@ -1,26 +1,49 @@
|
|
|
1
1
|
import _ from "lodash/fp";
|
|
2
|
+
import { useState } from "react";
|
|
2
3
|
import { createSelector } from "reselect";
|
|
3
|
-
import { FormattedMessage } from "react-intl";
|
|
4
|
-
import { Label } from "semantic-ui-react";
|
|
4
|
+
import { FormattedMessage, useIntl } from "react-intl";
|
|
5
|
+
import { Button, Label } from "semantic-ui-react";
|
|
5
6
|
import EditDomainPopup from "../components/EditDomainPopup";
|
|
6
7
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
8
|
+
const DomainValue = ({ domains }) => {
|
|
9
|
+
const { formatMessage } = useIntl();
|
|
10
|
+
const [popupOpen, setPopupOpen] = useState(false);
|
|
11
|
+
|
|
12
|
+
if (_.isEmpty(domains)) {
|
|
13
|
+
const assignDomainTrigger = (
|
|
14
|
+
<Button
|
|
15
|
+
className="assign-domain-button"
|
|
16
|
+
size="mini"
|
|
17
|
+
circular
|
|
18
|
+
basic
|
|
19
|
+
icon="plus"
|
|
20
|
+
content={formatMessage({ id: "structure.assign_domain" })}
|
|
21
|
+
/>
|
|
22
|
+
);
|
|
23
|
+
return (
|
|
24
|
+
<EditDomainPopup
|
|
25
|
+
trigger={assignDomainTrigger}
|
|
26
|
+
onOpenChange={setPopupOpen}
|
|
27
|
+
/>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<div className={`domain-value${popupOpen ? " popup-open" : ""}`}>
|
|
33
|
+
{domains.map(({ name, parents }, key) => (
|
|
34
|
+
<Label
|
|
35
|
+
key={key}
|
|
36
|
+
title={_.flow(_.map("name"), _.union([name]), _.join(" > "))(parents)}
|
|
37
|
+
>
|
|
38
|
+
{name}
|
|
39
|
+
</Label>
|
|
40
|
+
))}
|
|
41
|
+
<EditDomainPopup onOpenChange={setPopupOpen} />
|
|
42
|
+
</div>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const domainDecorator = (domains) => <DomainValue domains={domains} />;
|
|
24
47
|
|
|
25
48
|
const typeDecorator = ({ type, structure_type }) => (
|
|
26
49
|
<FormattedMessage
|
|
@@ -28,18 +51,21 @@ const typeDecorator = ({ type, structure_type }) => (
|
|
|
28
51
|
defaultMessage={_.get("translation")(structure_type) || type}
|
|
29
52
|
/>
|
|
30
53
|
);
|
|
54
|
+
|
|
31
55
|
export const defaultStructureProperties = [
|
|
32
56
|
{
|
|
33
57
|
name: "domain",
|
|
58
|
+
width: 4,
|
|
34
59
|
fieldSelector: _.flow(_.propOr([], "domains"), _.reject(_.isEmpty)),
|
|
35
60
|
fieldDecorator: domainDecorator,
|
|
36
61
|
},
|
|
37
|
-
{ name: "group" },
|
|
38
62
|
{
|
|
39
63
|
name: "type",
|
|
64
|
+
width: 4,
|
|
40
65
|
fieldSelector: _.pick(["type", "structure_type"]),
|
|
41
66
|
fieldDecorator: typeDecorator,
|
|
42
67
|
},
|
|
68
|
+
{ name: "group", width: 8 },
|
|
43
69
|
];
|
|
44
70
|
|
|
45
71
|
export const getStructureProperties = createSelector(
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
.edit-domain-popup {
|
|
2
|
+
box-shadow:
|
|
3
|
+
0 20px 25px -5px rgba(0, 0, 0, 0.2),
|
|
4
|
+
0 8px 10px -6px rgba(0, 0, 0, 0.15) !important;
|
|
5
|
+
border-radius: 1rem !important;
|
|
6
|
+
border: 1px solid #e2e8f0 !important;
|
|
7
|
+
padding: 0 !important;
|
|
8
|
+
overflow: visible !important;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.edit-domain-form {
|
|
12
|
+
width: 400px;
|
|
13
|
+
background: #fff;
|
|
14
|
+
border-radius: 1rem;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.edit-domain-form .header-wrapper {
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
align-items: flex-start;
|
|
21
|
+
padding: 1.5rem 1.5rem 1rem;
|
|
22
|
+
border-bottom: 1px solid #e2e8f0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.edit-domain-form .header-wrapper .header-text {
|
|
26
|
+
flex: 1;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.edit-domain-form .header-wrapper .subtitle {
|
|
30
|
+
font-size: 0.75rem;
|
|
31
|
+
color: #94a3b8;
|
|
32
|
+
margin: 0.15rem 0 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.edit-domain-form .close-button {
|
|
36
|
+
color: #94a3b8;
|
|
37
|
+
background: none;
|
|
38
|
+
border: none;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
padding: 6px;
|
|
41
|
+
font-size: 1.25rem;
|
|
42
|
+
line-height: 1;
|
|
43
|
+
flex-shrink: 0;
|
|
44
|
+
border-radius: 0.5rem;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.edit-domain-form .close-button:hover {
|
|
48
|
+
color: #334155;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.edit-domain-form .form-body {
|
|
52
|
+
padding: 1.5rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.edit-domain-form .domain-selector-label {
|
|
56
|
+
font-size: 0.7rem;
|
|
57
|
+
font-weight: 700;
|
|
58
|
+
text-transform: uppercase;
|
|
59
|
+
letter-spacing: 0.08em;
|
|
60
|
+
color: #475569;
|
|
61
|
+
margin-bottom: 0.5rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.edit-domain-form .inherit-checkbox {
|
|
65
|
+
margin-top: 0.8rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.edit-domain-form .footer-actions {
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: flex-end;
|
|
71
|
+
align-items: center;
|
|
72
|
+
gap: 0.75rem;
|
|
73
|
+
padding: 1rem 1.5rem;
|
|
74
|
+
border-top: 1px solid #e2e8f0;
|
|
75
|
+
background: #f8fafc;
|
|
76
|
+
margin: 1.5rem -1.5rem -1.5rem;
|
|
77
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.structure-properties {
|
|
2
|
+
padding-left: 0.5rem;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.structure-properties .column .description {
|
|
6
|
+
overflow-wrap: break-word;
|
|
7
|
+
word-break: break-word;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.structure-properties .assign-domain-button {
|
|
11
|
+
margin-left: 0.5em;
|
|
12
|
+
padding: 0.3em 0.5em;
|
|
13
|
+
font-size: 0.7em;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.structure-properties .domain-value .ui.label {
|
|
17
|
+
margin: 2px;
|
|
18
|
+
cursor: default;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.structure-properties .domain-value .edit-domain-button {
|
|
22
|
+
visibility: hidden;
|
|
23
|
+
margin-left: 0.5em;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.structure-properties .domain-value:hover .edit-domain-button,
|
|
27
|
+
.structure-properties .domain-value.popup-open .edit-domain-button {
|
|
28
|
+
visibility: visible;
|
|
29
|
+
}
|