@truedat/dd 5.7.4 → 5.7.6

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@truedat/dd",
3
- "version": "5.7.4",
3
+ "version": "5.7.6",
4
4
  "description": "Truedat Web Data Dictionary",
5
5
  "sideEffects": false,
6
6
  "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
34
34
  "@testing-library/jest-dom": "^5.16.5",
35
35
  "@testing-library/react": "^12.0.0",
36
36
  "@testing-library/user-event": "^13.2.1",
37
- "@truedat/test": "5.7.4",
37
+ "@truedat/test": "5.7.5",
38
38
  "babel-jest": "^28.1.0",
39
39
  "babel-plugin-dynamic-import-node": "^2.3.3",
40
40
  "babel-plugin-lodash": "^3.3.4",
@@ -87,9 +87,9 @@
87
87
  },
88
88
  "dependencies": {
89
89
  "@apollo/client": "^3.7.1",
90
- "@truedat/auth": "5.7.4",
91
- "@truedat/core": "5.7.4",
92
- "@truedat/df": "5.7.4",
90
+ "@truedat/auth": "5.7.5",
91
+ "@truedat/core": "5.7.5",
92
+ "@truedat/df": "5.7.6",
93
93
  "lodash": "^4.17.21",
94
94
  "moment": "^2.29.4",
95
95
  "path-to-regexp": "^1.7.0",
@@ -114,5 +114,5 @@
114
114
  "react-dom": ">= 16.8.6 < 17",
115
115
  "semantic-ui-react": ">= 2.0.3 < 2.2"
116
116
  },
117
- "gitHead": "ed86b1f89479bb65ed72915f7160bebbeacb084f"
117
+ "gitHead": "0afdc4cca93cdc906072d6e7371e6a051721f59c"
118
118
  }
@@ -60,7 +60,7 @@ export const StructureGrantCart = ({
60
60
  };
61
61
 
62
62
  return (
63
- <Segment>
63
+ <div className="ui segment structure-grant-cart">
64
64
  <Header title={`${formatMessage({ id: `structure.grant.cart` })}`}>
65
65
  {formatMessage({ id: `structure.grant.cart` })}
66
66
  </Header>
@@ -136,7 +136,7 @@ export const StructureGrantCart = ({
136
136
  </Button>
137
137
  </>
138
138
  ))}
139
- </Segment>
139
+ </div>
140
140
  );
141
141
  };
142
142
 
@@ -1,8 +1,9 @@
1
- import React from "react";
1
+ import _ from "lodash/fp";
2
+ import React, { useRef, useEffect, useState } from "react";
2
3
  import PropTypes from "prop-types";
3
4
  import { connect } from "react-redux";
4
5
  import { useHistory } from "react-router-dom";
5
- import { Grid, Header, Icon, Segment, Divider } from "semantic-ui-react";
6
+ import { Header, Icon, Divider } from "semantic-ui-react";
6
7
  import { FormattedMessage } from "react-intl";
7
8
  import { linkTo } from "@truedat/core/routes";
8
9
  import { structureRowsSelector } from "../selectors";
@@ -14,41 +15,78 @@ import StructureGrantCart from "./StructureGrantCart";
14
15
 
15
16
  export const StructuresGrantRequestView = ({ loading, structures }) => {
16
17
  const history = useHistory();
18
+ const segment = useRef(null);
19
+ const [isOverflown, setIsOverflown] = useState(null);
20
+
21
+ useEffect(() => {
22
+ setIsOverflown(isOverflownFn(segment.current));
23
+ }, [loading]);
24
+
25
+ useEffect(() => {
26
+ const checkOverflow = (_event) =>
27
+ debouncedIsOverflownFn && debouncedIsOverflownFn();
28
+
29
+ const debouncedIsOverflownFn = _.debounce(
30
+ 100,
31
+ () => {
32
+ /* the overflown check needs to happen when structures
33
+ * table and cart are side by side, but might be stacked
34
+ * now, so set to false before.
35
+ */
36
+ setIsOverflown(false);
37
+ setIsOverflown(isOverflownFn(segment.current));
38
+ },
39
+ { leading: true, trailing: false }
40
+ );
41
+
42
+ addEventListener("resize", checkOverflow);
43
+
44
+ return () => removeEventListener("resize", checkOverflow);
45
+ }, []);
17
46
 
18
47
  return (
19
- <Grid>
20
- <Grid.Row>
21
- <Grid.Column width={11}>
22
- <Segment>
23
- <Header as="h2">
24
- <Icon circular name="block layout" />
25
- <Header.Content>
26
- <FormattedMessage id="structuresGrantRequest.header" />
27
- <Header.Subheader>
28
- <FormattedMessage id="structuresGrantRequest.subheader" />
29
- </Header.Subheader>
30
- </Header.Content>
31
- </Header>
32
- <Divider hidden />
33
- <StructuresSearch />
34
- <StructureSelectedFilters />
35
- <StructureDateFilter />
36
- <StructuresSearchResults
37
- structures={structures}
38
- loading={loading}
39
- grantable
40
- onSelect={({ id }) => history.push(linkTo.STRUCTURE({ id }))}
41
- />
42
- </Segment>
43
- </Grid.Column>
44
- <Grid.Column width={5}>
45
- <StructureGrantCart allowEmptyCart />
46
- </Grid.Column>
47
- </Grid.Row>
48
- </Grid>
48
+ <div
49
+ className={`structures-grant-request-view ${
50
+ isOverflown ? "stackable-children" : "side-by-side-children"
51
+ }`}
52
+ >
53
+ <StructureGrantCart allowEmptyCart />
54
+ <div
55
+ className={`ui segment structures-grant-request-table-container ${
56
+ isOverflown ? "stackable" : "side-by-side"
57
+ }`}
58
+ ref={segment}
59
+ >
60
+ <Header as="h2">
61
+ <Icon circular name="block layout" />
62
+ <Header.Content>
63
+ <FormattedMessage id="structuresGrantRequest.header" />
64
+ <Header.Subheader>
65
+ <FormattedMessage id="structuresGrantRequest.subheader" />
66
+ </Header.Subheader>
67
+ </Header.Content>
68
+ </Header>
69
+ <Divider hidden />
70
+ <StructuresSearch />
71
+ <StructureSelectedFilters />
72
+ <StructureDateFilter />
73
+ <StructuresSearchResults
74
+ structures={structures}
75
+ loading={loading}
76
+ grantable
77
+ onSelect={({ id }) => history.push(linkTo.STRUCTURE({ id }))}
78
+ />
79
+ </div>
80
+ </div>
49
81
  );
50
82
  };
51
83
 
84
+ const isOverflownFn = (element) =>
85
+ !element
86
+ ? false
87
+ : element.scrollHeight > element.clientHeight ||
88
+ element.scrollWidth > element.clientWidth;
89
+
52
90
  StructuresGrantRequestView.propTypes = {
53
91
  structures: PropTypes.array,
54
92
  loading: PropTypes.bool,
@@ -3,320 +3,308 @@
3
3
  exports[`<StructuresGrantRequestView /> Clicking a grant request button triggers action 1`] = `
4
4
  <div>
5
5
  <div
6
- class="ui grid"
6
+ class="structures-grant-request-view side-by-side-children"
7
7
  >
8
8
  <div
9
- class="row"
9
+ class="ui segment structure-grant-cart"
10
10
  >
11
11
  <div
12
- class="eleven wide column"
12
+ class="ui header"
13
+ title="Requested grants"
13
14
  >
15
+ Requested grants
16
+ </div>
17
+ <div
18
+ class="ui divider"
19
+ />
20
+ <div
21
+ class="list"
22
+ />
23
+ <p>
24
+ Select structures for which grants will be requested
25
+ </p>
26
+ </div>
27
+ <div
28
+ class="ui segment structures-grant-request-table-container side-by-side"
29
+ >
30
+ <h2
31
+ class="ui header"
32
+ >
33
+ <i
34
+ aria-hidden="true"
35
+ class="block layout circular icon"
36
+ />
14
37
  <div
15
- class="ui segment"
38
+ class="content"
16
39
  >
17
- <h2
18
- class="ui header"
40
+ Structures grant requests
41
+ <div
42
+ class="sub header"
19
43
  >
20
- <i
21
- aria-hidden="true"
22
- class="block layout circular icon"
23
- />
24
- <div
25
- class="content"
26
- >
27
- Structures grant requests
28
- <div
29
- class="sub header"
30
- >
31
- Request grants for several structures
32
- </div>
33
- </div>
34
- </h2>
44
+ Request grants for several structures
45
+ </div>
46
+ </div>
47
+ </h2>
48
+ <div
49
+ class="ui hidden divider"
50
+ />
51
+ <div
52
+ class="ui action left icon input"
53
+ >
54
+ <i
55
+ aria-hidden="true"
56
+ class="search link icon"
57
+ />
58
+ <input
59
+ placeholder="Search structures..."
60
+ type="text"
61
+ value=""
62
+ />
63
+ <button
64
+ class="ui icon button"
65
+ >
66
+ <i
67
+ aria-hidden="true"
68
+ class="calendar alternate outline icon"
69
+ />
70
+ </button>
71
+ <div
72
+ aria-expanded="false"
73
+ class="ui button floating labeled scrolling dropdown icon"
74
+ role="listbox"
75
+ tabindex="0"
76
+ >
35
77
  <div
36
- class="ui hidden divider"
78
+ aria-atomic="true"
79
+ aria-live="polite"
80
+ class="divider text"
81
+ role="alert"
82
+ >
83
+ Filters
84
+ </div>
85
+ <i
86
+ aria-hidden="true"
87
+ class="filter icon"
37
88
  />
38
89
  <div
39
- class="ui action left icon input"
90
+ class="menu transition"
40
91
  >
41
- <i
42
- aria-hidden="true"
43
- class="search link icon"
44
- />
45
- <input
46
- placeholder="Search structures..."
47
- type="text"
48
- value=""
49
- />
50
- <button
51
- class="ui icon button"
52
- >
53
- <i
54
- aria-hidden="true"
55
- class="calendar alternate outline icon"
56
- />
57
- </button>
58
92
  <div
59
- aria-expanded="false"
60
- class="ui button floating labeled scrolling dropdown icon"
61
- role="listbox"
62
- tabindex="0"
93
+ class="item"
94
+ role="option"
63
95
  >
64
- <div
65
- aria-atomic="true"
66
- aria-live="polite"
67
- class="divider text"
68
- role="alert"
69
- >
70
- Filters
71
- </div>
72
- <i
73
- aria-hidden="true"
74
- class="filter icon"
75
- />
76
- <div
77
- class="menu transition"
78
- >
79
- <div
80
- class="item"
81
- role="option"
82
- >
83
- <em>
84
- (reset all filters)
85
- </em>
86
- </div>
87
- </div>
96
+ <em>
97
+ (reset all filters)
98
+ </em>
88
99
  </div>
89
100
  </div>
101
+ </div>
102
+ </div>
103
+ <div
104
+ class="selectedFilters"
105
+ />
106
+ <div
107
+ class="dimmable"
108
+ >
109
+ <div
110
+ class="ui inverted dimmer"
111
+ >
90
112
  <div
91
- class="selectedFilters"
92
- />
93
- <div
94
- class="dimmable"
113
+ class="content"
95
114
  >
96
115
  <div
97
- class="ui inverted dimmer"
116
+ class="ui large loader"
117
+ />
118
+ </div>
119
+ </div>
120
+ <div
121
+ class="ui label structures-label-results"
122
+ >
123
+ 3 structures found
124
+ </div>
125
+ <table
126
+ class="ui selectable sortable table"
127
+ >
128
+ <thead
129
+ class=""
130
+ >
131
+ <tr
132
+ class=""
98
133
  >
99
- <div
100
- class="content"
134
+ <th
135
+ class="two wide"
101
136
  >
102
- <div
103
- class="ui large loader"
104
- />
105
- </div>
106
- </div>
107
- <div
108
- class="ui label structures-label-results"
109
- >
110
- 3 structures found
111
- </div>
112
- <table
113
- class="ui selectable sortable table"
137
+ Structure
138
+ </th>
139
+ <th
140
+ class="one wide ascending sorted disabled"
141
+ >
142
+ Type
143
+ </th>
144
+ <th
145
+ class="one wide"
146
+ >
147
+ System
148
+ </th>
149
+ <th
150
+ class="one wide ascending sorted disabled"
151
+ >
152
+ Relation Type
153
+ </th>
154
+ <th
155
+ class="one wide ascending sorted disabled"
156
+ >
157
+ Group
158
+ </th>
159
+ <th
160
+ class="one wide"
161
+ >
162
+ Last changed
163
+ </th>
164
+ <th
165
+ class="center aligned"
166
+ >
167
+ Request grant
168
+ </th>
169
+ </tr>
170
+ </thead>
171
+ <tbody
172
+ class=""
173
+ >
174
+ <tr
175
+ class=""
114
176
  >
115
- <thead
177
+ <td
116
178
  class=""
117
179
  >
118
- <tr
119
- class=""
120
- >
121
- <th
122
- class="two wide"
123
- >
124
- Structure
125
- </th>
126
- <th
127
- class="one wide ascending sorted disabled"
128
- >
129
- Type
130
- </th>
131
- <th
132
- class="one wide"
133
- >
134
- System
135
- </th>
136
- <th
137
- class="one wide ascending sorted disabled"
138
- >
139
- Relation Type
140
- </th>
141
- <th
142
- class="one wide ascending sorted disabled"
143
- >
144
- Group
145
- </th>
146
- <th
147
- class="one wide"
148
- >
149
- Last changed
150
- </th>
151
- <th
152
- class="center aligned"
153
- >
154
- Request grant
155
- </th>
156
- </tr>
157
- </thead>
158
- <tbody
180
+ structure_1
181
+ </td>
182
+ <td
159
183
  class=""
160
184
  >
161
- <tr
162
- class=""
185
+ table
186
+ </td>
187
+ <td
188
+ class=""
189
+ />
190
+ <td
191
+ class=""
192
+ />
193
+ <td
194
+ class=""
195
+ />
196
+ <td
197
+ class=""
198
+ >
199
+ <time
200
+ datetime="1682553600000"
163
201
  >
164
- <td
165
- class=""
166
- >
167
- structure_1
168
- </td>
169
- <td
170
- class=""
171
- >
172
- table
173
- </td>
174
- <td
175
- class=""
176
- />
177
- <td
178
- class=""
179
- />
180
- <td
181
- class=""
182
- />
183
- <td
184
- class=""
185
- >
186
- <time
187
- datetime="1682553600000"
188
- >
189
- 2023-04-27 00:00
190
- </time>
191
- </td>
192
- <td
193
- class="collapsing center aligned one wide"
194
- >
195
- <button
196
- class="ui orange icon button button basic icon group-actions"
197
- >
198
- <i
199
- aria-hidden="true"
200
- class="shield icon"
201
- />
202
- </button>
203
- </td>
204
- </tr>
205
- <tr
206
- class=""
202
+ 2023-04-27 00:00
203
+ </time>
204
+ </td>
205
+ <td
206
+ class="collapsing center aligned one wide"
207
+ >
208
+ <button
209
+ class="ui orange icon button button basic icon group-actions"
207
210
  >
208
- <td
209
- class=""
210
- >
211
- structure_2
212
- </td>
213
- <td
214
- class=""
215
- >
216
- table
217
- </td>
218
- <td
219
- class=""
211
+ <i
212
+ aria-hidden="true"
213
+ class="shield icon"
220
214
  />
221
- <td
222
- class=""
223
- />
224
- <td
225
- class=""
226
- />
227
- <td
228
- class=""
229
- >
230
- <time
231
- datetime="1682553600000"
232
- >
233
- 2023-04-27 00:00
234
- </time>
235
- </td>
236
- <td
237
- class="collapsing center aligned one wide"
238
- >
239
- <button
240
- class="ui orange icon button button basic icon group-actions"
241
- >
242
- <i
243
- aria-hidden="true"
244
- class="shield icon"
245
- />
246
- </button>
247
- </td>
248
- </tr>
249
- <tr
250
- class=""
215
+ </button>
216
+ </td>
217
+ </tr>
218
+ <tr
219
+ class=""
220
+ >
221
+ <td
222
+ class=""
223
+ >
224
+ structure_2
225
+ </td>
226
+ <td
227
+ class=""
228
+ >
229
+ table
230
+ </td>
231
+ <td
232
+ class=""
233
+ />
234
+ <td
235
+ class=""
236
+ />
237
+ <td
238
+ class=""
239
+ />
240
+ <td
241
+ class=""
242
+ >
243
+ <time
244
+ datetime="1682553600000"
251
245
  >
252
- <td
253
- class=""
254
- >
255
- structure_3
256
- </td>
257
- <td
258
- class=""
259
- >
260
- table
261
- </td>
262
- <td
263
- class=""
264
- />
265
- <td
266
- class=""
246
+ 2023-04-27 00:00
247
+ </time>
248
+ </td>
249
+ <td
250
+ class="collapsing center aligned one wide"
251
+ >
252
+ <button
253
+ class="ui orange icon button button basic icon group-actions"
254
+ >
255
+ <i
256
+ aria-hidden="true"
257
+ class="shield icon"
267
258
  />
268
- <td
269
- class=""
259
+ </button>
260
+ </td>
261
+ </tr>
262
+ <tr
263
+ class=""
264
+ >
265
+ <td
266
+ class=""
267
+ >
268
+ structure_3
269
+ </td>
270
+ <td
271
+ class=""
272
+ >
273
+ table
274
+ </td>
275
+ <td
276
+ class=""
277
+ />
278
+ <td
279
+ class=""
280
+ />
281
+ <td
282
+ class=""
283
+ />
284
+ <td
285
+ class=""
286
+ >
287
+ <time
288
+ datetime="1682553600000"
289
+ >
290
+ 2023-04-27 00:00
291
+ </time>
292
+ </td>
293
+ <td
294
+ class="collapsing center aligned one wide"
295
+ >
296
+ <button
297
+ class="ui orange icon button button basic icon group-actions"
298
+ >
299
+ <i
300
+ aria-hidden="true"
301
+ class="shield icon"
270
302
  />
271
- <td
272
- class=""
273
- >
274
- <time
275
- datetime="1682553600000"
276
- >
277
- 2023-04-27 00:00
278
- </time>
279
- </td>
280
- <td
281
- class="collapsing center aligned one wide"
282
- >
283
- <button
284
- class="ui orange icon button button basic icon group-actions"
285
- >
286
- <i
287
- aria-hidden="true"
288
- class="shield icon"
289
- />
290
- </button>
291
- </td>
292
- </tr>
293
- </tbody>
294
- </table>
295
- </div>
296
- </div>
297
- </div>
298
- <div
299
- class="five wide column"
300
- >
301
- <div
302
- class="ui segment"
303
- >
304
- <div
305
- class="ui header"
306
- title="Requested grants"
307
- >
308
- Requested grants
309
- </div>
310
- <div
311
- class="ui divider"
312
- />
313
- <div
314
- class="list"
315
- />
316
- <p>
317
- Select structures for which grants will be requested
318
- </p>
319
- </div>
303
+ </button>
304
+ </td>
305
+ </tr>
306
+ </tbody>
307
+ </table>
320
308
  </div>
321
309
  </div>
322
310
  </div>
@@ -35,7 +35,7 @@ describe("sagas: downloadEditableStructuresRequestSaga", () => {
35
35
  describe("sagas: downloadEditableStructuresSaga", () => {
36
36
  const query = { filters: {} };
37
37
  const body = {
38
- structure_url_schema: "http:localhost:/structures/:id",
38
+ structure_url_schema: "http://localhost/structures/:id",
39
39
  ...query,
40
40
  };
41
41
  const data = "SOME CSV DATA";
@@ -38,7 +38,7 @@ describe("sagas: downloadStructuresSaga", () => {
38
38
 
39
39
  const body = {
40
40
  header_labels: headerLabels,
41
- structure_url_schema: "http:localhost:/structures/:id",
41
+ structure_url_schema: "http://localhost:/structures/:id",
42
42
  ...query,
43
43
  };
44
44
 
@@ -47,14 +47,4 @@ export function* downloadEditableStructuresRequestSaga() {
47
47
  );
48
48
  }
49
49
 
50
- function getStructureUrlSchema() {
51
- const defaultWebPorts = [80, 443];
52
-
53
- return defaultWebPorts.includes(window.location.port)
54
- ? window.location.protocol + window.location.hostname + STRUCTURE
55
- : window.location.protocol +
56
- window.location.hostname +
57
- ":" +
58
- window.location.port +
59
- STRUCTURE;
60
- }
50
+ const getStructureUrlSchema = () => window.location.origin + STRUCTURE;
@@ -50,8 +50,9 @@ function getStructureUrlSchema() {
50
50
  const defaultWebPorts = [80, 443];
51
51
 
52
52
  return defaultWebPorts.includes(window.location.port)
53
- ? window.location.protocol + window.location.hostname + STRUCTURE
53
+ ? window.location.protocol + "//" + window.location.hostname + STRUCTURE
54
54
  : window.location.protocol +
55
+ "//" +
55
56
  window.location.hostname +
56
57
  ":" +
57
58
  window.location.port +