ydb-embedded-ui 1.7.1 → 1.8.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +13 -0
- package/dist/assets/illustrations/dark/403.svg +1 -0
- package/dist/assets/illustrations/light/403.svg +1 -0
- package/dist/components/EmptyState/EmptyState.js +12 -10
- package/dist/components/Illustration/Illustration.tsx +47 -0
- package/dist/components/Illustration/index.ts +1 -0
- package/dist/containers/Tenant/Tenant.tsx +36 -20
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,18 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
+
## [1.8.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.7.1...v1.8.0) (2022-07-05)
|
4
|
+
|
5
|
+
|
6
|
+
### Features
|
7
|
+
|
8
|
+
* add Illustration component ([7d10880](https://github.com/ydb-platform/ydb-embedded-ui/commit/7d10880cd4d9f945e7c8a7232327d8db68f0865c))
|
9
|
+
* **Tenant:** proper 403 error page ([d822a2b](https://github.com/ydb-platform/ydb-embedded-ui/commit/d822a2b6e3e18c24882ecf30db399087053b83b3))
|
10
|
+
|
11
|
+
|
12
|
+
### Bug Fixes
|
13
|
+
|
14
|
+
* fix empty state illustration layout ([7cfd97e](https://github.com/ydb-platform/ydb-embedded-ui/commit/7cfd97e13ebcaa703478bd7b4e29774150bd569e))
|
15
|
+
|
3
16
|
## [1.7.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.7.0...v1.7.1) (2022-07-05)
|
4
17
|
|
5
18
|
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg width="349" height="356" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".8"><path d="M275.008 84.928c0 24.7-9.9 83.9-9.9 117.1 0 33.2 0 106.3-27.8 134.1-27.8 27.8-61.9 16.1-61.9 16.1s-46.7 13-76.3-14.8c-29.6-27.8-60.1-83.5-69.1-115.3-9.9-35-26.5-49.3-27.8-56.5-1.3-7.2 3.6-12.1 12.1-12.6 8.5-.4 22.9 4 34.5 22 11.6 18 17.5 26 23.8 35.9 6.3 9.9 20.6 23.3 20.6 23.3s.4-44.9 1.3-64.1c.9-19.3-1.8-111.7 1.8-132.3 3.6-20.6 26.5-20.2 28.7-4 2.2 16.1 8.8 66.8 9.8 79.8s3.7 44.4 3.7 44.4l7.6-2.7s-.9-105.8-.9-132.9c0-29.2 28.7-29.2 32.3-4 3.6 25.2 6.7 142.8 6.7 142.8l6.7 2.7s2.2-111.7 5.8-129.6c3.6-17.9 26.5-17.5 30.1 4.9 3.6 22.4 1.3 72.2.9 94.2s-.9 43.5-.9 43.5l5.4 4s11-73.3 14.4-99.1c3.7-27.8 28.4-21.5 28.4 3.1z" fill="#fff" fill-opacity=".07"/><path d="M279.207 266.428l-216.9 12c-7.3.4-13.3-5.2-13.3-12.5v-167.4c0-7.3 6-12.9 13.3-12.5l216.9 12c5.6.3 10.1 5.7 10.1 12v144.4c0 6.3-4.5 11.7-10.1 12z" fill="#FF4645"/><path d="M191.308 139.226l-32.3-1.4c-1.9-.1-3.8.6-5.2 1.9l-24.3 22.8c-1.4 1.3-2.2 3.2-2.2 5.2v33.7c0 2 .8 3.8 2.2 5.2l24.3 22.8c1.4 1.3 3.3 2 5.2 1.9l32.3-1.4c1.8-.1 3.6-.9 4.9-2.2l21.5-22.8c1.2-1.3 1.9-3.1 1.9-4.9v-31c0-1.8-.7-3.6-1.9-4.9l-21.5-22.8c-1.3-1.3-3.1-2.1-4.9-2.1z" fill="#fff"/><path d="M203.408 195.526l-58.1.6c-1.6 0-3-1.3-3-3v-17.2c0-1.6 1.3-3 3-3l58.1.6c1.6 0 2.9 1.3 2.9 3v16c0 1.7-1.3 3-2.9 3z" fill="#FF4645"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.707 103.727c0 3.4-2.7 6-6.1 5.8-3.4-.1-6.1-3-6.1-6.4 0-3.4 2.8-6 6.1-5.8 3.4.2 6.1 3 6.1 6.4zm19.7.9c0 3.3-2.7 5.9-6 5.8-3.3-.1-6-3-6-6.3s2.7-5.9 6-5.8c3.3.1 6 2.9 6 6.3zm13.4 6.499c3.2.2 5.8-2.4 5.8-5.7 0-3.3-2.6-6.1-5.8-6.2-3.3-.2-5.9 2.4-5.9 5.7 0 3.3 2.7 6.1 5.9 6.2z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M248.707 247.329h84.6v-62c0-22.5-18.3-40.7-40.7-40.7h-3.2c-22.5 0-40.7 18.3-40.7 40.7v62zm70.2-14.3h-56v-47.7c0-14.6 11.9-26.4 26.4-26.4h3.2c14.6 0 26.4 11.9 26.4 26.4v47.7z" fill="#DEB700"/><path d="M340.507 205.528s-16.3-2.7-17.3-2.7l-78.6 1.1c-7 .1-13.7 6.5-13.7 13.1v58.6c0 4.7 2.9 8.5 7 10.1 1.5.6 3.1.9 4.8.9l12.5 2.3 7.6-3.7 60.4-4.3c6.2-.4 11.2-5.8 11.2-11.9v-43.3l6.1-20.2z" fill="#DEB700"/><path d="M337.607 283.43l-79.6 5.7c-7 .5-12.7-4.4-12.7-11v-59.6c0-6.6 5.7-12 12.7-12.1l79.6-1.1c6.2-.1 11.2 4.8 11.2 10.9v55.4c-.1 6-5 11.3-11.2 11.8z" fill="#FBC900"/><path d="M313.007 236.029c0-6.3-5.2-11.4-11.7-11.4-6.7 0-12.3 5.4-12.3 12 0 5 3.2 9.1 7.6 10.7v15.5c0 2.5 2.1 4.4 4.7 4.2 2.6-.2 4.6-2.5 4.6-4.9v-15.1c4.3-2.1 7.1-6.3 7.1-11z" fill="#00236B"/><path d="M308.307 236.028c0-5.5-4-10.1-9.3-11.2-5.6 1.1-10 6-10 11.8 0 5 3.2 9.1 7.6 10.7v15.5c0 1.5.8 2.8 2 3.5 1.6-.9 2.6-2.5 2.6-4.3v-15.1c4.2-2 7.1-6.2 7.1-10.9z" fill="#18123D"/><path d="M21.708 40.727a2 2 0 1 0-4 0h4zm-4 8.2a2 2 0 0 0 4 0h-4zm4 17.198a2 2 0 0 0-4 0h4zm-4 8.9a2 2 0 1 0 4 0h-4zm19.2-15.197a2 2 0 1 0 0-4v4zm-8.3-4a2 2 0 0 0 0 4v-4zm-17.8 4a2 2 0 1 0 0-4v4zm-8.3-4a2 2 0 0 0 0 4v-4zm15.2-15.101v8.2h4v-8.2h-4zm0 25.398v8.9h4v-8.9h-4zm19.2-10.297h-8.3v4h8.3v-4zm-26.1 0h-8.3v4h8.3v-4zm284.199 259.098a2 2 0 1 0-4 0h4zm-4 6.2a2 2 0 0 0 4 0h-4zm4 13.1a2 2 0 1 0-4 0h4zm-4 6.8a2 2 0 0 0 4 0h-4zm15-11.1a2 2 0 0 0 0-4v4zm-6.2-4a2 2 0 0 0 0 4v-4zm-13.6 4a2 2 0 0 0 0-4v4zm-6.3-4a2 2 0 0 0 0 4v-4zm11.1-11v6.2h4v-6.2h-4zm0 19.3v6.8h4v-6.8h-4zm15-8.3h-6.2v4h6.2v-4zm-19.8 0h-6.3v4h6.3v-4z" fill="#2EE5C0"/><path clip-rule="evenodd" d="M15.207 325.426c7.18 0 13-5.821 13-13 0-7.18-5.82-13-13-13s-13 5.82-13 13c0 7.179 5.82 13 13 13z" stroke="#2EE5C0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28.207 310.426a2 2 0 1 0 0 4v-4zm35.2 2h2a2 2 0 0 0-2-2v2zm-2 12.2a2 2 0 0 0 4 0h-4zm-17.1 0a2 2 0 0 0 4 0h-4zm4-12.2a2 2 0 1 0-4 0h4zm-20.1 2h35.2v-4h-35.2v4zm33.2-2v12.2h4v-12.2h-4zm-13.1 12.2v-12.2h-4v12.2h4z" fill="#2EE5C0"/></g></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg width="349" height="357" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M275.033 85.83c0 24.7-9.9 83.9-9.9 117.1 0 33.2 0 106.3-27.8 134.1-27.8 27.8-61.9 16.1-61.9 16.1s-46.7 13-76.3-14.8c-29.6-27.8-60.1-83.5-69.1-115.3-9.9-35-26.5-49.3-27.8-56.5-1.3-7.2 3.6-12.1 12.1-12.6 8.5-.4 22.9 4 34.5 22 11.6 18 17.5 26 23.8 35.9 6.3 9.9 20.6 23.3 20.6 23.3s.4-44.9 1.3-64.1c.9-19.3-1.8-111.7 1.8-132.3 3.6-20.6 26.5-20.2 28.7-4 2.2 16.1 8.8 66.8 9.8 79.8s3.7 44.4 3.7 44.4l7.6-2.7s-.9-105.8-.9-132.9c0-29.2 28.7-29.2 32.3-4 3.6 25.2 6.7 142.8 6.7 142.8l6.7 2.7s2.2-111.7 5.8-129.6c3.6-17.9 26.5-17.5 30.1 4.9 3.6 22.4 1.3 72.2.9 94.2s-.9 43.5-.9 43.5l5.4 4s11-73.3 14.4-99.1c3.7-27.8 28.4-21.5 28.4 3.1z" fill="#ECF2F9"/><path d="M279.233 267.33l-216.9 12c-7.3.4-13.3-5.2-13.3-12.5V99.43c0-7.3 6-12.9 13.3-12.5l216.9 12c5.6.3 10.1 5.7 10.1 12v144.4c0 6.3-4.5 11.7-10.1 12z" fill="#FF4645"/><path d="M191.333 140.128l-32.3-1.4c-1.9-.1-3.8.6-5.2 1.9l-24.3 22.8c-1.4 1.3-2.2 3.2-2.2 5.2v33.7c0 2 .8 3.8 2.2 5.2l24.3 22.8c1.4 1.3 3.3 2 5.2 1.9l32.3-1.4c1.8-.1 3.6-.9 4.9-2.2l21.5-22.8c1.2-1.3 1.9-3.1 1.9-4.9v-31c0-1.8-.7-3.6-1.9-4.9l-21.5-22.8c-1.3-1.3-3.1-2.1-4.9-2.1z" fill="#fff"/><path d="M203.433 196.428l-58.1.6c-1.6 0-3-1.3-3-3v-17.2c0-1.6 1.3-3 3-3l58.1.6c1.6 0 2.9 1.3 2.9 3v16c0 1.7-1.3 3-2.9 3z" fill="#FF4645"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.733 104.63c0 3.4-2.7 6-6.1 5.8-3.4-.1-6.1-3-6.1-6.4 0-3.4 2.8-6 6.1-5.8 3.4.2 6.1 3 6.1 6.4zm19.7.9c0 3.3-2.7 5.9-6 5.8-3.3-.1-6-3-6-6.3s2.7-5.9 6-5.8c3.3.1 6 2.9 6 6.3zm13.4 6.498c3.2.2 5.8-2.4 5.8-5.7 0-3.3-2.6-6.1-5.8-6.2-3.3-.2-5.9 2.4-5.9 5.7 0 3.3 2.7 6.1 5.9 6.2z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M248.733 248.231h84.6v-62c0-22.5-18.3-40.7-40.7-40.7h-3.2c-22.5 0-40.7 18.3-40.7 40.7v62zm70.2-14.3h-56v-47.7c0-14.6 11.9-26.4 26.4-26.4h3.2c14.6 0 26.4 11.9 26.4 26.4v47.7z" fill="#DEB700"/><path d="M340.533 206.43s-16.3-2.7-17.3-2.7l-78.6 1.1c-7 .1-13.7 6.5-13.7 13.1v58.6c0 4.7 2.9 8.5 7 10.1 1.5.6 3.1.9 4.8.9l12.5 2.3 7.6-3.7 60.4-4.3c6.2-.4 11.2-5.8 11.2-11.9v-43.3l6.1-20.2z" fill="#DEB700"/><path d="M337.633 284.332l-79.6 5.7c-7 .5-12.7-4.4-12.7-11v-59.6c0-6.6 5.7-12 12.7-12.1l79.6-1.1c6.2-.1 11.2 4.8 11.2 10.9v55.4c-.1 6-5 11.3-11.2 11.8z" fill="#FBC900"/><path d="M313.033 236.931c0-6.3-5.2-11.4-11.7-11.4-6.7 0-12.3 5.4-12.3 12 0 5 3.2 9.1 7.6 10.7v15.5c0 2.5 2.1 4.4 4.7 4.2 2.6-.2 4.6-2.5 4.6-4.9v-15.1c4.3-2.1 7.1-6.3 7.1-11z" fill="#00236B"/><path d="M308.333 236.93c0-5.5-4-10.1-9.3-11.2-5.6 1.1-10 6-10 11.8 0 5 3.2 9.1 7.6 10.7v15.5c0 1.5.8 2.8 2 3.5 1.6-.9 2.6-2.5 2.6-4.3v-15.1c4.2-2 7.1-6.2 7.1-10.9z" fill="#18123D"/><path d="M21.733 41.629a2 2 0 0 0-4 0h4zm-4 8.2a2 2 0 1 0 4 0h-4zm4 17.198a2 2 0 0 0-4 0h4zm-4 8.9a2 2 0 1 0 4 0h-4zm19.2-15.197a2 2 0 0 0 0-4v4zm-8.3-4a2 2 0 1 0 0 4v-4zm-17.8 4a2 2 0 0 0 0-4v4zm-8.3-4a2 2 0 1 0 0 4v-4zm15.2-15.101v8.2h4v-8.2h-4zm0 25.398v8.9h4v-8.9h-4zm19.2-10.297h-8.3v4h8.3v-4zm-26.1 0h-8.3v4h8.3v-4zm284.2 259.098a2 2 0 0 0-4 0h4zm-4 6.2a2 2 0 1 0 4 0h-4zm4 13.1a2 2 0 0 0-4 0h4zm-4 6.8a2 2 0 1 0 4 0h-4zm15-11.1a2 2 0 0 0 0-4v4zm-6.2-4a2 2 0 0 0 0 4v-4zm-13.6 4a2 2 0 0 0 0-4v4zm-6.3-4a2 2 0 0 0 0 4v-4zm11.1-11v6.2h4v-6.2h-4zm0 19.3v6.8h4v-6.8h-4zm15-8.3h-6.2v4h6.2v-4zm-19.8 0h-6.3v4h6.3v-4z" fill="#2EE5C0"/><path clip-rule="evenodd" d="M15.233 326.328c7.18 0 13-5.82 13-13s-5.82-13-13-13-13 5.82-13 13 5.82 13 13 13z" stroke="#2EE5C0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28.233 311.328a2 2 0 0 0 0 4v-4zm35.2 2h2a2 2 0 0 0-2-2v2zm-2 12.2a2 2 0 1 0 4 0h-4zm-17.1 0a2 2 0 1 0 4 0h-4zm4-12.2a2 2 0 0 0-4 0h4zm-20.1 2h35.2v-4h-35.2v4zm33.2-2v12.2h4v-12.2h-4zm-13.1 12.2v-12.2h-4v12.2h4z" fill="#2EE5C0"/></svg>
|
@@ -16,16 +16,18 @@ export default function EmptyState({image, title, description, actions, size}) {
|
|
16
16
|
return (
|
17
17
|
<div className={block({size})}>
|
18
18
|
<div className={block('wrapper', {size})}>
|
19
|
-
{image
|
20
|
-
image
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
19
|
+
<div className={block('image')}>
|
20
|
+
{image ? (
|
21
|
+
image
|
22
|
+
) : (
|
23
|
+
<Icon
|
24
|
+
viewBox="0 0 383 396"
|
25
|
+
name="emptyState"
|
26
|
+
width={sizes[size]}
|
27
|
+
height={sizes[size]}
|
28
|
+
/>
|
29
|
+
)}
|
30
|
+
</div>
|
29
31
|
|
30
32
|
<div className={block('title', {size})}>{title}</div>
|
31
33
|
<div className={block('description')}>{description}</div>
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import {useEffect, useState} from 'react';
|
2
|
+
import cn from 'bem-cn-lite';
|
3
|
+
import {useThemeValue} from '@yandex-cloud/uikit';
|
4
|
+
|
5
|
+
export interface IllustrationProps {
|
6
|
+
name: string;
|
7
|
+
className?: string;
|
8
|
+
}
|
9
|
+
|
10
|
+
type IllustrationStore = Record<string, Record<string, () => Promise<{default: any}>>>;
|
11
|
+
|
12
|
+
const store: IllustrationStore = {
|
13
|
+
light: {
|
14
|
+
403: () => import('../../assets/illustrations/light/403.svg'),
|
15
|
+
},
|
16
|
+
dark: {
|
17
|
+
403: () => import('../../assets/illustrations/dark/403.svg'),
|
18
|
+
},
|
19
|
+
};
|
20
|
+
|
21
|
+
const b = cn('kv-illustration');
|
22
|
+
|
23
|
+
export const Illustration = ({name, className, ...props}: IllustrationProps) => {
|
24
|
+
const theme = useThemeValue();
|
25
|
+
const [src, setSrc] = useState('');
|
26
|
+
const srcGetter = store[theme] && store[theme][name];
|
27
|
+
|
28
|
+
useEffect(() => {
|
29
|
+
if (typeof srcGetter === 'function') {
|
30
|
+
srcGetter()
|
31
|
+
.then((svg) => setSrc(svg.default))
|
32
|
+
.catch((e) => {
|
33
|
+
console.error(e);
|
34
|
+
setSrc('');
|
35
|
+
});
|
36
|
+
}
|
37
|
+
}, [srcGetter]);
|
38
|
+
|
39
|
+
return (
|
40
|
+
<img
|
41
|
+
alt={name}
|
42
|
+
src={src}
|
43
|
+
className={b(null, className)}
|
44
|
+
{...props}
|
45
|
+
/>
|
46
|
+
);
|
47
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './Illustration';
|
@@ -4,6 +4,9 @@ import cn from 'bem-cn-lite';
|
|
4
4
|
import {useLocation} from 'react-router';
|
5
5
|
import qs from 'qs';
|
6
6
|
|
7
|
+
import EmptyState from '../../components/EmptyState/EmptyState';
|
8
|
+
import {Illustration} from '../../components/Illustration';
|
9
|
+
|
7
10
|
import ObjectSummary from './ObjectSummary/ObjectSummary';
|
8
11
|
import {setHeader} from '../../store/reducers/header';
|
9
12
|
import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
|
@@ -53,6 +56,9 @@ function Tenant(props: TenantProps) {
|
|
53
56
|
(state: any) => state.schema,
|
54
57
|
);
|
55
58
|
|
59
|
+
const {data: {status: tenantStatus = 200} = {}} = useSelector((state: any) => state.tenant);
|
60
|
+
const {error: {status: schemaStatus = 200} = {}} = useSelector((state: any) => state.schema);
|
61
|
+
|
56
62
|
const dispatch = useDispatch();
|
57
63
|
|
58
64
|
const location = useLocation();
|
@@ -111,29 +117,39 @@ function Tenant(props: TenantProps) {
|
|
111
117
|
dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
|
112
118
|
};
|
113
119
|
|
120
|
+
const showBlockingError = tenantStatus === 403 || schemaStatus === 403;
|
121
|
+
|
114
122
|
return (
|
115
123
|
<div className={b()}>
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
minSize={[36, 200]}
|
122
|
-
onSplitStartDragAdditional={onSplitStartDragAdditional}
|
123
|
-
>
|
124
|
-
<ObjectSummary
|
125
|
-
type={currentPathType}
|
126
|
-
onCollapseSummary={onCollapseSummaryHandler}
|
127
|
-
onExpandSummary={onExpandSummaryHandler}
|
128
|
-
isCollapsed={summaryVisibilityState.collapsed}
|
129
|
-
additionalTenantInfo={props.additionalTenantInfo}
|
130
|
-
/>
|
131
|
-
<ObjectGeneral
|
132
|
-
type={currentPathType}
|
133
|
-
additionalTenantInfo={props.additionalTenantInfo}
|
134
|
-
additionalNodesInfo={props.additionalNodesInfo}
|
124
|
+
{showBlockingError ? (
|
125
|
+
<EmptyState
|
126
|
+
image={<Illustration name="403" />}
|
127
|
+
title="Access denied"
|
128
|
+
description="You don’t have the necessary roles to view this page."
|
135
129
|
/>
|
136
|
-
|
130
|
+
) : (
|
131
|
+
<SplitPane
|
132
|
+
defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
|
133
|
+
defaultSizes={[25, 75]}
|
134
|
+
triggerCollapse={summaryVisibilityState.triggerCollapse}
|
135
|
+
triggerExpand={summaryVisibilityState.triggerExpand}
|
136
|
+
minSize={[36, 200]}
|
137
|
+
onSplitStartDragAdditional={onSplitStartDragAdditional}
|
138
|
+
>
|
139
|
+
<ObjectSummary
|
140
|
+
type={currentPathType}
|
141
|
+
onCollapseSummary={onCollapseSummaryHandler}
|
142
|
+
onExpandSummary={onExpandSummaryHandler}
|
143
|
+
isCollapsed={summaryVisibilityState.collapsed}
|
144
|
+
additionalTenantInfo={props.additionalTenantInfo}
|
145
|
+
/>
|
146
|
+
<ObjectGeneral
|
147
|
+
type={currentPathType}
|
148
|
+
additionalTenantInfo={props.additionalTenantInfo}
|
149
|
+
additionalNodesInfo={props.additionalNodesInfo}
|
150
|
+
/>
|
151
|
+
</SplitPane>
|
152
|
+
)}
|
137
153
|
</div>
|
138
154
|
);
|
139
155
|
}
|