orc-shared 5.10.2-dev.4 → 5.99.0-dev.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.
Files changed (226) 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/{IconButton.js → Form/Inputs/MultiSelector.js} +33 -31
  16. package/dist/components/Form/Inputs/index.js +1 -1
  17. package/dist/components/InternetExplorerWarningMessage.js +15 -15
  18. package/dist/components/LoadingIcon.js +38 -17
  19. package/dist/components/MaterialUI/DataDisplay/Modal.js +3 -3
  20. package/dist/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js +6 -6
  21. package/dist/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js +4 -4
  22. package/dist/components/MaterialUI/DataDisplay/SelectionList.js +1 -1
  23. package/dist/components/MaterialUI/DataDisplay/Table.js +2 -1
  24. package/dist/components/MaterialUI/DataDisplay/TableProps.js +3 -1
  25. package/dist/components/MaterialUI/DataDisplay/TransferList.js +1 -1
  26. package/dist/components/MaterialUI/Inputs/CheckboxGroup.js +1 -1
  27. package/dist/components/MaterialUI/Inputs/DatePicker.js +1 -1
  28. package/dist/components/MaterialUI/Inputs/InputBase.js +20 -188
  29. package/dist/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js +1 -1
  30. package/dist/components/MaterialUI/Inputs/Select.js +10 -0
  31. package/dist/components/MaterialUI/Inputs/SelectProps.js +3 -1
  32. package/dist/components/MaterialUI/Inputs/Switch.js +1 -1
  33. package/dist/components/MaterialUI/Navigation/DropDownMenu.js +2 -4
  34. package/dist/components/MaterialUI/ScopeSelector/ScopeSelector.js +1 -1
  35. package/dist/components/MaterialUI/ScopeSelector/TreeItem.js +27 -42
  36. package/dist/components/MaterialUI/Surfaces/Paper.js +1 -1
  37. package/dist/components/MaterialUI/Surfaces/SectionExpansionPanel.js +3 -2
  38. package/dist/components/MaterialUI/muiThemes.js +2 -0
  39. package/dist/components/Provision.js +30 -13
  40. package/dist/components/Routing/SegmentPage.js +115 -56
  41. package/dist/components/Scope/ScopeNode.js +62 -57
  42. package/dist/components/Sidepanel.js +59 -23
  43. package/dist/components/Spritesheet.js +35 -17
  44. package/dist/components/Text.js +1 -60
  45. package/dist/components/ToastList.js +95 -64
  46. package/dist/components/Treeview/Branch.js +82 -20
  47. package/dist/components/Treeview/Label.js +108 -31
  48. package/dist/components/Treeview/Leaf.js +56 -12
  49. package/dist/components/Treeview/Node.js +22 -9
  50. package/dist/components/Treeview/index.js +7 -1
  51. package/dist/components/Treeview/settings.js +17 -6
  52. package/dist/utils/index.js +0 -4
  53. package/dist/utils/testUtils.js +1 -12
  54. package/dist/{components/Modal/Background.js → utils/toastHelper.js} +11 -14
  55. package/package.json +2 -2
  56. package/src/components/AppFrame/About.js +13 -13
  57. package/src/components/AppFrame/Anchor.js +7 -7
  58. package/src/components/AppFrame/AppFrame.js +3 -3
  59. package/src/components/AppFrame/Help.js +4 -4
  60. package/src/components/AppFrame/MenuItem.js +15 -23
  61. package/src/components/AppFrame/Preferences.js +14 -14
  62. package/src/components/AppFrame/Sidebar.js +6 -6
  63. package/src/components/AppFrame/Topbar.js +6 -6
  64. package/src/components/ApplicationModuleLoader.js +2 -2
  65. package/src/components/ApplicationModuleLoader.test.js +15 -28
  66. package/src/components/Authenticate.js +21 -23
  67. package/src/components/Authenticate.test.js +19 -27
  68. package/src/components/DropMenu/Menu.js +9 -9
  69. package/src/components/ErrorPlaceholder.js +4 -21
  70. package/src/components/ErrorPlaceholder.test.js +7 -14
  71. package/src/components/Form/Field.js +4 -4
  72. package/src/components/Form/InputField.test.js +2 -1
  73. package/src/components/Form/Inputs/Button.js +2 -2
  74. package/src/components/Form/Inputs/MultiSelector.js +23 -0
  75. package/src/components/Form/Inputs/MultiSelector.test.js +112 -0
  76. package/src/components/Form/Inputs/index.js +1 -1
  77. package/src/components/InternetExplorerWarningMessage.js +15 -15
  78. package/src/components/Loader.test.js +50 -59
  79. package/src/components/LoadingIcon.js +27 -14
  80. package/src/components/LoadingIcon.test.js +11 -15
  81. package/src/components/MaterialUI/DataDisplay/Modal.js +3 -3
  82. package/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js +6 -6
  83. package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js +3 -3
  84. package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.test.js +0 -74
  85. package/src/components/MaterialUI/DataDisplay/PredefinedElements/Translations.test.js +6 -18
  86. package/src/components/MaterialUI/DataDisplay/SelectionList.js +1 -1
  87. package/src/components/MaterialUI/DataDisplay/Table.js +6 -1
  88. package/src/components/MaterialUI/DataDisplay/Table.test.js +21 -1
  89. package/src/components/MaterialUI/DataDisplay/TableProps.js +2 -0
  90. package/src/components/MaterialUI/DataDisplay/TableProps.test.js +20 -2
  91. package/src/components/MaterialUI/DataDisplay/TransferList.js +1 -1
  92. package/src/components/MaterialUI/Inputs/CheckboxGroup.js +1 -1
  93. package/src/components/MaterialUI/Inputs/DatePicker.js +1 -1
  94. package/src/components/MaterialUI/Inputs/InputBase.js +31 -214
  95. package/src/components/MaterialUI/Inputs/InputBase.test.js +1 -460
  96. package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js +1 -1
  97. package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.test.js +1 -1
  98. package/src/components/MaterialUI/Inputs/Select.js +7 -0
  99. package/src/components/MaterialUI/Inputs/Select.test.js +45 -0
  100. package/src/components/MaterialUI/Inputs/SelectProps.js +2 -0
  101. package/src/components/MaterialUI/Inputs/SelectProps.test.js +2 -0
  102. package/src/components/MaterialUI/Inputs/Switch.js +1 -1
  103. package/src/components/MaterialUI/Navigation/DropDownMenu.js +2 -2
  104. package/src/components/MaterialUI/Navigation/DropDownMenu.test.js +5 -6
  105. package/src/components/MaterialUI/ScopeSelector/ScopeSelector.js +1 -2
  106. package/src/components/MaterialUI/ScopeSelector/TreeItem.js +8 -31
  107. package/src/components/MaterialUI/Surfaces/Paper.js +1 -1
  108. package/src/components/MaterialUI/Surfaces/SectionExpansionPanel.js +2 -1
  109. package/src/components/MaterialUI/muiThemes.js +3 -0
  110. package/src/components/Navigation/Navigation.test.js +0 -5
  111. package/src/components/Navigation/useNavigationState.test.js +79 -222
  112. package/src/components/Provision.js +36 -42
  113. package/src/components/Provision.test.js +10 -26
  114. package/src/components/Routing/SegmentPage.js +68 -52
  115. package/src/components/Routing/SegmentPage.test.js +4 -12
  116. package/src/components/Scope/ScopeNode.js +44 -55
  117. package/src/components/Scope/ScopeNode.test.js +84 -163
  118. package/src/components/ScopeExtendedConfigurationLoader.test.js +1 -4
  119. package/src/components/Sidepanel.js +38 -32
  120. package/src/components/Sidepanel.test.js +54 -27
  121. package/src/components/Spritesheet.js +23 -21
  122. package/src/components/Spritesheet.test.js +10 -10
  123. package/src/components/Text.js +0 -49
  124. package/src/components/ToastList.js +79 -90
  125. package/src/components/ToastList.test.js +29 -103
  126. package/src/components/Treeview/Branch.js +65 -47
  127. package/src/components/Treeview/Branch.test.js +2 -43
  128. package/src/components/Treeview/Label.js +68 -54
  129. package/src/components/Treeview/Label.test.js +55 -63
  130. package/src/components/Treeview/Leaf.js +41 -22
  131. package/src/components/Treeview/Leaf.test.js +1 -15
  132. package/src/components/Treeview/Node.js +16 -9
  133. package/src/components/Treeview/Node.test.js +269 -200
  134. package/src/components/Treeview/Treeview.test.js +248 -248
  135. package/src/components/Treeview/index.js +6 -0
  136. package/src/components/Treeview/settings.js +10 -6
  137. package/src/utils/index.js +0 -4
  138. package/src/utils/testUtils.js +0 -10
  139. package/src/utils/testUtils.test.js +0 -68
  140. package/src/utils/toastHelper.js +8 -0
  141. package/src/utils/toastHelper.test.js +41 -0
  142. package/dist/components/Button.js +0 -70
  143. package/dist/components/CategoryList.js +0 -197
  144. package/dist/components/Checkbox.js +0 -103
  145. package/dist/components/Icon.js +0 -69
  146. package/dist/components/Input.js +0 -101
  147. package/dist/components/List/DataCell.js +0 -129
  148. package/dist/components/List/HeadCell.js +0 -125
  149. package/dist/components/List/HeadRow.js +0 -73
  150. package/dist/components/List/List.js +0 -274
  151. package/dist/components/List/Row.js +0 -109
  152. package/dist/components/List/enhanceColumnDefs.js +0 -111
  153. package/dist/components/List/index.js +0 -59
  154. package/dist/components/Modal/Dialog.js +0 -75
  155. package/dist/components/Modal/Wrapper.js +0 -69
  156. package/dist/components/Modal/index.js +0 -86
  157. package/dist/components/MultiSelector.js +0 -187
  158. package/dist/components/Navigation/Bar.js +0 -293
  159. package/dist/components/Navigation/Tab.js +0 -182
  160. package/dist/components/Placeholder.js +0 -114
  161. package/dist/components/Scope/Selector.js +0 -123
  162. package/dist/components/Selector.js +0 -185
  163. package/dist/components/Switch.js +0 -128
  164. package/dist/components/Toolbar.js +0 -227
  165. package/dist/components/Tooltip.js +0 -66
  166. package/dist/getTheme.js +0 -158
  167. package/dist/getThemeOverrides.js +0 -93
  168. package/dist/hocs/withAuthentication.js +0 -72
  169. package/dist/utils/styledPropFuncs.js +0 -88
  170. package/src/components/Button.js +0 -90
  171. package/src/components/Button.test.js +0 -49
  172. package/src/components/CategoryList.js +0 -140
  173. package/src/components/CategoryList.test.js +0 -667
  174. package/src/components/Checkbox.js +0 -63
  175. package/src/components/Checkbox.test.js +0 -122
  176. package/src/components/Icon.js +0 -18
  177. package/src/components/IconButton.js +0 -30
  178. package/src/components/IconButton.test.js +0 -61
  179. package/src/components/Input.js +0 -35
  180. package/src/components/Input.test.js +0 -34
  181. package/src/components/List/DataCell.js +0 -77
  182. package/src/components/List/DataCell.test.js +0 -357
  183. package/src/components/List/HeadCell.js +0 -105
  184. package/src/components/List/HeadCell.test.js +0 -331
  185. package/src/components/List/HeadRow.js +0 -21
  186. package/src/components/List/HeadRow.test.js +0 -27
  187. package/src/components/List/List.js +0 -162
  188. package/src/components/List/List.test.js +0 -705
  189. package/src/components/List/Row.js +0 -72
  190. package/src/components/List/Row.test.js +0 -194
  191. package/src/components/List/enhanceColumnDefs.js +0 -54
  192. package/src/components/List/enhanceColumnDefs.test.js +0 -179
  193. package/src/components/List/index.js +0 -6
  194. package/src/components/Modal/Background.js +0 -10
  195. package/src/components/Modal/Dialog.js +0 -27
  196. package/src/components/Modal/Dialog.test.js +0 -20
  197. package/src/components/Modal/Modal.test.js +0 -52
  198. package/src/components/Modal/Wrapper.js +0 -32
  199. package/src/components/Modal/Wrapper.test.js +0 -55
  200. package/src/components/Modal/index.js +0 -22
  201. package/src/components/MultiSelector.js +0 -104
  202. package/src/components/MultiSelector.test.js +0 -348
  203. package/src/components/Navigation/Bar.js +0 -212
  204. package/src/components/Navigation/Bar.test.js +0 -552
  205. package/src/components/Navigation/Tab.js +0 -156
  206. package/src/components/Navigation/Tab.test.js +0 -404
  207. package/src/components/Placeholder.js +0 -61
  208. package/src/components/Placeholder.test.js +0 -106
  209. package/src/components/Scope/Selector.js +0 -70
  210. package/src/components/Scope/Selector.test.js +0 -138
  211. package/src/components/Selector.js +0 -191
  212. package/src/components/Selector.test.js +0 -157
  213. package/src/components/Switch.js +0 -112
  214. package/src/components/Switch.test.js +0 -130
  215. package/src/components/Text.test.js +0 -132
  216. package/src/components/Toolbar.js +0 -178
  217. package/src/components/Toolbar.test.js +0 -478
  218. package/src/components/Tooltip.js +0 -51
  219. package/src/components/Tooltip.test.js +0 -21
  220. package/src/getTheme.js +0 -103
  221. package/src/getTheme.test.js +0 -92
  222. package/src/getThemeOverrides.js +0 -27
  223. package/src/hocs/withAuthentication.js +0 -18
  224. package/src/hocs/withAuthentication.test.js +0 -120
  225. package/src/utils/styledPropFuncs.js +0 -20
  226. 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 = ({ children }) => {
154
+ const classes = useStyles();
155
+
156
+ return (
157
+ <div className={classes.wrapper} key="Segments">
158
+ {children}
159
+ </div>
160
+ );
161
+ };
162
+
163
+ export const List = ({ children }) => {
164
+ const classes = useStyles();
165
+
166
+ return <div className={classes.list}>{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