@scality/core-ui 0.132.0 → 0.134.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.
- package/dist/components/UnsuccessfulResult.component.d.ts +5 -0
- package/dist/components/UnsuccessfulResult.component.d.ts.map +1 -1
- package/dist/components/UnsuccessfulResult.component.js +1 -1
- package/dist/components/icon/Icon.component.d.ts +13 -1
- package/dist/components/icon/Icon.component.d.ts.map +1 -1
- package/dist/components/icon/Icon.component.js +11 -2
- package/dist/components/inputv2/inputv2.d.ts +2 -2
- package/dist/components/tablev2/TableCommon.d.ts.map +1 -1
- package/dist/components/tablev2/TableCommon.js +7 -2
- package/dist/components/toast/useMutationsHandler.d.ts +2 -1
- package/dist/components/toast/useMutationsHandler.d.ts.map +1 -1
- package/dist/components/toast/useMutationsHandler.js +13 -8
- package/dist/style/theme.js +5 -5
- package/package.json +1 -1
- package/src/lib/components/UnsuccessfulResult.component.tsx +1 -1
- package/src/lib/components/icon/Icon.component.tsx +46 -2
- package/src/lib/components/tablev2/TableCommon.tsx +29 -14
- package/src/lib/components/toast/useMutationsHandler.ts +6 -1
- package/src/lib/style/theme.ts +5 -5
- package/stories/icon.stories.tsx +11 -8
- package/stories/icons.mdx +91 -87
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TableHeightKeyType, TableLocalType } from './tablev2/TableUtils';
|
|
3
|
+
export declare const NoResult: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BordersProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
|
|
4
|
+
gap?: string | number | undefined;
|
|
5
|
+
} & {
|
|
6
|
+
height: number | string;
|
|
7
|
+
}, never>;
|
|
3
8
|
export type UnsuccessfulResultProps = {
|
|
4
9
|
name?: {
|
|
5
10
|
en: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnsuccessfulResult.component.d.ts","sourceRoot":"","sources":["../../src/lib/components/UnsuccessfulResult.component.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,kBAAkB,EAClB,cAAc,EAGf,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"UnsuccessfulResult.component.d.ts","sourceRoot":"","sources":["../../src/lib/components/UnsuccessfulResult.component.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,kBAAkB,EAClB,cAAc,EAGf,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,QAAQ;;;YAAyB,MAAM,GAAG,MAAM;SAO5D,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE;QACL,EAAE,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QACzC,EAAE,CAAC,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;KAC3C,CAAC;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;CACnD,GAAG,CACA;IAAE,SAAS,EAAE,kBAAkB,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GACtD;IAAE,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,gBAehE,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { tableRowHeight, translatedMessages, } from './tablev2/TableUtils';
|
|
|
6
6
|
import { Text } from './text/Text.component';
|
|
7
7
|
import { Box } from './box/Box';
|
|
8
8
|
import { spacing } from '../spacing';
|
|
9
|
-
const NoResult = styled(Box) `
|
|
9
|
+
export const NoResult = styled(Box) `
|
|
10
10
|
display: flex;
|
|
11
11
|
justify-content: center;
|
|
12
12
|
align-items: center;
|
|
@@ -124,7 +124,19 @@ export declare const iconTable: {
|
|
|
124
124
|
DarkMode: string;
|
|
125
125
|
News: string;
|
|
126
126
|
};
|
|
127
|
-
export
|
|
127
|
+
export declare const customIcons: {
|
|
128
|
+
'Remote-user': ({ ariaLabel, color, size }: {
|
|
129
|
+
ariaLabel: any;
|
|
130
|
+
color: any;
|
|
131
|
+
size: any;
|
|
132
|
+
}) => JSX.Element;
|
|
133
|
+
'Remote-group': ({ ariaLabel, color, size }: {
|
|
134
|
+
ariaLabel: any;
|
|
135
|
+
color: any;
|
|
136
|
+
size: any;
|
|
137
|
+
}) => JSX.Element;
|
|
138
|
+
};
|
|
139
|
+
export type IconName = keyof typeof iconTable | keyof typeof customIcons;
|
|
128
140
|
export type IconColor = keyof CoreUITheme;
|
|
129
141
|
type Props = {
|
|
130
142
|
name: IconName;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAqCvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAuEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState, } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { Loader } from '../loader/Loader.component';
|
|
@@ -127,6 +127,10 @@ export const iconTable = {
|
|
|
127
127
|
DarkMode: 'fas faMoon',
|
|
128
128
|
News: 'fas faBullhorn',
|
|
129
129
|
};
|
|
130
|
+
export const customIcons = {
|
|
131
|
+
'Remote-user': ({ ariaLabel, color, size }) => (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: color || 'currentcolor' }), _jsx("path", { d: "M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z", fill: color || 'currentcolor' })] })),
|
|
132
|
+
'Remote-group': ({ ariaLabel, color, size }) => (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: color || 'currentcolor' }), _jsx("path", { d: "M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z", fill: color || 'currentcolor' })] })),
|
|
133
|
+
};
|
|
130
134
|
const IconStyled = styled(FontAwesomeIcon) `
|
|
131
135
|
${(props) => {
|
|
132
136
|
const theme = props.theme;
|
|
@@ -182,12 +186,17 @@ export const IconWrapper = styled.div `
|
|
|
182
186
|
border-radius: 100%;
|
|
183
187
|
`;
|
|
184
188
|
function NonWrappedIcon({ name, size = '1x', color = undefined, ariaLabel = '', ...rest }) {
|
|
185
|
-
const iconInfo = iconTable[name];
|
|
189
|
+
const iconInfo = iconTable[name] || customIcons[name];
|
|
186
190
|
if (!iconInfo)
|
|
187
191
|
throw new Error(`${name}: is not a valid icon.`);
|
|
188
192
|
const { data, status } = useQuery({
|
|
189
193
|
queryKey: ['icon', name],
|
|
190
194
|
queryFn: async () => {
|
|
195
|
+
if (customIcons[name]) {
|
|
196
|
+
return {
|
|
197
|
+
default: customIcons[name],
|
|
198
|
+
};
|
|
199
|
+
}
|
|
191
200
|
const [iconType, iconClass] = iconInfo.split(' ');
|
|
192
201
|
try {
|
|
193
202
|
const fontAwesomeType = iconType === 'far'
|
|
@@ -12,8 +12,8 @@ export type InputProps = {
|
|
|
12
12
|
export declare const Input: import("react").ForwardRefExoticComponent<{
|
|
13
13
|
error?: string | undefined;
|
|
14
14
|
id: string;
|
|
15
|
-
leftIcon?:
|
|
16
|
-
rightIcon?:
|
|
15
|
+
leftIcon?: IconName | undefined;
|
|
16
|
+
rightIcon?: IconName | undefined;
|
|
17
17
|
size?: InputSize | undefined;
|
|
18
18
|
} & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
19
19
|
//# sourceMappingURL=inputv2.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,KAAK,mBAAmB,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,kBAAkB,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,eAAe,kNA8C3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAwB7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,CACjB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAClC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CACjD,CAAC;CACH,CAAC;AACF,wBAAgB,SAAS,CACvB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,KAAK,mBAAmB,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,kBAAkB,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,eAAe,kNA8C3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAwB7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,CACjB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAClC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CACjD,CAAC;CACH,CAAC;AACF,wBAAgB,SAAS,CACvB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,sBAyEzE"}
|
|
@@ -51,13 +51,18 @@ export function TableRows({ locale, children, customItemKey, RenderRow }) {
|
|
|
51
51
|
}
|
|
52
52
|
if (status === 'success' || status === undefined) {
|
|
53
53
|
if (typeof children === 'function') {
|
|
54
|
-
|
|
54
|
+
if (rows.length) {
|
|
55
|
+
return children(_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }));
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
return children(_jsx(UnsuccessfulResult, { rowHeight: rowHeight, name: entityName, status: "noResult" }));
|
|
59
|
+
}
|
|
55
60
|
}
|
|
56
61
|
else if (rows.length) {
|
|
57
62
|
return (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, itemKey: itemKey, rowHeight: rowHeight, RenderRow: RenderRow }));
|
|
58
63
|
}
|
|
59
64
|
else {
|
|
60
|
-
return _jsx(UnsuccessfulResult, { name: entityName, status: "noResult" });
|
|
65
|
+
return (_jsx(UnsuccessfulResult, { rowHeight: rowHeight, name: entityName, status: "noResult" }));
|
|
61
66
|
}
|
|
62
67
|
}
|
|
63
68
|
return null;
|
|
@@ -13,7 +13,8 @@ declare type GetDescriptionBuilder<T> = T extends MutationConfig<MinimalMutation
|
|
|
13
13
|
declare type MutationsResults<T extends unknown[]> = T extends [] ? [] : T extends [infer Head, ...infer Tail] ? [GetResults<Head>, ...MutationsResults<Tail>] : T extends [infer Head] ? [GetResults<Head>] : unknown[] extends T ? T : never;
|
|
14
14
|
declare enum DescriptionBuilderStatus {
|
|
15
15
|
Success = "success",
|
|
16
|
-
Error = "error"
|
|
16
|
+
Error = "error",
|
|
17
|
+
Idle = "idle"
|
|
17
18
|
}
|
|
18
19
|
type DescriptionBuilder<Data = unknown, Error = unknown> = {
|
|
19
20
|
error?: Error;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMutationsHandler.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/useMutationsHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAY,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,QAAQ,EAAE,CAAC,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,OAAO,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,cAAc,CACnD,qBAAqB,CAAC,MAAM,KAAK,EAAE,MAAM,MAAM,CAAC,CACjD,GACG,cAAc,CAAC,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,GACpD,CAAC,SAAS,qBAAqB,CAAC,MAAM,KAAK,EAAE,MAAM,MAAM,CAAC,GAC1D,cAAc,CAAC,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,GACpD,cAAc,CAAC,qBAAqB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AAE5D,OAAO,MAAM,qBAAqB,CAAC,CAAC,IAAI,CAAC,SAAS,cAAc,CAC9D,qBAAqB,CAAC,MAAM,KAAK,EAAE,MAAM,MAAM,CAAC,CACjD,GACG,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,GACjC,CAAC,SAAS,cAAc,CAAC,kBAAkB,CAAC,MAAM,KAAK,EAAE,MAAM,MAAM,CAAC,CAAC,GACvE,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,GACjC,CAAC,SAAS,qBAAqB,CAAC,MAAM,KAAK,EAAE,MAAM,MAAM,CAAC,GAC1D,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,GACjC,KAAK,CAAC;AAEV;;GAEG;AACH,OAAO,MAAM,gBAAgB,CAAC,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,GAC7D,EAAE,GACF,CAAC,SAAS,CAAC,MAAM,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,GACrC,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAC7C,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,GACtB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,GAClB,OAAO,EAAE,SAAS,CAAC,GACnB,CAAC,GACD,KAAK,CAAC;AAEV,aAAK,wBAAwB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;
|
|
1
|
+
{"version":3,"file":"useMutationsHandler.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/useMutationsHandler.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ var DescriptionBuilderStatus;
|
|
|
4
4
|
(function (DescriptionBuilderStatus) {
|
|
5
5
|
DescriptionBuilderStatus["Success"] = "success";
|
|
6
6
|
DescriptionBuilderStatus["Error"] = "error";
|
|
7
|
+
DescriptionBuilderStatus["Idle"] = "idle";
|
|
7
8
|
})(DescriptionBuilderStatus || (DescriptionBuilderStatus = {}));
|
|
8
9
|
export const useMutationsHandler = ({ mainMutation, dependantMutations, messageDescriptionBuilder, toastProps, ...rest }) => {
|
|
9
10
|
const { showToast } = useToast();
|
|
@@ -12,7 +13,7 @@ export const useMutationsHandler = ({ mainMutation, dependantMutations, messageD
|
|
|
12
13
|
...(dependantMutations ? dependantMutations : []),
|
|
13
14
|
];
|
|
14
15
|
const handleMutationsCompletion = useCallback(async () => {
|
|
15
|
-
var _a, _b, _c, _d, _e, _f;
|
|
16
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
16
17
|
const results = await Promise.all(mutations.map((m) => m.mutation));
|
|
17
18
|
const loadingMutations = mutations.filter((_, index) => results[index].isLoading);
|
|
18
19
|
const successMutations = mutations.filter((_, index) => results[index].isSuccess);
|
|
@@ -21,24 +22,28 @@ export const useMutationsHandler = ({ mainMutation, dependantMutations, messageD
|
|
|
21
22
|
data: (_a = mainMutation.mutation) === null || _a === void 0 ? void 0 : _a.data,
|
|
22
23
|
status: ((_b = mainMutation.mutation) === null || _b === void 0 ? void 0 : _b.isSuccess)
|
|
23
24
|
? DescriptionBuilderStatus.Success
|
|
24
|
-
:
|
|
25
|
+
: ((_c = mainMutation.mutation) === null || _c === void 0 ? void 0 : _c.isIdle)
|
|
26
|
+
? DescriptionBuilderStatus.Idle
|
|
27
|
+
: DescriptionBuilderStatus.Error,
|
|
25
28
|
name: mainMutation.name,
|
|
26
29
|
};
|
|
27
30
|
const descriptionBuilders = [
|
|
28
31
|
mainMutationDesc,
|
|
29
32
|
...((dependantMutations === null || dependantMutations === void 0 ? void 0 : dependantMutations.map(({ mutation, name }) => ({
|
|
30
33
|
data: mutation.data,
|
|
31
|
-
error: mutation.isError
|
|
34
|
+
error: mutation.isError ? mutation.error : null,
|
|
32
35
|
status: mutation.isSuccess
|
|
33
36
|
? DescriptionBuilderStatus.Success
|
|
34
|
-
:
|
|
37
|
+
: mutation.isIdle
|
|
38
|
+
? DescriptionBuilderStatus.Idle
|
|
39
|
+
: DescriptionBuilderStatus.Error,
|
|
35
40
|
name,
|
|
36
41
|
}))) || []),
|
|
37
42
|
];
|
|
38
43
|
if (loadingMutations.length === 0) {
|
|
39
44
|
if (errorMutations.length > 0) {
|
|
40
|
-
if ((
|
|
41
|
-
'onMainMutationSuccess' in rest && ((
|
|
45
|
+
if ((_d = mainMutation.mutation) === null || _d === void 0 ? void 0 : _d.isSuccess) {
|
|
46
|
+
'onMainMutationSuccess' in rest && ((_e = rest === null || rest === void 0 ? void 0 : rest.onMainMutationSuccess) === null || _e === void 0 ? void 0 : _e.call(rest));
|
|
42
47
|
}
|
|
43
48
|
showToast({
|
|
44
49
|
open: true,
|
|
@@ -49,9 +54,9 @@ export const useMutationsHandler = ({ mainMutation, dependantMutations, messageD
|
|
|
49
54
|
return;
|
|
50
55
|
}
|
|
51
56
|
else if (successMutations.length > 0) {
|
|
52
|
-
'onMainMutationSuccess' in rest && ((
|
|
57
|
+
'onMainMutationSuccess' in rest && ((_f = rest === null || rest === void 0 ? void 0 : rest.onMainMutationSuccess) === null || _f === void 0 ? void 0 : _f.call(rest));
|
|
53
58
|
if (successMutations.length === mutations.length) {
|
|
54
|
-
'onAllMutationsSuccess' in rest && ((
|
|
59
|
+
'onAllMutationsSuccess' in rest && ((_g = rest === null || rest === void 0 ? void 0 : rest.onAllMutationsSuccess) === null || _g === void 0 ? void 0 : _g.call(rest));
|
|
55
60
|
}
|
|
56
61
|
showToast({
|
|
57
62
|
open: true,
|
package/dist/style/theme.js
CHANGED
|
@@ -96,13 +96,13 @@ export const coreUIAvailableThemes = {
|
|
|
96
96
|
border: '#313131',
|
|
97
97
|
buttonPrimary: '#2E67AB',
|
|
98
98
|
buttonSecondary: '#434343',
|
|
99
|
-
buttonDelete: '#
|
|
99
|
+
buttonDelete: '#3D0808',
|
|
100
100
|
infoPrimary: '#76828F',
|
|
101
101
|
infoSecondary: '#2C3238',
|
|
102
|
-
backgroundLevel1: '#
|
|
103
|
-
backgroundLevel2: '#
|
|
104
|
-
backgroundLevel3: '#
|
|
105
|
-
backgroundLevel4: '#
|
|
102
|
+
backgroundLevel1: '#120F0F',
|
|
103
|
+
backgroundLevel2: '#272020',
|
|
104
|
+
backgroundLevel3: '#201B1A',
|
|
105
|
+
backgroundLevel4: '#191515',
|
|
106
106
|
textPrimary: '#EAEAEA',
|
|
107
107
|
textSecondary: '#A4ACB4',
|
|
108
108
|
textTertiary: '#DFDFDF',
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@ import { Text } from './text/Text.component';
|
|
|
11
11
|
import { Box } from './box/Box';
|
|
12
12
|
import { spacing } from '../spacing';
|
|
13
13
|
|
|
14
|
-
const NoResult = styled(Box)<{ height: number | string }>`
|
|
14
|
+
export const NoResult = styled(Box)<{ height: number | string }>`
|
|
15
15
|
display: flex;
|
|
16
16
|
justify-content: center;
|
|
17
17
|
align-items: center;
|
|
@@ -137,6 +137,45 @@ export const iconTable = {
|
|
|
137
137
|
News: 'fas faBullhorn',
|
|
138
138
|
};
|
|
139
139
|
|
|
140
|
+
export const customIcons = {
|
|
141
|
+
'Remote-user': ({ ariaLabel, color, size }) => (
|
|
142
|
+
<svg
|
|
143
|
+
viewBox="0 0 19 17"
|
|
144
|
+
fill="none"
|
|
145
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
146
|
+
className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
|
|
147
|
+
aria-label={ariaLabel}
|
|
148
|
+
>
|
|
149
|
+
<path
|
|
150
|
+
d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
|
|
151
|
+
fill={color || 'currentcolor'}
|
|
152
|
+
/>
|
|
153
|
+
<path
|
|
154
|
+
d="M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z"
|
|
155
|
+
fill={color || 'currentcolor'}
|
|
156
|
+
/>
|
|
157
|
+
</svg>
|
|
158
|
+
),
|
|
159
|
+
'Remote-group': ({ ariaLabel, color, size }) => (
|
|
160
|
+
<svg
|
|
161
|
+
viewBox="0 0 19 17"
|
|
162
|
+
fill="none"
|
|
163
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
164
|
+
className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
|
|
165
|
+
aria-label={ariaLabel}
|
|
166
|
+
>
|
|
167
|
+
<path
|
|
168
|
+
d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
|
|
169
|
+
fill={color || 'currentcolor'}
|
|
170
|
+
/>
|
|
171
|
+
<path
|
|
172
|
+
d="M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z"
|
|
173
|
+
fill={color || 'currentcolor'}
|
|
174
|
+
/>
|
|
175
|
+
</svg>
|
|
176
|
+
),
|
|
177
|
+
};
|
|
178
|
+
|
|
140
179
|
const IconStyled = styled(FontAwesomeIcon)`
|
|
141
180
|
${(props) => {
|
|
142
181
|
const theme = props.theme;
|
|
@@ -148,7 +187,7 @@ const IconStyled = styled(FontAwesomeIcon)`
|
|
|
148
187
|
}}
|
|
149
188
|
`;
|
|
150
189
|
|
|
151
|
-
export type IconName = keyof typeof iconTable;
|
|
190
|
+
export type IconName = keyof typeof iconTable | keyof typeof customIcons;
|
|
152
191
|
export type IconColor = keyof CoreUITheme;
|
|
153
192
|
type Props = {
|
|
154
193
|
name: IconName;
|
|
@@ -215,12 +254,17 @@ function NonWrappedIcon({
|
|
|
215
254
|
ariaLabel = '',
|
|
216
255
|
...rest
|
|
217
256
|
}: Omit<Props, 'withWrapper'>) {
|
|
218
|
-
const iconInfo = iconTable[name];
|
|
257
|
+
const iconInfo = iconTable[name] || customIcons[name];
|
|
219
258
|
if (!iconInfo) throw new Error(`${name}: is not a valid icon.`);
|
|
220
259
|
|
|
221
260
|
const { data, status } = useQuery({
|
|
222
261
|
queryKey: ['icon', name],
|
|
223
262
|
queryFn: async () => {
|
|
263
|
+
if (customIcons[name]) {
|
|
264
|
+
return {
|
|
265
|
+
default: customIcons[name],
|
|
266
|
+
};
|
|
267
|
+
}
|
|
224
268
|
const [iconType, iconClass] = iconInfo.split(' ');
|
|
225
269
|
try {
|
|
226
270
|
const fontAwesomeType =
|
|
@@ -147,21 +147,30 @@ export function TableRows<
|
|
|
147
147
|
/>
|
|
148
148
|
);
|
|
149
149
|
}
|
|
150
|
-
|
|
151
150
|
if (status === 'success' || status === undefined) {
|
|
152
151
|
if (typeof children === 'function') {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
152
|
+
if (rows.length) {
|
|
153
|
+
return children(
|
|
154
|
+
<VirtualizedRows
|
|
155
|
+
rows={rows}
|
|
156
|
+
listRef={bodyRef}
|
|
157
|
+
itemKey={itemKey}
|
|
158
|
+
rowHeight={rowHeight}
|
|
159
|
+
setHasScrollbar={setHasScrollbar}
|
|
160
|
+
onBottom={onBottom}
|
|
161
|
+
onBottomOffset={onBottomOffset}
|
|
162
|
+
RenderRow={RenderRow}
|
|
163
|
+
/>,
|
|
164
|
+
);
|
|
165
|
+
} else {
|
|
166
|
+
return children(
|
|
167
|
+
<UnsuccessfulResult
|
|
168
|
+
rowHeight={rowHeight}
|
|
169
|
+
name={entityName}
|
|
170
|
+
status="noResult"
|
|
171
|
+
/>,
|
|
172
|
+
);
|
|
173
|
+
}
|
|
165
174
|
} else if (rows.length) {
|
|
166
175
|
return (
|
|
167
176
|
<VirtualizedRows
|
|
@@ -176,7 +185,13 @@ export function TableRows<
|
|
|
176
185
|
/>
|
|
177
186
|
);
|
|
178
187
|
} else {
|
|
179
|
-
return
|
|
188
|
+
return (
|
|
189
|
+
<UnsuccessfulResult
|
|
190
|
+
rowHeight={rowHeight}
|
|
191
|
+
name={entityName}
|
|
192
|
+
status="noResult"
|
|
193
|
+
/>
|
|
194
|
+
);
|
|
180
195
|
}
|
|
181
196
|
}
|
|
182
197
|
|
|
@@ -41,6 +41,7 @@ declare type MutationsResults<T extends unknown[]> = T extends []
|
|
|
41
41
|
enum DescriptionBuilderStatus {
|
|
42
42
|
Success = 'success',
|
|
43
43
|
Error = 'error',
|
|
44
|
+
Idle = 'idle',
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
type DescriptionBuilder<Data = unknown, Error = unknown> = {
|
|
@@ -124,6 +125,8 @@ export const useMutationsHandler = <
|
|
|
124
125
|
data: mainMutation.mutation?.data,
|
|
125
126
|
status: mainMutation.mutation?.isSuccess
|
|
126
127
|
? DescriptionBuilderStatus.Success
|
|
128
|
+
: mainMutation.mutation?.isIdle
|
|
129
|
+
? DescriptionBuilderStatus.Idle
|
|
127
130
|
: DescriptionBuilderStatus.Error,
|
|
128
131
|
name: mainMutation.name,
|
|
129
132
|
} as GetDescriptionBuilder<MainMutationType>;
|
|
@@ -131,9 +134,11 @@ export const useMutationsHandler = <
|
|
|
131
134
|
mainMutationDesc,
|
|
132
135
|
...((dependantMutations?.map(({ mutation, name }) => ({
|
|
133
136
|
data: mutation.data,
|
|
134
|
-
error: mutation.isError
|
|
137
|
+
error: mutation.isError ? mutation.error : null,
|
|
135
138
|
status: mutation.isSuccess
|
|
136
139
|
? DescriptionBuilderStatus.Success
|
|
140
|
+
: mutation.isIdle
|
|
141
|
+
? DescriptionBuilderStatus.Idle
|
|
137
142
|
: DescriptionBuilderStatus.Error,
|
|
138
143
|
name,
|
|
139
144
|
})) as DescriptionBuilders<T>) || ([] as DescriptionBuilders<T>)),
|
package/src/lib/style/theme.ts
CHANGED
|
@@ -125,13 +125,13 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
|
|
|
125
125
|
border: '#313131',
|
|
126
126
|
buttonPrimary: '#2E67AB',
|
|
127
127
|
buttonSecondary: '#434343',
|
|
128
|
-
buttonDelete: '#
|
|
128
|
+
buttonDelete: '#3D0808',
|
|
129
129
|
infoPrimary: '#76828F',
|
|
130
130
|
infoSecondary: '#2C3238',
|
|
131
|
-
backgroundLevel1: '#
|
|
132
|
-
backgroundLevel2: '#
|
|
133
|
-
backgroundLevel3: '#
|
|
134
|
-
backgroundLevel4: '#
|
|
131
|
+
backgroundLevel1: '#120F0F',
|
|
132
|
+
backgroundLevel2: '#272020',
|
|
133
|
+
backgroundLevel3: '#201B1A',
|
|
134
|
+
backgroundLevel4: '#191515',
|
|
135
135
|
textPrimary: '#EAEAEA',
|
|
136
136
|
textSecondary: '#A4ACB4',
|
|
137
137
|
textTertiary: '#DFDFDF',
|
package/stories/icon.stories.tsx
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
Icon,
|
|
4
4
|
iconTable,
|
|
5
5
|
IconName,
|
|
6
|
+
customIcons,
|
|
6
7
|
} from '../src/lib/components/icon/Icon.component';
|
|
7
8
|
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
|
|
8
9
|
|
|
@@ -132,14 +133,16 @@ export const AllIcons = {
|
|
|
132
133
|
<td>Name</td>
|
|
133
134
|
</thead>
|
|
134
135
|
<tbody>
|
|
135
|
-
{(Object.keys(iconTable) as IconName[]).map(
|
|
136
|
-
|
|
137
|
-
<
|
|
138
|
-
<
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
136
|
+
{(Object.keys({ ...iconTable, ...customIcons }) as IconName[]).map(
|
|
137
|
+
(key, index) => (
|
|
138
|
+
<tr key={key}>
|
|
139
|
+
<td style={{ paddingRight: '2rem' }}>
|
|
140
|
+
<Icon key={index} name={key} size={'2x'} />
|
|
141
|
+
</td>
|
|
142
|
+
<td>{key}</td>
|
|
143
|
+
</tr>
|
|
144
|
+
),
|
|
145
|
+
)}
|
|
143
146
|
</tbody>
|
|
144
147
|
</table>
|
|
145
148
|
),
|
package/stories/icons.mdx
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import ImageFile from './pictures/icon-design-system.png';
|
|
2
2
|
import { Meta } from '@storybook/addon-docs';
|
|
3
|
+
import { Icon } from '../src/lib/components/icon/Icon.component';
|
|
4
|
+
import { QueryClientProvider, QueryClient } from 'react-query';
|
|
3
5
|
|
|
4
6
|
<Meta title="Style/Icons" />
|
|
5
7
|
|
|
@@ -19,90 +21,92 @@ When next to a text, the icon and the text should have the same size.
|
|
|
19
21
|
|
|
20
22
|
## Icon set table
|
|
21
23
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
|
|
|
47
|
-
|
|
|
48
|
-
|
|
|
49
|
-
|
|
|
50
|
-
|
|
|
51
|
-
|
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
24
|
+
| Icons | Name | Category | Origin | FontAwesome name | FontAwesome code | Icon Style & Prefix | FA free | Use case |
|
|
25
|
+
| :----------------------------------------------------------------------------------------------------------: | -------------------- | ------------- | ------ | -------------------- | ----------------------------------------------- | ------------------- | ------- | ------------------------------------------------------- |
|
|
26
|
+
| <i className="fas fa-wallet fa-3x" /> | Account | Entities | FA | wallet | `<i className="fas fa-wallet" />` | solid Style (fas) | yes | Hero |
|
|
27
|
+
| <i className="fas fa-network-wired fa-3x" /> | Backend | Entities | FA | network-wired | `<i className="fas fa-network-wired" />` | solid Style (fas) | yes | Hero |
|
|
28
|
+
| <i className="fas fa-tape fa-3x" /> | Tape | Entities | FA | tape | `<i className="fas fa-tape" />` | solid Style (fas) | yes | Hero |
|
|
29
|
+
| <i className="fas fa-server fa-3x" /> | Node-backend | Entities | FA | server | `<i className="fas fa-server" />` | solid Style (fas) | yes | Hero |
|
|
30
|
+
| <i className="fas fa-hdd fa-3x" /> | Volume-backend | Entities | FA | hdd | `<i className="fas fa-hdd" />` | solid Style (fas) | yes | Hero |
|
|
31
|
+
| <i className="fas fa-database fa-3x" /> | Node-ptf | Entities | FA | database | `<i className="fas fa-database" />` | solid Style (fas) | yes | Hero |
|
|
32
|
+
| <i className="fas fa-compact-disc fa-3x" /> | Volume-ptf | Entities | FA | compact-disc | `<i className="fas fa-compact-disc" />` | solid Style (fas) | yes | Hero |
|
|
33
|
+
| <i className="fas fa-project-diagram fa-3x" /> | Network | Entities | FA | project-diagram | `<i className="fas fa-project-diagram" />` | solid Style (fas) | yes | Hero |
|
|
34
|
+
| <i className="fas fa-glass-whiskey fa-3x" /> | Bucket | Entities | FA | glass-whiskey | `<i className="fas fa-glass-whiskey" />` | solid Style (fas) | yes | Hero |
|
|
35
|
+
| <i className="fas fa-cloud fa-3x" /> | Cloud-backend | Entities | FA | cloud | `<i className="fas fa-cloud" />` | solid Style (fas) | yes | Hero |
|
|
36
|
+
| <i className="fas fa-warehouse fa-3x" /> | Datacenter | Entities | FA | warehouse | `<i className="fas fa-warehouse" />` | solid Style (fas) | yes | Hero |
|
|
37
|
+
| <i className="fas fa-user-cog fa-3x" /> | User | Menu | FA | user-cog | `<i className="fas fa-user-cog" />` | solid Style (fas) | yes | Top navbar |
|
|
38
|
+
| <i className="fas fa-bell fa-3x" /> | Alert | Menu | FA | bell | `<i className="fas fa-bell" />` | solid Style (fas) | yes | |
|
|
39
|
+
| <i className="fas fa-bars fa-3x" /> | Lat-menu | Menu | FA | bars | `<i className="fas fa-bars" />` | solid Style (fas) | yes | Expanded version of lat navbar |
|
|
40
|
+
| <i className="fas fa-desktop fa-3x" /> | Dashboard | Menu | FA | desktop | `<i className="fas fa-desktop" />` | solid Style (fas) | yes | |
|
|
41
|
+
| <i className="fas fa-stopwatch fa-3x" /> | Expiration | Workflow | FA | stopwatch | `<i className="fas fa-stopwatch" />` | solid Style (fas) | yes | |
|
|
42
|
+
| <i className="fas fa-coins fa-3x" /> | Replication | Workflow | FA | coins | `<i className="fas fa-coins" />` | solid Style (fas) | yes | |
|
|
43
|
+
| <i className="fas fa-rocket fa-3x" /> | Transition | Workflow | FA | rocket | `<i className="fas fa-rocket" />` | solid Style (fas) | yes | |
|
|
44
|
+
| <i className="fas fa-reply fa-3x" /> | Discovery | Workflow | FA | reply | `<i className="fas fa-reply" />` | solid Style (fas) | yes | |
|
|
45
|
+
| <i className="fas fa-chart-line fa-3x" /> | Metrics | Action icon | FA | chart-line | `<i className="fas fa-chart-line" />` | solid Style (fas) | yes | Last column of Tables |
|
|
46
|
+
| <i className="far fa-file-alt fa-3x" /> | Logs | Action icon | FA | file-alt | `<i className="far fa-file-alt" />` | regular Style (far) | yes | |
|
|
47
|
+
| <i className="fas fa-edit fa-3x" /> | Edit | Action icon | FA | edit | `<i className="fas fa-edit" />` | solid Style (fas) | yes | Field editable |
|
|
48
|
+
| <i className="fas fa-plus fa-3x" /> | Create-add | Button-action | FA | plus | `<i className="fas fa-plus" />` | solid Style (fas) | yes | New entity creation |
|
|
49
|
+
| <i className="fas fa-trash fa-3x" /> | Delete | Button-action | FA | trash | `<i className="fas fa-trash" />` | solid Style (fas) | yes | Entity deletion |
|
|
50
|
+
| <i className="fas fa-save fa-3x" /> | Save | Button-action | FA | save | `<i className="fas fa-save" />` | solid Style (fas) | yes | Save changes on an entity |
|
|
51
|
+
| <i className="fas fa-external-link-alt fa-3x" /> | External-link | Button-action | FA | external-link-alt | `<i className="fas fa-external-link-alt" />` | solid Style (fas) | yes | Open an external link |
|
|
52
|
+
| <i className="fas fa-times fa-3x" /> | Close | Button-action | FA | times | `<i className="fas fa-times" />` | solid Style (fas) | yes | Close a window/modal |
|
|
53
|
+
| <i className="fas fa-caret-down fa-3x" /> | Dropdown-down | Button-action | FA | caret-down | `<i className="fas fa-caret-down" />` | solid Style (fas) | yes | Expand a drop-down |
|
|
54
|
+
| <i className="fas fa-caret-up fa-3x" /> | Dropdown-up | Button-action | FA | caret-up | `<i className="fas fa-caret-up" />` | solid Style (fas) | yes | Dropdown expanded |
|
|
55
|
+
| <i className="fas fa-search fa-3x" /> | Search | Button-action | FA | search | `<i className="fas fa-search" />` | solid Style (fas) | yes | Search bar |
|
|
56
|
+
| <i className="fas fa-ellipsis-v fa-3x" /> | More | Button-action | FA | ellipsis-v | `<i className="fas fa-ellipsis-v" />` | solid Style (fas) | yes | End of tables (not enough space to display all actions) |
|
|
57
|
+
| <i className="fas fa-question-circle fa-3x" /> | Info | Button-action | FA | question-circle | `<i className="fas fa-question-circle" />` | solid Style (fas) | yes | Display tooltip info AND "About" (top menu) |
|
|
58
|
+
| <i className="fas fa-sync fa-3x" /> | Sync | Button-action | FA | sync | `<i className="fas fa-sync" />` | solid Style (fas) | yes | Refresh the metrics |
|
|
59
|
+
| <i className="fas fa-file-export fa-3x" /> | Export | Button-action | FA | file-export | `<i className="fas fa-file-export" />` | solid Style (fas) | yes | Export the data in predefined format |
|
|
60
|
+
| <i className="far fa-clone fa-3x" /> | Copy | Button-action | FA | clone | `<i className="far fa-clone" />` | regular Style (far) | yes | Small icon next to a field that can be copied |
|
|
61
|
+
| <i className="fas fa-file-upload fa-3x" /> | Upload | Button-action | FA | file-upload | `<i className="fas fa-file-upload" />` | solid Style (fas) | yes | Upload object |
|
|
62
|
+
| <i className="fas fa-plus-square fa-3x" /> | Add-plus | Button-action | FA | plus-square | `<i className="fas fa-plus-square" />` | solid Style (fas) | yes | Add an item in a list |
|
|
63
|
+
| <i className="fas fa-minus-square fa-3x" /> | Remove-minus | Button-action | FA | minus-square | `<i className="fas fa-minus-square" />` | solid Style (fas) | yes | Remove an item in a list |
|
|
64
|
+
| <i className="fas fa-sort fa-3x" /> | Sort | Table | FA | sort | `<i className="fas fa-sort" />` | solid Style (fas) | yes | Sort |
|
|
65
|
+
| <i className="fas fa-sort-up fa-3x" /> | Sort-up | Table | FA | sort-up | `<i className="fas fa-sort-up" />` | solid Style (fas) | yes | Sort |
|
|
66
|
+
| <i className="fas fa-sort-down fa-3x" /> | Sort-down | Table | FA | sort-down | `<i className="fas fa-sort-down" />` | solid Style (fas) | yes | Sort |
|
|
67
|
+
| <i className="fas fa-calendar-week fa-3x" /> | Calendar | Pill | FA | calendar-week | `<i className="fas fa-calendar-week" />` | solid Style (fas) | yes | Metric over a period |
|
|
68
|
+
| <i className="fas fa-arrow-up fa-3x" /> | Arrow-up | Pill | FA | arrow-up | `<i className="fas fa-arrow-up" />` | solid Style (fas) | yes | Show an increase in trend |
|
|
69
|
+
| <i className="fas fa-arrow-down fa-3x" /> | Arrow-down | Pill | FA | arrow-down | `<i className="fas fa-arrow-down" />` | solid Style (fas) | yes | Show a decrease in trend |
|
|
70
|
+
| <i className="far fa-folder fa-3x" /> | Folder | Browsing | FA | folder | `<i className="far fa-folder" />` | regular Style (far) | yes | Browsing |
|
|
71
|
+
| <i className="far fa-file fa-3x" /> | File | Browsing | FA | file | `<i className="far fa-file" />` | regular Style (far) | yes | Browsing |
|
|
72
|
+
| <i className="fas fa-ban fa-3x" /> | Deletion-marker | Browsing | FA | ban | `<i className="fas fa-ban" />` | solid Style (fas) | yes | Browsing - deletion markers on objects |
|
|
73
|
+
| <i className="fas fa-info-circle fa-3x" /> | Info-circle | Status | FA | info-circle | `<i className="fas fa-info-circle" />` | solid Style (fas) | yes | Grey empty state-status (charts, tables) |
|
|
74
|
+
| <i className="fas fa-exclamation-triangle fa-3x" /> | Exclamation-triangle | Status | FA | exclamation-triangle | `<i className="fas fa-exclamation-triangle" />` | solid Style (fas) | yes | Yellow warning status (alerts list) |
|
|
75
|
+
| <i className="fas fa-exclamation-circle fa-3x" /> | Exclamation-circle | Status | FA | exclamation-circle | `<i className="fas fa-exclamation-circle" />` | solid Style (fas) | yes | Red critical alerts |
|
|
76
|
+
| <i className="fas fa-check fa-3x" /> | Check | Status | FA | check | `<i className="fas fa-check" />` | solid Style (fas) | yes | Healthy status AND successful operation |
|
|
77
|
+
| <i className="fas fa-shield-alt fa-3x" /> | Protected | Status | FA | shield-alt | `<i className="fas fa-shield-alt" />` | solid Style (fas) | yes | Extra protection status |
|
|
78
|
+
| <i className="fas fa-bars fa-3x" /> | Bars | Menu | FA | bars | `<i className="fas fa-bars" />` | solid Style (fas) | yes | Expand/collapse the lat navbar |
|
|
79
|
+
| <i className="fas fa-link fa-3x" /> | Bound | Status | FA | link | `<i className="fas fa-link" />` | solid Style (fas) | yes | Bound status |
|
|
80
|
+
| <i className="fas fa-unlink fa-3x" /> | Unbound | Status | FA | unlink | `<i className="fas fa-unlink" />` | solid Style (fas) | yes | Unbound status |
|
|
81
|
+
| <i className="fas fa-exclamation fa-3x" /> | Exclamation | Status | FA | exclamation | `<i className="fas fa-exclamation" />` | solid Style (fas) | yes | Issue status |
|
|
82
|
+
| <i className="fas fa-minus fa-3x" /> | Hyphen | Status | FA | minus | `<i class="fas fa-minus" />` | solid Style (fas) | yes | No status, in tables |
|
|
83
|
+
| <i className="fas fa-times-circle fa-3x" /> | Remove-circle | Action | FA | times-circle | `<i class="fas fa-times-circle" />` | solid Style (fas) | yes | Remove a criteria in a search |
|
|
84
|
+
| <i className="fas fa-file-upload fa-3x" /> | Object-upload | Action | FA | file-upload | `<i class="fas fa-file-upload" />` | solid Style (fas) | yes | When uploading an object |
|
|
85
|
+
| <i className="fas fa-chevron-left fa-3x" /> | Chevron-left | Navigation | FA | chevron-left | `<i className="fas fa-chevron-left" />` | solid Style (fas) | yes | Expand tabs |
|
|
86
|
+
| <i className="fas fa-chevron-right fa-3x" /> | Chevron-right | Navigation | FA | chevron-right | `<i className="fas fa-chevron-right" />` | solid Style (fas) | yes | Expand tables |
|
|
87
|
+
| <i className="fas fa-angle-double-right fa-3x" /> | Angle-double-right | Status | FA | angle-double-right | `<i className="fas fa-angle-double-right" />` | solid Style (fas) | yes | Show an increase "From 1 value to another one" |
|
|
88
|
+
| <i className="fas fa-language fa-3x" /> | Language | Menu | FA | language | `<i className="fas fa-language" />` | solid Style (fas) | yes | Select the language in the top menu |
|
|
89
|
+
| <i className="fas fa-palette fa-3x" /> | Theme | Menu | FA | palette | `<i className="fas fa-palette" />` | solid Style (fas) | yes | Select the theme in the top menu |
|
|
90
|
+
| <i className="fas fa-clipboard-list fa-3x" /> | Documentation | Menu | FA | clipboard-list | `<i className="fas fa-clipboard-list" />` | solid Style (fas) | yes | Access to the documentation link |
|
|
91
|
+
| <i className="fas fa-comments fa-3x" /> | Support | Menu | FA | comments | `<i className="fas fa-comments" />` | solid Style (fas) | yes | Access to the support link |
|
|
92
|
+
| <i className="fas fa-file-contract fa-3x" /> | EULA | Menu | FA | file-contract | `<i className="fas fa-file-contract" />` | solid Style (fas) | yes | Access to the "Terms of use" link |
|
|
93
|
+
| <i className="fas fa-sign-out-alt fa-3x" /> | Log-out | Menu | FA | sign-out-alt | `<i className="fas fa-sign-out-alt" />` | solid Style (fas) | yes | Log out action |
|
|
94
|
+
| <i className="far fa-hourglass fa-3x" /> | Hourglass | Status | FA | hourglass | `<i className="far fa-hourglass" />` | regular Style (far) | ? | Workflow delayed |
|
|
95
|
+
| <i className="fas fa-pause fa-3x" /> | Pause | Status | FA | pause | `<i className="fas fa-pause" />` | solid Style (fas) | yes | Workflow paused |
|
|
96
|
+
| <i className="fas fa-level-up-alt fa-3x" /> | Upgrade | Button-action | FA | level-up-alt | `<i className="fas fa-level-up-alt" />` | solid Style (fas) | yes | Upgrade version |
|
|
97
|
+
| <i className="fas fa-expand-alt fa-3x" /> | Expansion | Button-action | FA | expand-alt | `<i className="fas fa-expand-alt" />` | solid Style (fas) | yes | Expand with no rebalancing |
|
|
98
|
+
| <i className="fas fa-balance-scale fa-3x" /> | Rebalance | Button-action | FA | balance-scale | `<i className="fas fa-balance-scale" />` | solid Style (fas) | yes | Expand with rebalancing |
|
|
99
|
+
| <i className="fas fa-hard-hat fa-3x" /> | Maintenance | Button-action | FA | hard-hat | `<i className="fas fa-hard-hat" />` | solid Style (fas) | yes | Switch to "maintenance mode" |
|
|
100
|
+
| <i className="fas fa-exchange-alt fa-3x" /> | Change-erasure | Button-action | FA | exchange-alt | `<i className="fas fa-exchange-alt" />` | solid Style (fas) | yes | Change erasure code level |
|
|
101
|
+
| <i className="fas fa-circle fa-3x" /> | Circle-health | Status | FA | circle | `<i className="fas-circle" />` | solid Style (fas) | yes | Display status (Healthy, Warning, Critical) |
|
|
102
|
+
| <i className="far fa-circle fa-3x" /> | Circle-empty | Status | FA | circle | `<i className="far-circle" />` | regular Style (far) | yes | Display empty health status |
|
|
103
|
+
| <i className="fas fa-toolbox fa-3x" /> | Services | Status | FA | toolbox | `<i className="fas fa-toolbox" />` | solid Style (fas) | yes | Status icon for Services |
|
|
104
|
+
| <i className="fas fa-cubes fa-3x" /> | Data-services | Hero | FA | cubes | `<i className="fas fa-cubes" />` | solid Style (fas) | yes | Hero icon for Data-services |
|
|
105
|
+
| <i className="fas fa-arrow-right fa-3x" /> | Arrow-right | Navigation | FA | arrow-right | `<i className="fas fa-right-up" />` | solid Style (fas) | yes | Button as "Continue", next step |
|
|
106
|
+
| <i className="fas fa-arrow-left fa-3x" /> | Arrow-left | Navigation | FA | arrow-left | `<i className="fas fa-arrow-left" />` | solid Style (fas) | yes | Go back to a previous status/page |
|
|
107
|
+
| <i className="fas fa-certificate fa-3x" /> | Certificate | Entities | FA | certificate | `<i className="fas fa-certificate" />` | solid Style (fas) | yes | Certificate |
|
|
108
|
+
| <i className="fas fa-download fa-3x" /> | Download | Action icon | FA | download | `<i className="fas fa-download" />` | solid Style (fas) | yes | Download |
|
|
109
|
+
| <i className="fas fa-id-card fa-3x" /> | ID-card | Entities | FA | id-card | `<i className="fas fa-id-card"/>` | solid Style (fas) | yes | Identity |
|
|
110
|
+
| <i className="fas fa-cog fa-3x" /> | Setting | Action | FA | cog | `<i className="fas fa-cog"/>` | solid Style (fas) | yes | Global Settings |
|
|
111
|
+
| <QueryClientProvider client={new QueryClient()}><Icon name="Remote-user" size="3x" /></QueryClientProvider> | Remote-user | Entities | Custom | - | - | custom icon | - | Remote user in Identity UI |
|
|
112
|
+
| <QueryClientProvider client={new QueryClient()}><Icon name="Remote-group" size="3x" /></QueryClientProvider> | Remote-group | Entities | Custom | - | - | custom icon | - | Remote group in Identity UI |
|