orc-shared 5.10.1-dev.8 → 5.10.1-dev.9

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 (133) hide show
  1. package/dist/components/Authenticate.js +41 -17
  2. package/dist/components/ErrorPlaceholder.js +8 -24
  3. package/dist/components/{Icon.js → Form/Inputs/MultiSelector.js} +33 -20
  4. package/dist/components/Form/Inputs/index.js +1 -1
  5. package/dist/components/LoadingIcon.js +6 -16
  6. package/dist/components/MaterialUI/Inputs/Select.js +10 -0
  7. package/dist/components/MaterialUI/Inputs/SelectProps.js +3 -1
  8. package/dist/components/MaterialUI/Navigation/DropDownMenu.js +2 -4
  9. package/dist/components/Provision.js +30 -13
  10. package/dist/components/Routing/SegmentPage.js +115 -56
  11. package/dist/components/Scope/ScopeNode.js +68 -45
  12. package/dist/components/Sidepanel.js +57 -23
  13. package/dist/components/Spritesheet.js +33 -17
  14. package/dist/components/Text.js +1 -60
  15. package/dist/components/Treeview/Branch.js +82 -20
  16. package/dist/components/Treeview/Label.js +108 -31
  17. package/dist/components/Treeview/Leaf.js +56 -12
  18. package/dist/components/Treeview/Node.js +22 -9
  19. package/dist/components/Treeview/index.js +7 -1
  20. package/dist/components/Treeview/settings.js +7 -5
  21. package/dist/utils/index.js +0 -4
  22. package/dist/utils/testUtils.js +1 -12
  23. package/package.json +1 -1
  24. package/src/components/ApplicationModuleLoader.test.js +14 -27
  25. package/src/components/Authenticate.js +29 -21
  26. package/src/components/Authenticate.test.js +18 -27
  27. package/src/components/ErrorPlaceholder.js +4 -21
  28. package/src/components/ErrorPlaceholder.test.js +7 -14
  29. package/src/components/Form/InputField.test.js +2 -1
  30. package/src/components/Form/Inputs/MultiSelector.js +23 -0
  31. package/src/components/Form/Inputs/MultiSelector.test.js +112 -0
  32. package/src/components/Form/Inputs/index.js +1 -1
  33. package/src/components/Loader.test.js +21 -33
  34. package/src/components/LoadingIcon.js +2 -15
  35. package/src/components/LoadingIcon.test.js +2 -20
  36. package/src/components/MaterialUI/DataDisplay/Table.test.js +1 -1
  37. package/src/components/MaterialUI/Inputs/Select.js +7 -0
  38. package/src/components/MaterialUI/Inputs/Select.test.js +45 -0
  39. package/src/components/MaterialUI/Inputs/SelectProps.js +2 -0
  40. package/src/components/MaterialUI/Inputs/SelectProps.test.js +2 -0
  41. package/src/components/MaterialUI/Navigation/DropDownMenu.js +2 -2
  42. package/src/components/MaterialUI/Navigation/DropDownMenu.test.js +5 -6
  43. package/src/components/Navigation/Navigation.test.js +0 -5
  44. package/src/components/Navigation/useNavigationState.test.js +79 -222
  45. package/src/components/Provision.js +36 -42
  46. package/src/components/Provision.test.js +10 -26
  47. package/src/components/Routing/SegmentPage.js +68 -52
  48. package/src/components/Routing/SegmentPage.test.js +4 -12
  49. package/src/components/Scope/ScopeNode.js +61 -54
  50. package/src/components/Scope/ScopeNode.test.js +61 -154
  51. package/src/components/ScopeExtendedConfigurationLoader.test.js +1 -4
  52. package/src/components/Sidepanel.js +38 -32
  53. package/src/components/Sidepanel.test.js +49 -27
  54. package/src/components/Spritesheet.js +23 -21
  55. package/src/components/Spritesheet.test.js +10 -10
  56. package/src/components/Text.js +0 -49
  57. package/src/components/Treeview/Branch.js +63 -45
  58. package/src/components/Treeview/Branch.test.js +21 -24
  59. package/src/components/Treeview/Label.js +66 -52
  60. package/src/components/Treeview/Label.test.js +42 -60
  61. package/src/components/Treeview/Leaf.js +41 -22
  62. package/src/components/Treeview/Leaf.test.js +15 -10
  63. package/src/components/Treeview/Node.js +16 -9
  64. package/src/components/Treeview/Node.test.js +269 -200
  65. package/src/components/Treeview/Treeview.test.js +248 -248
  66. package/src/components/Treeview/index.js +6 -0
  67. package/src/components/Treeview/settings.js +7 -6
  68. package/src/utils/index.js +0 -4
  69. package/src/utils/testUtils.js +0 -10
  70. package/src/utils/testUtils.test.js +0 -68
  71. package/dist/components/Button.js +0 -70
  72. package/dist/components/Checkbox.js +0 -103
  73. package/dist/components/IconButton.js +0 -80
  74. package/dist/components/Input.js +0 -101
  75. package/dist/components/Modal/Background.js +0 -55
  76. package/dist/components/Modal/Dialog.js +0 -75
  77. package/dist/components/Modal/Wrapper.js +0 -69
  78. package/dist/components/Modal/index.js +0 -86
  79. package/dist/components/MultiSelector.js +0 -187
  80. package/dist/components/Navigation/Bar.js +0 -293
  81. package/dist/components/Navigation/Tab.js +0 -182
  82. package/dist/components/Placeholder.js +0 -114
  83. package/dist/components/Scope/Selector.js +0 -123
  84. package/dist/components/Selector.js +0 -185
  85. package/dist/components/Switch.js +0 -128
  86. package/dist/components/Toolbar.js +0 -227
  87. package/dist/components/Tooltip.js +0 -66
  88. package/dist/getTheme.js +0 -153
  89. package/dist/getThemeOverrides.js +0 -93
  90. package/dist/hocs/withAuthentication.js +0 -72
  91. package/dist/utils/styledPropFuncs.js +0 -88
  92. package/src/components/Button.js +0 -90
  93. package/src/components/Button.test.js +0 -49
  94. package/src/components/Checkbox.js +0 -63
  95. package/src/components/Checkbox.test.js +0 -122
  96. package/src/components/Icon.js +0 -18
  97. package/src/components/IconButton.js +0 -30
  98. package/src/components/IconButton.test.js +0 -61
  99. package/src/components/Input.js +0 -35
  100. package/src/components/Input.test.js +0 -34
  101. package/src/components/Modal/Background.js +0 -10
  102. package/src/components/Modal/Dialog.js +0 -27
  103. package/src/components/Modal/Dialog.test.js +0 -20
  104. package/src/components/Modal/Modal.test.js +0 -52
  105. package/src/components/Modal/Wrapper.js +0 -32
  106. package/src/components/Modal/Wrapper.test.js +0 -55
  107. package/src/components/Modal/index.js +0 -22
  108. package/src/components/MultiSelector.js +0 -104
  109. package/src/components/MultiSelector.test.js +0 -348
  110. package/src/components/Navigation/Bar.js +0 -212
  111. package/src/components/Navigation/Bar.test.js +0 -552
  112. package/src/components/Navigation/Tab.js +0 -156
  113. package/src/components/Navigation/Tab.test.js +0 -404
  114. package/src/components/Placeholder.js +0 -61
  115. package/src/components/Placeholder.test.js +0 -106
  116. package/src/components/Scope/Selector.js +0 -70
  117. package/src/components/Scope/Selector.test.js +0 -138
  118. package/src/components/Selector.js +0 -191
  119. package/src/components/Selector.test.js +0 -157
  120. package/src/components/Switch.js +0 -112
  121. package/src/components/Switch.test.js +0 -130
  122. package/src/components/Text.test.js +0 -132
  123. package/src/components/Toolbar.js +0 -178
  124. package/src/components/Toolbar.test.js +0 -478
  125. package/src/components/Tooltip.js +0 -51
  126. package/src/components/Tooltip.test.js +0 -21
  127. package/src/getTheme.js +0 -98
  128. package/src/getTheme.test.js +0 -92
  129. package/src/getThemeOverrides.js +0 -27
  130. package/src/hocs/withAuthentication.js +0 -18
  131. package/src/hocs/withAuthentication.test.js +0 -120
  132. package/src/utils/styledPropFuncs.js +0 -20
  133. 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% - 90px)",
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: "15px 20px",
68
+ fontWeight: "bold",
69
+ fontSize: "13px",
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,71 @@
1
1
  import React from "react";
2
- import styled, { css } from "styled-components";
3
- import Icon from "../Icon";
2
+ import { makeStyles } from "@material-ui/core/styles";
4
3
  import useScopeSelect from "./useScopeSelect";
5
- import { getThemeProp, ifFlag } from "../../utils";
4
+ import { ScopeIcon } from "../MaterialUI/ScopeSelector/TreeItem";
5
+ import classNames from "classnames";
6
6
 
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
- `;
7
+ const useStyles = makeStyles(theme => ({
8
+ scopeIcon: {
9
+ fontSize: "20px",
10
+ verticalAlign: "middle",
11
+ paddingRight: "8px",
12
+ flexShrink: 0,
13
+ },
14
+ scopeText: {
15
+ overflowWrap: "break-word",
16
+ },
17
+ contentLabel: props => ({
18
+ boxSizing: "border-box",
19
+ display: "flex",
20
+ alignItems: "center",
21
+ padding: "10px",
22
+ width: "100%",
23
+ textTransform: props.isGlobal ? "uppercase" : "none",
24
+ ...(props.isClickable
25
+ ? {
26
+ "&:hover": {
27
+ backgroundColor: "#222",
28
+ },
29
+ }
30
+ : {
31
+ color: theme.palette.error.main,
32
+ cursor: "default",
33
+ }),
34
+ }),
35
+ }));
16
36
 
17
- export const ScopeText = styled.div`
18
- overflow-wrap: break-word;
19
- `;
20
-
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 }) => {
37
+ export const ScopeNode = ({
38
+ type,
39
+ name,
40
+ id,
41
+ isAuthorizedScope,
42
+ closeSelector,
43
+ contentLabelClassName,
44
+ iconClassName,
45
+ onClick,
46
+ children,
47
+ }) => {
48
48
  const [navigate] = useScopeSelect(id);
49
- const onClick =
50
- isAuthorizedScope && type !== "Virtual"
51
- ? event => {
52
- navigate(event);
53
- closeSelector(event);
54
- }
55
- : undefined;
49
+
50
+ if (!onClick && isAuthorizedScope && type !== "Virtual") {
51
+ onClick = event => {
52
+ navigate(event);
53
+ closeSelector(event);
54
+ };
55
+ }
56
+ const classes = useStyles({ isGlobal: type === "Global", isClickable: onClick !== undefined });
56
57
 
57
58
  return (
58
- <ContentLabel id={"selectorNode" + id} isGlobal={type === "Global"} onClick={onClick}>
59
- <ScopeIcon type={type} />
60
- <ScopeText>{name || id}</ScopeText>
61
- </ContentLabel>
59
+ <div
60
+ id={"selectorNode" + id}
61
+ className={classNames(classes.contentLabel, contentLabelClassName)}
62
+ onClick={onClick}
63
+ data-qa="content-label"
64
+ >
65
+ <ScopeIcon type={type} className={classNames(classes.scopeIcon, iconClassName)} />
66
+ <div className={classes.scopeText}>{name || id}</div>
67
+ {children}
68
+ </div>
62
69
  );
63
70
  };
64
71