@deviceinsight/ng-ui-scale-lib 9.14.0

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 (31) hide show
  1. package/README.md +194 -0
  2. package/dist/AccessEditModal-a5347dbd.js +91 -0
  3. package/dist/BundleManagementContainer-842bd582.js +17 -0
  4. package/dist/BundlesContainer-44da5cdf.js +908 -0
  5. package/dist/ContextBarContext-f745a63a.js +95534 -0
  6. package/dist/DatapointImport-139761c5.js +860 -0
  7. package/dist/FileUploadInput-6dc037cb.js +44 -0
  8. package/dist/Files-cd57769d.js +360 -0
  9. package/dist/GlobalPowerBiReports-b5b89de7.js +11078 -0
  10. package/dist/Graph-c912ea08.js +25009 -0
  11. package/dist/JsonSettingWidget-3d9a995d.js +54 -0
  12. package/dist/LicensesEditPage-22cc7d68.js +143 -0
  13. package/dist/LicensesList-1f3f08e2.js +146 -0
  14. package/dist/PropertiesEditPage-c84dc0d9.js +370 -0
  15. package/dist/PropertiesList-fe8aa64d.js +265 -0
  16. package/dist/TemplateEditPage-f163ea2f.js +505 -0
  17. package/dist/TemplateTextInput-1ba4e19b.js +47 -0
  18. package/dist/TemplatesListPage-a11b0d84.js +326 -0
  19. package/dist/UserGroupAssignments-8710d8e3.js +293 -0
  20. package/dist/UserGroupTheme-0d0d7d48.js +280 -0
  21. package/dist/api.js +84 -0
  22. package/dist/consts-012135e5.js +33 -0
  23. package/dist/customFileCategories-1b64ed45.js +11 -0
  24. package/dist/extends-0a3e0827.js +13 -0
  25. package/dist/index-4f55daa8.js +18658 -0
  26. package/dist/index.js +17373 -0
  27. package/dist/react-router-f15627c1.js +1152 -0
  28. package/dist/setupRuntimeEnv.js +27 -0
  29. package/dist/style.css +1 -0
  30. package/dist/useCanDeleteBundleVersion-64f35949.js +45 -0
  31. package/package.json +161 -0
package/README.md ADDED
@@ -0,0 +1,194 @@
1
+ # ng-ui-scale library
2
+
3
+ ## CI/CD configuration
4
+
5
+ CI/CD is running with gitlab pipelines.
6
+ The configuration is located in the file `.gitlab-ci.yml`.
7
+ The `gitlab-ci.yml` file contains two jobs:
8
+
9
+ 1. `publish_library`: publishes the library in the npm registry.
10
+ It runs the script `prepare-release.mts` from the `scripts` directory.
11
+ The script updates the `ng-ui-scale` version, and updates the current `package.json` version, and then publishes the library.
12
+ This job is supposed to be triggered by the `ng-ui-scale` pipeline when a new version is released.
13
+ 2. `publish_custom_project`: publishes the custom project `ng-ui-scale-custom`.
14
+ This job is supposed to be executed after `publish_library`. It triggers the `ng-ui-scale-custom` pipeline to publish the custom project.
15
+
16
+ ### Points to improve
17
+
18
+ The processes for publishing the library and deploying custom projects need to be more robust.
19
+ Right now, if the custom project deployment fails after the library has been published,
20
+ we can't restart the whole process because the library publication will fail due to it already being published.
21
+ Similarly, if the custom project is already deployed, and we want to rerun the pipeline,
22
+ it will fail because the project is already deployed.
23
+ The only solution we currently have is to create another release candidate with a new version,
24
+ which is both pointless and time-consuming.
25
+
26
+ ## Migration from `scale-ui-scripts` to vite-based project using the `ng-ui-scale-lib` library
27
+
28
+ This short walk-through shows how to migrate a tenant project based on `scale-ui-scripts` to a vite-based project using
29
+ the `ng-ui-scale-lib`.
30
+
31
+ ### 1. Update the `package.json` file
32
+
33
+ in `devDependencies` section:
34
+
35
+ ```diff
36
+ - "@deviceinsight/scale-ui-custom-scripts": "5.7.0",
37
+ - "@deviceinsight/scale-ui-types": "2.6.0",
38
+ + "vite": "^4.4.5",
39
+ + "@vitejs/plugin-react": "^4.0.4",
40
+ + "vite-plugin-environment": "^1.1.3",
41
+ ```
42
+
43
+ in `dependencies` section:
44
+
45
+ ```diff
46
+ + "@deviceinsight/ng-ui-scale-lib": "{latest_version}"
47
+ ```
48
+
49
+ `@deviceinsight/scale-ui-custom-scripts` is not needed because `vite` takes over its responsibilities.
50
+
51
+ `@deviceinsight/scale-ui-types` is not needed because the library `ng-ui-scale-lib` provides the types.
52
+
53
+ Along with vite, two plugins are installed:
54
+
55
+ - `@vitejs/plugin-react` required in every react-based project
56
+ - `vite-plugin-environment` required to read the environment variables with prefix `REACT_APP`.
57
+
58
+ Then, install the new dependencies with command `npm install`.
59
+
60
+ ### 2. Change the script field
61
+
62
+ ```diff
63
+ -"start": "scale-ui-custom start",
64
+ -"build": "scale-ui-custom bundle",
65
+ +"start": "vite",
66
+ +"build": "vite build",
67
+ ```
68
+
69
+ ### 3. Create the vite configuration file `vite.config.js`
70
+
71
+ ```js
72
+ import {defineConfig} from 'vite';
73
+ import react from '@vitejs/plugin-react';
74
+ import EnvironmentPlugin from 'vite-plugin-environment';
75
+
76
+ export default defineConfig({
77
+ plugins: [react(), EnvironmentPlugin('all', {prefix: 'REACT_APP_', defineOn: 'import.meta.env'})]
78
+ });
79
+ ```
80
+
81
+ ### 4. Create the index.html file
82
+
83
+ ```html
84
+ <!doctype html>
85
+ <html lang="en">
86
+ <head>
87
+ <meta charset="UTF-8" />
88
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
89
+ <title>ScaleUI Custom Project</title>
90
+ </head>
91
+ <body>
92
+ <div class="di app-wrapper">
93
+ <div id="app"></div>
94
+ </div>
95
+ <script type="module" src="/node_modules/@deviceinsight/ng-ui-scale-lib/dist/setupRuntimeEnv.js"></script>
96
+ <script type="module" src="/src/index.tsx"></script>
97
+ </body>
98
+ </html>
99
+ ```
100
+
101
+ The file must contain the following elements in the body:
102
+
103
+ ```html
104
+ <div class="di app-wrapper">
105
+ <div id="app"></div>
106
+ </div>
107
+ <script type="module" src="/node_modules/@deviceinsight/ng-ui-scale-lib/dist/setupRuntimeEnv.js"></script>
108
+ ```
109
+
110
+ The `div` elements are required for the correct display of the application. The `script` element is required to set up
111
+ the runtime environment.
112
+
113
+ The last element of the body:
114
+
115
+ ```html
116
+ <script type="module" src="/src/index.tsx"></script>
117
+ ```
118
+
119
+ Includes the entry point of the application.
120
+ The path to the file might be different in your application, it's just an
121
+ example.
122
+
123
+ ### 5. Create the entry point file
124
+
125
+ The following snippet shows the simplest entry point file:
126
+
127
+ ```tsx
128
+ import {StrictMode} from 'react';
129
+ import {createRoot} from 'react-dom/client';
130
+ import {BrowserRouter} from 'react-router-dom';
131
+
132
+ import {initializeApp, App} from '@deviceinsight/ng-ui-scale-lib';
133
+ import '@deviceinsight/ng-ui-scale-lib/dist/style.css';
134
+
135
+ async function setup() {
136
+ await initializeApp();
137
+ // await customizations(); <-- your customizations
138
+ }
139
+
140
+ setup().then(() =>
141
+ createRoot(document.getElementById('app')!).render(
142
+ <StrictMode>
143
+ <BrowserRouter>
144
+ <App />
145
+ </BrowserRouter>
146
+ </StrictMode>
147
+ )
148
+ );
149
+ ```
150
+
151
+ The file above does the following things:
152
+
153
+ 1. Imports the styles of the `ng-ui-scale` application.
154
+ 2. Initializes the application with the `initializeApp` function.
155
+ 3. Executes the custom initial code. This step is optional.
156
+ 4. Renders the application with the `createRoot` function.
157
+
158
+ Note that the `<App />` must be wrapped into `BrowserRouter` if you want to add custom pages to the
159
+ application. `<StrictMode>` is optional but recommended.
160
+
161
+ ### 6. Fix the imports of the custom api functions
162
+
163
+ If your application used any custom api methods, they were imported from the already removed
164
+ package `@deviceinsight/scale-ui-types`. These methods are now provided by the `ng-ui-scale-lib` library, so the only
165
+ thing that must be change is the imports. All the methods are available in the
166
+ package `@deviceinsight/ng-ui-scale-lib/api`.
167
+
168
+ ```diff
169
+ -import {RouteApi} from "@deviceinsight/scale-ui-types";
170
+ +import {RouteApi} from "@deviceinsight/ng-ui-scale-lib/api";
171
+ ```
172
+
173
+ ### 7. Upgrade TypeScript to version 5 and other dependencies to the latest version
174
+
175
+ If your project is still working on TypeScript version 4, you must upgrade it to version 5.
176
+ In the `tsconfig.json` set the `moduleResolution` to `bundler`:
177
+
178
+ ```
179
+ {
180
+ "compilerOptions": {
181
+ "moduleResolution": "bundler"
182
+ ...
183
+ }
184
+ }
185
+ ```
186
+
187
+ Upgrade also `@deviceinsight/ng-ui-components` and `@deviceinsight/ng-ui-basic-components` if they are used in your
188
+ project.
189
+
190
+ Then fix all the TypeScript errors that might occur.
191
+
192
+ ### 8. Run your application
193
+
194
+ Now the migration is done and your application is ready. Run it with command `npm start`.
package/dist/AccessEditModal-a5347dbd.js ADDED
@@ -0,0 +1,91 @@
1
+ import { au as A, ah as j, aU as w, at as e, ag as r, bL as U, dg as I, dh as O, di as _, cf as E, dj as m } from "./ContextBarContext-f745a63a.js";
2
+ import { useState as f, useContext as M, useMemo as b } from "react";
3
+ import { Modal as k, SpinnerContainer as K, Button as x } from "@deviceinsight/ng-ui-basic-components";
4
+ import { InfoBox as F } from "@deviceinsight/ng-ui-components";
5
+ import { searchUserGroups as L } from "@deviceinsight/ng-ui-api-client";
6
+ const W = "usergroupsWithoutAccessToTemplate";
7
+ function R(o) {
8
+ return {
9
+ fields: E,
10
+ search: (s, t) => L(o(s), t)
11
+ };
12
+ }
13
+ function v(o, s) {
14
+ return s ? m(
15
+ s.filter((t) => !o.includes(t)),
16
+ !1
17
+ ) : m(o, !0);
18
+ }
19
+ function q({ onSave: o, onCancel: s, loading: t, template: n }) {
20
+ const [i, T] = f([]), [c, S] = f(!0), { user: u } = M(A), l = n && n.accountGroupsWithAccess || [], C = c ? u.accountGroupIds ?? [] : null, G = b(
21
+ () => Math.random(),
22
+ // eslint-disable-next-line react-hooks/exhaustive-deps
23
+ [c]
24
+ ), { t: d } = j(), h = w(["ACCESS_TO_ALL_NOTIFICATION_TEMPLATES"]), g = (n == null ? void 0 : n.accountGroupsWithAccess) ?? [], p = [...i, ...g].some(
25
+ (a) => u.accountGroupIds.includes(a)
26
+ ), y = !h && !p || t;
27
+ return /* @__PURE__ */ e.jsx(
28
+ k,
29
+ {
30
+ onOutsideClick: s,
31
+ header: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.access.modal.title", children: "Authorize User Groups to access this template" }),
32
+ content: /* @__PURE__ */ e.jsxs(K, { show: t, children: [
33
+ /* @__PURE__ */ e.jsx("h2", { children: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.access.modal.headline", children: "Add User Groups" }) }),
34
+ !h && !p && /* @__PURE__ */ e.jsx(
35
+ F,
36
+ {
37
+ type: "warning",
38
+ icon: U,
39
+ message: d("notificationTemplate.access.modal.ownUserGroupRequired", {
40
+ defaultValue: "You have to at least select one of your own groups, to not lose access to the notification template."
41
+ })
42
+ }
43
+ ),
44
+ /* @__PURE__ */ e.jsx(
45
+ I,
46
+ {
47
+ searchContext: W,
48
+ searchConfig: R(v(l, C)),
49
+ columnDefinitions: O(!0),
50
+ uniqueItemKey: (a) => a.id,
51
+ pageSize: 5,
52
+ onSelectSome: T,
53
+ updateTrigger: G,
54
+ extraHeaderComponent: () => /* @__PURE__ */ e.jsx(
55
+ _,
56
+ {
57
+ style: {
58
+ flexGrow: 1,
59
+ marginLeft: "50px"
60
+ },
61
+ value: c,
62
+ onChange: S,
63
+ label: d("notificationTemplate.access.modal.showOnlyMyGroups", {
64
+ defaultValue: "Show only my groups"
65
+ }),
66
+ horizontal: !0
67
+ }
68
+ ),
69
+ searchInputScope: "notification-template-access-modal"
70
+ }
71
+ ),
72
+ /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.access.modal.note", children: "Please select User Groups to authorise them to access and work with this template." })
73
+ ] }),
74
+ footer: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
75
+ /* @__PURE__ */ e.jsx(
76
+ x,
77
+ {
78
+ primary: !0,
79
+ disabled: y,
80
+ onClick: () => o([...l, ...i], n),
81
+ children: /* @__PURE__ */ e.jsx(r, { i18nKey: "general.actions.save", children: "Save" })
82
+ }
83
+ ),
84
+ /* @__PURE__ */ e.jsx(x, { onClick: () => s(), children: /* @__PURE__ */ e.jsx(r, { i18nKey: "general.actions.cancel", children: "Cancel" }) })
85
+ ] })
86
+ }
87
+ );
88
+ }
89
+ export {
90
+ q as A
91
+ };
package/dist/BundleManagementContainer-842bd582.js ADDED
@@ -0,0 +1,17 @@
1
+ import { bs as n, at as r } from "./ContextBarContext-f745a63a.js";
2
+ import { useContext as s, useEffect as m } from "react";
3
+ import { useLocation as a } from "react-router-dom";
4
+ import { messageBoxDismissGroup as i } from "@deviceinsight/ng-ui-components";
5
+ import { M as p } from "./consts-012135e5.js";
6
+ import "@deviceinsight/ng-ui-basic-components";
7
+ import "@deviceinsight/ng-ui-api-client";
8
+ import "react-dom";
9
+ function l({ children: o }) {
10
+ const { setContextInfo: t } = s(n), { pathname: e } = a();
11
+ return m(() => (t(), () => {
12
+ i(p), t();
13
+ }), [e, t]), /* @__PURE__ */ r.jsx("div", { children: o });
14
+ }
15
+ export {
16
+ l as default
17
+ };