orc-shared 5.10.2 → 5.99.0-dev.10

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.
Files changed (234) hide show
  1. package/dist/components/AppFrame/About.js +13 -13
  2. package/dist/components/AppFrame/Anchor.js +7 -7
  3. package/dist/components/AppFrame/AppFrame.js +3 -3
  4. package/dist/components/AppFrame/Help.js +4 -4
  5. package/dist/components/AppFrame/MenuItem.js +17 -26
  6. package/dist/components/AppFrame/Preferences.js +14 -14
  7. package/dist/components/AppFrame/Sidebar.js +6 -6
  8. package/dist/components/AppFrame/Topbar.js +6 -6
  9. package/dist/components/ApplicationModuleLoader.js +3 -2
  10. package/dist/components/Authenticate.js +29 -22
  11. package/dist/components/DropMenu/Menu.js +9 -9
  12. package/dist/components/ErrorPlaceholder.js +8 -24
  13. package/dist/components/Form/Field.js +4 -4
  14. package/dist/components/Form/Inputs/Button.js +2 -2
  15. package/dist/components/Form/Inputs/MultiSelector.js +137 -0
  16. package/dist/components/Form/Inputs/Selector.js +13 -10
  17. package/dist/components/Form/Inputs/index.js +1 -1
  18. package/dist/components/InternetExplorerWarningMessage.js +15 -15
  19. package/dist/components/LoadingIcon.js +38 -17
  20. package/dist/components/MaterialUI/DataDisplay/Modal.js +3 -3
  21. package/dist/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js +6 -6
  22. package/dist/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js +1 -1
  23. package/dist/components/MaterialUI/DataDisplay/PredefinedElements/TableInfoBar.js +1 -1
  24. package/dist/components/MaterialUI/DataDisplay/SelectionList.js +1 -1
  25. package/dist/components/MaterialUI/DataDisplay/Table.js +2 -1
  26. package/dist/components/MaterialUI/DataDisplay/TableProps.js +3 -1
  27. package/dist/components/MaterialUI/DataDisplay/TransferList.js +1 -1
  28. package/dist/components/MaterialUI/Inputs/CheckboxGroup.js +1 -1
  29. package/dist/components/MaterialUI/Inputs/DatePicker.js +1 -1
  30. package/dist/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js +1 -1
  31. package/dist/components/MaterialUI/Inputs/Select.js +175 -109
  32. package/dist/components/MaterialUI/Inputs/SelectProps.js +11 -1
  33. package/dist/components/MaterialUI/Inputs/Switch.js +1 -1
  34. package/dist/components/MaterialUI/Navigation/DropDownMenu.js +2 -4
  35. package/dist/components/MaterialUI/ScopeSelector/ScopeSelector.js +1 -1
  36. package/dist/components/MaterialUI/ScopeSelector/TreeItem.js +27 -42
  37. package/dist/components/MaterialUI/Surfaces/Paper.js +1 -1
  38. package/dist/components/MaterialUI/Surfaces/SectionExpansionPanel.js +3 -2
  39. package/dist/components/MaterialUI/muiThemes.js +3 -1
  40. package/dist/components/Provision.js +30 -13
  41. package/dist/components/Routing/SegmentPage.js +117 -56
  42. package/dist/components/Scope/ScopeNode.js +62 -57
  43. package/dist/components/Sidepanel.js +59 -23
  44. package/dist/components/Spritesheet.js +35 -17
  45. package/dist/components/Text.js +1 -60
  46. package/dist/components/ToastList.js +95 -64
  47. package/dist/components/Treeview/Branch.js +82 -20
  48. package/dist/components/Treeview/Label.js +108 -31
  49. package/dist/components/Treeview/Leaf.js +56 -12
  50. package/dist/components/Treeview/Node.js +22 -9
  51. package/dist/components/Treeview/index.js +7 -1
  52. package/dist/components/Treeview/settings.js +17 -6
  53. package/dist/{components/Modal/index.js → hooks/useWindowSize.js} +38 -36
  54. package/dist/sharedMessages.js +8 -0
  55. package/dist/utils/index.js +0 -4
  56. package/dist/utils/testUtils.js +1 -12
  57. package/dist/{components/Modal/Background.js → utils/toastHelper.js} +11 -14
  58. package/package.json +2 -2
  59. package/src/components/AppFrame/About.js +13 -13
  60. package/src/components/AppFrame/Anchor.js +7 -7
  61. package/src/components/AppFrame/AppFrame.js +3 -3
  62. package/src/components/AppFrame/Help.js +4 -4
  63. package/src/components/AppFrame/MenuItem.js +15 -23
  64. package/src/components/AppFrame/Preferences.js +14 -14
  65. package/src/components/AppFrame/Sidebar.js +6 -6
  66. package/src/components/AppFrame/Topbar.js +6 -6
  67. package/src/components/ApplicationModuleLoader.js +2 -2
  68. package/src/components/ApplicationModuleLoader.test.js +15 -28
  69. package/src/components/Authenticate.js +21 -23
  70. package/src/components/Authenticate.test.js +19 -27
  71. package/src/components/DropMenu/Menu.js +9 -9
  72. package/src/components/ErrorPlaceholder.js +4 -21
  73. package/src/components/ErrorPlaceholder.test.js +7 -14
  74. package/src/components/Form/Field.js +4 -4
  75. package/src/components/Form/InputField.test.js +2 -1
  76. package/src/components/Form/Inputs/Button.js +2 -2
  77. package/src/components/Form/Inputs/MultiSelector.js +73 -0
  78. package/src/components/Form/Inputs/MultiSelector.test.js +332 -0
  79. package/src/components/Form/Inputs/Selector.js +12 -4
  80. package/src/components/Form/Inputs/Selector.test.js +27 -12
  81. package/src/components/Form/Inputs/index.js +1 -1
  82. package/src/components/InternetExplorerWarningMessage.js +15 -15
  83. package/src/components/Loader.test.js +50 -59
  84. package/src/components/LoadingIcon.js +27 -14
  85. package/src/components/LoadingIcon.test.js +11 -15
  86. package/src/components/MaterialUI/DataDisplay/Modal.js +3 -3
  87. package/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js +6 -6
  88. package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js +1 -1
  89. package/src/components/MaterialUI/DataDisplay/PredefinedElements/TableInfoBar.js +1 -1
  90. package/src/components/MaterialUI/DataDisplay/SelectionList.js +1 -1
  91. package/src/components/MaterialUI/DataDisplay/Table.js +6 -1
  92. package/src/components/MaterialUI/DataDisplay/Table.test.js +21 -1
  93. package/src/components/MaterialUI/DataDisplay/TableProps.js +2 -0
  94. package/src/components/MaterialUI/DataDisplay/TableProps.test.js +20 -2
  95. package/src/components/MaterialUI/DataDisplay/TransferList.js +1 -1
  96. package/src/components/MaterialUI/Inputs/CheckboxGroup.js +1 -1
  97. package/src/components/MaterialUI/Inputs/DatePicker.js +1 -1
  98. package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js +1 -1
  99. package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.test.js +1 -1
  100. package/src/components/MaterialUI/Inputs/Select.js +143 -83
  101. package/src/components/MaterialUI/Inputs/Select.test.js +199 -14
  102. package/src/components/MaterialUI/Inputs/SelectProps.js +10 -0
  103. package/src/components/MaterialUI/Inputs/SelectProps.test.js +10 -0
  104. package/src/components/MaterialUI/Inputs/Switch.js +1 -1
  105. package/src/components/MaterialUI/Navigation/DropDownMenu.js +2 -2
  106. package/src/components/MaterialUI/Navigation/DropDownMenu.test.js +5 -6
  107. package/src/components/MaterialUI/ScopeSelector/ScopeSelector.js +1 -2
  108. package/src/components/MaterialUI/ScopeSelector/TreeItem.js +8 -31
  109. package/src/components/MaterialUI/Surfaces/Paper.js +1 -1
  110. package/src/components/MaterialUI/Surfaces/SectionExpansionPanel.js +2 -1
  111. package/src/components/MaterialUI/muiThemes.js +4 -1
  112. package/src/components/Navigation/Navigation.test.js +0 -5
  113. package/src/components/Navigation/useNavigationState.test.js +79 -222
  114. package/src/components/Provision.js +36 -42
  115. package/src/components/Provision.test.js +10 -26
  116. package/src/components/Routing/SegmentPage.js +68 -52
  117. package/src/components/Routing/SegmentPage.test.js +4 -12
  118. package/src/components/Scope/ScopeNode.js +44 -55
  119. package/src/components/Scope/ScopeNode.test.js +84 -163
  120. package/src/components/ScopeExtendedConfigurationLoader.test.js +1 -4
  121. package/src/components/Sidepanel.js +38 -32
  122. package/src/components/Sidepanel.test.js +54 -27
  123. package/src/components/Spritesheet.js +23 -21
  124. package/src/components/Spritesheet.test.js +10 -10
  125. package/src/components/Text.js +0 -49
  126. package/src/components/ToastList.js +79 -90
  127. package/src/components/ToastList.test.js +29 -103
  128. package/src/components/Treeview/Branch.js +65 -47
  129. package/src/components/Treeview/Branch.test.js +2 -43
  130. package/src/components/Treeview/Label.js +68 -54
  131. package/src/components/Treeview/Label.test.js +55 -63
  132. package/src/components/Treeview/Leaf.js +41 -22
  133. package/src/components/Treeview/Leaf.test.js +1 -15
  134. package/src/components/Treeview/Node.js +16 -9
  135. package/src/components/Treeview/Node.test.js +269 -200
  136. package/src/components/Treeview/Treeview.test.js +248 -248
  137. package/src/components/Treeview/index.js +6 -0
  138. package/src/components/Treeview/settings.js +10 -6
  139. package/src/hooks/useMultipleFieldEditState.test.js +0 -1
  140. package/src/hooks/useWindowSize.js +39 -0
  141. package/src/hooks/useWindowSize.test.js +68 -0
  142. package/src/sharedMessages.js +8 -0
  143. package/src/translations/en-US.json +2 -0
  144. package/src/translations/fr-CA.json +2 -0
  145. package/src/utils/index.js +0 -4
  146. package/src/utils/testUtils.js +0 -10
  147. package/src/utils/testUtils.test.js +0 -68
  148. package/src/utils/toastHelper.js +8 -0
  149. package/src/utils/toastHelper.test.js +41 -0
  150. package/dist/components/Button.js +0 -70
  151. package/dist/components/CategoryList.js +0 -197
  152. package/dist/components/Checkbox.js +0 -103
  153. package/dist/components/Icon.js +0 -69
  154. package/dist/components/IconButton.js +0 -80
  155. package/dist/components/Input.js +0 -101
  156. package/dist/components/List/DataCell.js +0 -129
  157. package/dist/components/List/HeadCell.js +0 -125
  158. package/dist/components/List/HeadRow.js +0 -73
  159. package/dist/components/List/List.js +0 -274
  160. package/dist/components/List/Row.js +0 -109
  161. package/dist/components/List/enhanceColumnDefs.js +0 -111
  162. package/dist/components/List/index.js +0 -59
  163. package/dist/components/Modal/Dialog.js +0 -75
  164. package/dist/components/Modal/Wrapper.js +0 -69
  165. package/dist/components/MultiSelector.js +0 -187
  166. package/dist/components/Navigation/Bar.js +0 -293
  167. package/dist/components/Navigation/Tab.js +0 -182
  168. package/dist/components/Placeholder.js +0 -114
  169. package/dist/components/Scope/Selector.js +0 -123
  170. package/dist/components/Selector.js +0 -185
  171. package/dist/components/Switch.js +0 -128
  172. package/dist/components/Toolbar.js +0 -227
  173. package/dist/components/Tooltip.js +0 -66
  174. package/dist/getTheme.js +0 -158
  175. package/dist/getThemeOverrides.js +0 -93
  176. package/dist/hocs/withAuthentication.js +0 -72
  177. package/dist/utils/styledPropFuncs.js +0 -88
  178. package/src/components/Button.js +0 -90
  179. package/src/components/Button.test.js +0 -49
  180. package/src/components/CategoryList.js +0 -140
  181. package/src/components/CategoryList.test.js +0 -667
  182. package/src/components/Checkbox.js +0 -63
  183. package/src/components/Checkbox.test.js +0 -122
  184. package/src/components/Icon.js +0 -18
  185. package/src/components/IconButton.js +0 -30
  186. package/src/components/IconButton.test.js +0 -61
  187. package/src/components/Input.js +0 -35
  188. package/src/components/Input.test.js +0 -34
  189. package/src/components/List/DataCell.js +0 -77
  190. package/src/components/List/DataCell.test.js +0 -357
  191. package/src/components/List/HeadCell.js +0 -105
  192. package/src/components/List/HeadCell.test.js +0 -331
  193. package/src/components/List/HeadRow.js +0 -21
  194. package/src/components/List/HeadRow.test.js +0 -27
  195. package/src/components/List/List.js +0 -162
  196. package/src/components/List/List.test.js +0 -705
  197. package/src/components/List/Row.js +0 -72
  198. package/src/components/List/Row.test.js +0 -194
  199. package/src/components/List/enhanceColumnDefs.js +0 -54
  200. package/src/components/List/enhanceColumnDefs.test.js +0 -179
  201. package/src/components/List/index.js +0 -6
  202. package/src/components/Modal/Background.js +0 -10
  203. package/src/components/Modal/Dialog.js +0 -27
  204. package/src/components/Modal/Dialog.test.js +0 -20
  205. package/src/components/Modal/Modal.test.js +0 -52
  206. package/src/components/Modal/Wrapper.js +0 -32
  207. package/src/components/Modal/Wrapper.test.js +0 -55
  208. package/src/components/Modal/index.js +0 -22
  209. package/src/components/MultiSelector.js +0 -104
  210. package/src/components/MultiSelector.test.js +0 -348
  211. package/src/components/Navigation/Bar.js +0 -212
  212. package/src/components/Navigation/Bar.test.js +0 -552
  213. package/src/components/Navigation/Tab.js +0 -156
  214. package/src/components/Navigation/Tab.test.js +0 -404
  215. package/src/components/Placeholder.js +0 -61
  216. package/src/components/Placeholder.test.js +0 -106
  217. package/src/components/Scope/Selector.js +0 -70
  218. package/src/components/Scope/Selector.test.js +0 -138
  219. package/src/components/Selector.js +0 -191
  220. package/src/components/Selector.test.js +0 -157
  221. package/src/components/Switch.js +0 -112
  222. package/src/components/Switch.test.js +0 -130
  223. package/src/components/Text.test.js +0 -132
  224. package/src/components/Toolbar.js +0 -178
  225. package/src/components/Toolbar.test.js +0 -478
  226. package/src/components/Tooltip.js +0 -51
  227. package/src/components/Tooltip.test.js +0 -21
  228. package/src/getTheme.js +0 -103
  229. package/src/getTheme.test.js +0 -92
  230. package/src/getThemeOverrides.js +0 -27
  231. package/src/hocs/withAuthentication.js +0 -18
  232. package/src/hocs/withAuthentication.test.js +0 -120
  233. package/src/utils/styledPropFuncs.js +0 -20
  234. package/src/utils/styledPropFuncs.test.js +0 -166
package/src/components/Provision.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import React from "react";
2
2
  import { Provider } from "react-redux";
3
3
  import { ConnectedRouter } from "connected-react-router/immutable";
4
- import { ThemeProvider, createGlobalStyle } from "styled-components";
5
4
  import { MuiThemeProvider } from "@material-ui/core/styles";
6
- import { getThemeProp } from "../utils";
5
+ import { makeStyles } from "@material-ui/core/styles";
7
6
  import { history } from "../buildStore";
8
7
  import Authenticate from "./Authenticate";
9
8
  import DevPages from "./DevPages";
@@ -13,53 +12,48 @@ import InternetExplorerWarningMessage from "./InternetExplorerWarningMessage";
13
12
  import Culture from "./Culture";
14
13
  import ScopeExtendedConfigurationLoader from "./ScopeExtendedConfigurationLoader";
15
14
 
16
- const GlobalStyle = createGlobalStyle`
17
- html {
18
- height: 100%;
19
- }
15
+ const useGlobalStyles = makeStyles({
16
+ "@global": {
17
+ html: {
18
+ height: "100%",
19
+ },
20
20
 
21
- body {
22
- height: 100%;
23
- margin: 0;
24
- overflow: hidden;
25
- }
21
+ body: {
22
+ height: "100%",
23
+ margin: 0,
24
+ overflow: "hidden",
25
+ fontFamily: props => props.muiTheme.typography.fontFamily,
26
+ },
26
27
 
27
- #app {
28
- height: 100%;
29
- }
30
- `;
28
+ "#app": {
29
+ height: "100%",
30
+ },
31
+ },
32
+ });
31
33
 
32
- const Fonts = createGlobalStyle`
33
- body {
34
- font-family: ${getThemeProp(["fonts", "base"], "sans-serif")};
35
- }
36
- `;
34
+ const Provision = ({ store, muiTheme, children }) => {
35
+ useGlobalStyles({ muiTheme });
37
36
 
38
- const Provision = ({ store, theme = {}, muiTheme, children }) => {
39
37
  return (
40
38
  <Provider store={store}>
41
39
  <ConnectedRouter history={history}>
42
- <ThemeProvider theme={theme}>
43
- <MuiThemeProvider theme={muiTheme}>
44
- <React.Fragment>
45
- <Head />
46
- <GlobalStyle />
47
- <Authenticate>
48
- <React.Fragment>
49
- <Fonts />
50
- <DevPages>
51
- <I18n>
52
- <Culture />
53
- {React.Children.only(children)}
54
- <InternetExplorerWarningMessage />
55
- </I18n>
56
- </DevPages>
57
- <ScopeExtendedConfigurationLoader />
58
- </React.Fragment>
59
- </Authenticate>
60
- </React.Fragment>
61
- </MuiThemeProvider>
62
- </ThemeProvider>
40
+ <MuiThemeProvider theme={muiTheme}>
41
+ <React.Fragment>
42
+ <Head />
43
+ <Authenticate>
44
+ <React.Fragment>
45
+ <DevPages>
46
+ <I18n>
47
+ <Culture />
48
+ {React.Children.only(children)}
49
+ <InternetExplorerWarningMessage />
50
+ </I18n>
51
+ </DevPages>
52
+ <ScopeExtendedConfigurationLoader />
53
+ </React.Fragment>
54
+ </Authenticate>
55
+ </React.Fragment>
56
+ </MuiThemeProvider>
63
57
  </ConnectedRouter>
64
58
  </Provider>
65
59
  );
package/src/components/Provision.test.js CHANGED
@@ -1,10 +1,8 @@
1
1
  import React from "react";
2
2
  import Immutable from "immutable";
3
- import { withTheme } from "styled-components";
4
3
  import { mount } from "unexpected-reaction";
5
- import { spyOnConsole } from "../utils/testUtils";
4
+ import { createMuiTheme, spyOnConsole } from "../utils/testUtils";
6
5
  import Provision from "./Provision";
7
- import { createTheme } from "@material-ui/core/styles";
8
6
 
9
7
  jest.mock("../utils/buildUrl", () => {
10
8
  const modExport = {};
@@ -65,45 +63,31 @@ const fakeStore = {
65
63
  replaceReducer: () => {},
66
64
  };
67
65
 
68
- const fakeTheme = { value: "styles" };
66
+ const muiTheme = createMuiTheme();
69
67
 
70
- const fakeMuiTheme = createTheme({
71
- direction: "ltr",
72
- });
73
-
74
- const TestComp = withTheme(({ theme }) => <div>{JSON.stringify(theme)}</div>);
68
+ const TestComp = () => <div>Test</div>;
75
69
 
76
70
  describe("Provision", () => {
77
71
  spyOnConsole(["error"]);
78
72
  it("renders", () =>
79
73
  expect(
80
- <Provision store={fakeStore} theme={fakeTheme} muiTheme={fakeMuiTheme}>
81
- <TestComp />
82
- </Provision>,
83
- "when mounted",
84
- "to satisfy",
85
- <div>{'{"value":"styles"}'}</div>,
86
- ).then(() => expect(console.error, "was not called")));
87
-
88
- it("handles getting no theme", () =>
89
- expect(
90
- <Provision store={fakeStore} muiTheme={fakeMuiTheme}>
74
+ <Provision store={fakeStore} muiTheme={muiTheme}>
91
75
  <TestComp />
92
76
  </Provision>,
93
77
  "when mounted",
94
78
  "to satisfy",
95
- <div>{"{}"}</div>,
79
+ <div>Test</div>,
96
80
  ).then(() => expect(console.error, "was not called")));
97
81
 
98
82
  it("handles getting no mui theme", () => {
99
- let mountedComponent = () => expect(<Provision store={fakeStore} theme={fakeTheme} />, "when mounted");
83
+ let mountedComponent = () => expect(<Provision store={fakeStore} />, "when mounted");
100
84
 
101
85
  expect(mountedComponent, "to throw");
102
86
  });
103
87
 
104
88
  it("fails if no children given", () =>
105
89
  expect(
106
- () => expect(<Provision store={fakeStore} theme={fakeTheme} />, "when mounted"),
90
+ () => expect(<Provision store={fakeStore} muiTheme={muiTheme} />, "when mounted"),
107
91
  "to throw",
108
92
  "React.Children.only expected to receive a single React element child.",
109
93
  ).then(() =>
@@ -124,7 +108,7 @@ describe("Provision", () => {
124
108
  describe("global styles", () => {
125
109
  it("ensures required styling on html element to make IE11 happy", () => {
126
110
  mount(
127
- <Provision store={fakeStore} theme={fakeTheme}>
111
+ <Provision store={fakeStore} muiTheme={muiTheme}>
128
112
  <div />
129
113
  </Provision>,
130
114
  );
@@ -133,7 +117,7 @@ describe("Provision", () => {
133
117
 
134
118
  it("ensures required body styling", () => {
135
119
  mount(
136
- <Provision store={fakeStore} theme={fakeTheme}>
120
+ <Provision store={fakeStore} muiTheme={muiTheme}>
137
121
  <div />
138
122
  </Provision>,
139
123
  );
@@ -147,7 +131,7 @@ describe("Provision", () => {
147
131
 
148
132
  it("ensures required viewport styling", () => {
149
133
  mount(
150
- <Provision store={fakeStore} theme={fakeTheme}>
134
+ <Provision store={fakeStore} muiTheme={muiTheme}>
151
135
  <div />
152
136
  </Provision>,
153
137
  );
package/src/components/Routing/SegmentPage.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import React from "react";
2
- import styled, { css } from "styled-components";
3
2
  import { Switch, Route, Redirect, Link } from "react-router-dom";
3
+ import { FormattedMessage } from "react-intl";
4
4
  import UrlPattern from "url-pattern";
5
- import { ifFlag, getThemeProp } from "../../utils";
6
- import Text from "../Text";
7
5
  import FullPage from "./FullPage";
8
6
  import SubPage from "./SubPage";
9
7
  import Segment from "./Segment";
@@ -44,58 +42,50 @@ const useStyles = makeStyles(theme => ({
44
42
  display: "flex",
45
43
  },
46
44
  wrapper: {
45
+ boxSizing: "border-box",
46
+ display: "flex",
47
+ borderTop: `1px solid ${theme.palette.grey.borders}`,
48
+ flex: "0 1 100%",
49
+ height: `calc(100% - ${theme.spacing(9)})`,
50
+ minHeight: 0,
51
+
47
52
  "div[class^='AppFrame__ViewPort'] > div&:nth-child(3)": {
48
53
  marginTop: props => (props.isComponentNull ? null : theme.spacing(6)),
49
54
  },
50
55
  },
51
- }));
56
+ list: {
57
+ flex: "0 0.1 15%",
58
+ borderRight: `1px solid ${theme.palette.grey.borders}`,
59
+ display: "flex",
60
+ flexDirection: "column",
61
+ overflowY: "auto",
62
+ },
63
+ item: {
64
+ display: "block",
65
+ whiteSpace: "nowrap",
66
+ minWidth: "max-content",
67
+ padding: theme.spacing(1.5, 2),
68
+ fontWeight: "bold",
69
+ fontSize: theme.spacing(1.3),
70
+ textDecoration: "none",
71
+ cursor: "pointer",
72
+ color: theme.palette.text.primary,
52
73
 
53
- export const Wrapper = styled.div`
54
- box-sizing: border-box;
55
- display: flex;
56
- border-top: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
57
- flex: 0 1 100%;
58
- height: calc(100% - 90px);
59
- min-height: 0;
60
- `;
74
+ "&:hover": {
75
+ backgroundColor: "#f7f7f7",
76
+ },
61
77
 
62
- export const List = styled.div`
63
- flex: 0 0.1 15%;
64
- border-right: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
65
- display: flex;
66
- flex-direction: column;
67
- overflow-y: auto;
68
- `;
78
+ "&.active": {
79
+ backgroundColor: "#b4cfe3",
80
+ },
81
+ },
82
+ }));
69
83
 
70
84
  const FilteredLink = ({ active, ...props }) => (props.to ? <Link {...props} /> : <div {...props} />);
71
85
 
72
- export const Item = styled(FilteredLink)`
73
- display: block;
74
- white-space: nowrap;
75
- min-width: max-content;
76
- padding: 15px 20px;
77
- font-weight: bold;
78
- font-size: 13px;
79
- text-decoration: none;
80
- cursor: pointer;
81
- color: ${getThemeProp(["colors", "text"], "#333333")};
82
-
83
- ${ifFlag(
84
- "active",
85
- css`
86
- background-color: #b4cfe3;
87
- `,
88
- css`
89
- &:hover {
90
- background-color: #f7f7f7;
91
- }
92
- `,
93
- )};
94
- `;
95
-
96
86
  export const SegmentItem = ({ isModified, isError, isActive, segpath, config, baseHref, params }) => {
97
87
  const classes = useStyles();
98
- let hideSelector = state => (typeof config.hide === "function" ? config.hide(params)(state) : config.hide ?? false);
88
+ let hideSelector = state => (typeof config.hide === "function" ? config.hide(params)(state) : (config.hide ?? false));
99
89
  const isHide = useSelector(hideSelector);
100
90
  const asterix = <span className={classes.asterix}>*</span>;
101
91
 
@@ -103,13 +93,13 @@ export const SegmentItem = ({ isModified, isError, isActive, segpath, config, ba
103
93
  const values = config.labelValueSelector(params);
104
94
 
105
95
  if (typeof values === "function") {
106
- config.label.values = values;
96
+ config.label.values = values();
107
97
  } else if (config.label.values) {
108
98
  delete config.label.values;
109
99
  }
110
100
  }
111
101
 
112
- const text = <Text message={config.label} />;
102
+ const text = typeof config.label === "string" ? config.label : <FormattedMessage {...config.label} />;
113
103
 
114
104
  const getSectionLabelClassName = (isModified, isError, isDisabled) => {
115
105
  let className = classes.label;
@@ -121,7 +111,7 @@ export const SegmentItem = ({ isModified, isError, isActive, segpath, config, ba
121
111
  };
122
112
 
123
113
  let disableSelector = state =>
124
- typeof config.disabled === "function" ? config.disabled(params)(state) : config.disabled ?? false;
114
+ typeof config.disabled === "function" ? config.disabled(params)(state) : (config.disabled ?? false);
125
115
  const isDisabled = useSelector(disableSelector);
126
116
  const sectionLabelClassName = getSectionLabelClassName(isModified, isError, isDisabled);
127
117
 
@@ -152,7 +142,7 @@ export const SegmentItem = ({ isModified, isError, isActive, segpath, config, ba
152
142
  <>
153
143
  {!isHide && isDisabled && <Item>{finalLabel}</Item>}
154
144
  {!isHide && !isDisabled && (
155
- <Item to={baseHref + segpath} active={isActive}>
145
+ <Item active={isActive} to={baseHref + segpath}>
156
146
  {finalLabel}
157
147
  </Item>
158
148
  )}
@@ -160,6 +150,32 @@ export const SegmentItem = ({ isModified, isError, isActive, segpath, config, ba
160
150
  );
161
151
  };
162
152
 
153
+ export const Wrapper = ({ className, children }) => {
154
+ const classes = useStyles();
155
+
156
+ return (
157
+ <div className={classNames(classes.wrapper, className ?? null)} key="Segments">
158
+ {children}
159
+ </div>
160
+ );
161
+ };
162
+
163
+ export const List = ({ className, children }) => {
164
+ const classes = useStyles();
165
+
166
+ return <div className={classNames(classes.list, className ?? null)}>{children}</div>;
167
+ };
168
+
169
+ export const Item = ({ active, to, children, onClick }) => {
170
+ const classes = useStyles();
171
+
172
+ return (
173
+ <FilteredLink className={classNames(classes.item, active ? "active" : undefined)} to={to} onClick={onClick}>
174
+ {children}
175
+ </FilteredLink>
176
+ );
177
+ };
178
+
163
179
  const defaultEntityIdResolver = ({ match, baseHref }) => {
164
180
  const entityIdKey = Object.keys(match.params).find(p => p !== "scope");
165
181
  let entityId = match.params[entityIdKey];
@@ -257,8 +273,8 @@ const SegmentPage = ({
257
273
  <Route
258
274
  render={() => [
259
275
  View ? <View key="View" {...componentProps} /> : null,
260
- <Wrapper className={classes.wrapper} key="Segments">
261
- <List>
276
+ <div className={classes.wrapper} key="Segments">
277
+ <div className={classes.list}>
262
278
  {segmentEntries.map(([segpath, config]) => {
263
279
  const isModified = modifiedSections.includes(segpath.replace("/", ""));
264
280
  const isError = sectionsWithErrors.includes(segpath.replace("/", ""));
@@ -276,13 +292,13 @@ const SegmentPage = ({
276
292
  />
277
293
  );
278
294
  })}
279
- </List>
295
+ </div>
280
296
  <Switch>
281
297
  {segmentElements}
282
298
  <Redirect exact path={path} to={baseHref + Object.keys(segments)[0]} />
283
299
  </Switch>
284
300
  <Switch>{subpages}</Switch>
285
- </Wrapper>,
301
+ </div>,
286
302
  ]}
287
303
  />
288
304
  </Switch>
package/src/components/Routing/SegmentPage.test.js CHANGED
@@ -195,9 +195,7 @@ describe("SegmentPage", () => {
195
195
  </Item>
196
196
  <Item to="/foo/meep/entityIdValue/nine">
197
197
  <Grid container alignItems="center" wrap="nowrap">
198
- <div>
199
- <span />
200
- </div>
198
+ <div>{`© {year} Orckestra Technologies Inc.`}</div>
201
199
  <div />
202
200
  </Grid>
203
201
  </Item>
@@ -277,9 +275,7 @@ describe("SegmentPage", () => {
277
275
  </Item>
278
276
  <Item to="/foo/meep/entityIdValue/nine">
279
277
  <Grid container alignItems="center" wrap="nowrap">
280
- <div>
281
- <span />
282
- </div>
278
+ <div>{`© {year} Orckestra Technologies Inc.`}</div>
283
279
  <div />
284
280
  </Grid>
285
281
  </Item>
@@ -405,9 +401,7 @@ describe("SegmentPage", () => {
405
401
  </Item>
406
402
  <Item to="/foo/meep/entityIdValue/nine">
407
403
  <Grid container alignItems="center" wrap="nowrap">
408
- <div>
409
- <span />
410
- </div>
404
+ <div>{`© {year} Orckestra Technologies Inc.`}</div>
411
405
  <div />
412
406
  </Grid>
413
407
  </Item>
@@ -487,9 +481,7 @@ describe("SegmentPage", () => {
487
481
  </Item>
488
482
  <Item to="/foo/meep/entityIdValue/nine">
489
483
  <Grid container alignItems="center" wrap="nowrap">
490
- <div>
491
- <span />
492
- </div>
484
+ <div>{`© {year} Orckestra Technologies Inc.`}</div>
493
485
  <div />
494
486
  </Grid>
495
487
  </Item>
package/src/components/Scope/ScopeNode.js CHANGED
@@ -1,64 +1,53 @@
1
1
  import React from "react";
2
- import styled, { css } from "styled-components";
3
- import Icon from "../Icon";
4
- import useScopeSelect from "./useScopeSelect";
5
- import { getThemeProp, ifFlag } from "../../utils";
2
+ import { makeStyles } from "@material-ui/core/styles";
3
+ import { ScopeIcon } from "../MaterialUI/ScopeSelector/TreeItem";
4
+ import classNames from "classnames";
6
5
 
7
- export const ScopeIcon = styled(Icon).attrs(props => ({
8
- id: getThemeProp(["icons", "scopeTypes", props => props.type], "cross")(props),
9
- }))`
10
- font-size: 20px;
11
- vertical-align: middle;
12
- padding-right: 8px;
13
- flex-shrink: 0;
14
- color: ${getThemeProp(["colors", "scopeTypes", props => props.type], "inherit")};
15
- `;
6
+ const useStyles = makeStyles(theme => ({
7
+ scopeIcon: {
8
+ paddingRight: theme.spacing(0.8),
9
+ marginRight: theme.spacing(0),
10
+ height: theme.spacing(2),
11
+ width: theme.spacing(2),
12
+ },
13
+ scopeText: {
14
+ overflowWrap: "break-word",
15
+ },
16
+ contentLabel: props => ({
17
+ boxSizing: "border-box",
18
+ display: "flex",
19
+ alignItems: "center",
20
+ padding: theme.spacing(1),
21
+ width: "100%",
22
+ ...(props.isClickable
23
+ ? {
24
+ "&:hover": {
25
+ backgroundColor: "#222",
26
+ },
27
+ }
28
+ : {
29
+ color: theme.palette.error.main,
30
+ cursor: "default",
31
+ }),
32
+ }),
33
+ }));
16
34
 
17
- export const ScopeText = styled.div`
18
- overflow-wrap: break-word;
19
- `;
35
+ export const ScopeNode = ({ type, scopeId, name, contentLabelClassName, onClick, children }) => {
36
+ const classes = useStyles({ isGlobal: type === "Global", isClickable: onClick !== undefined });
20
37
 
21
- export const ContentLabel = styled.div`
22
- box-sizing: border-box;
23
- display: flex;
24
- align-items: center;
25
- padding: 10px;
26
- width: 100%;
27
- ${ifFlag(
28
- "onClick",
29
- css`
30
- &:hover {
31
- background-color: #222;
32
- }
33
- `,
34
- css`
35
- color: ${getThemeProp(["colors", "textMedium"], "#999999")};
36
- cursor: default;
37
- `,
38
- )};
39
- ${ifFlag(
40
- "isGlobal",
41
- css`
42
- text-transform: uppercase;
43
- `,
44
- )};
45
- `;
46
-
47
- export const ScopeNode = ({ type, name, id, isAuthorizedScope, closeSelector }) => {
48
- const [navigate] = useScopeSelect(id);
49
- const onClick =
50
- isAuthorizedScope && type !== "Virtual"
51
- ? event => {
52
- navigate(event);
53
- closeSelector(event);
54
- }
55
- : undefined;
38
+ const displayValue = (name || scopeId) ?? null;
56
39
 
57
40
  return (
58
- <ContentLabel id={"selectorNode" + id} isGlobal={type === "Global"} onClick={onClick}>
59
- <ScopeIcon type={type} />
60
- <ScopeText>{name || id}</ScopeText>
61
- </ContentLabel>
41
+ <div
42
+ id={"selectorNode" + (scopeId ?? "scopeUnknown")}
43
+ className={classNames(classes.contentLabel, contentLabelClassName)}
44
+ onClick={onClick}
45
+ data-qa="content-label"
46
+ >
47
+ <ScopeIcon type={type} scopeIconClass={classes.scopeIcon} />
48
+ {displayValue && <div className={classes.scopeText}>{displayValue}</div>}
49
+ {children}
50
+ </div>
62
51
  );
63
52
  };
64
53