0.0.7 • Published 1 year ago
@clarabridge/react-studio-console v0.0.7
React Studio Console
This library consists of layout components from Unified Angular Components libruary that have been adapted for usage in ReactJS.
Installation
React Layout Components can be installed as an npm package:
$ npm i @clarabridge/react-studio-console
Basic usage
import { Header, Sidebar } from @clarabridge/react-studio-console
Available Options
Sidebar
The available options are:
className
(String) - Optional, class names applied to theSidebar
component, defaults to empty stringlinks
(URLListItem[]) - Optional, list of links
interface URLLinkItem {
name: string;
url: string | null;
children?: URLListItem[];
callback?: never;
collapsed?: boolean;
}
locale
(String) - Optional, locale name, defaults toEN
sidebarUrl
(String) - Optional, the URL will be used to get thelinks
from the server, default to/api/sidebar
showSidebar
(Boolean) - Required, status of theSidebar
componentshouldHaveKeyboardFocus
(Boolean) - Required, trigger of keyboard focustoggleSidebar
(() => void) - Required, callback for toggling theSidebar
componentonLoading
((isLoading: boolean) => void) - Optional, callback for processing loading state of theSidebar
component. When theSidebar
component is mounted, a callback with atrue
value will be called, when the request for getting the list of links is comleted, the callback will be called with afalse
value
Header
The available options are:
className
(String) - Optional, class names applied to theHeader
component, defaults to empty stringshowSidebar
(Boolean) - Required, status of theSidebar
componenttoggleSidebarButtonLabel
(String) - Optional, label for toggleSidebar
button , defaults toXM Discover Navigation
useAppName
(Boolean) - Optional, adds a section with theapplicationName
of the application to theHeader
componentapplicationName
(String) - Optional, the name of the application, defaults to empty stringuseAccountSwitcher
(Boolean) - Optional, adds a section with the Master Account swither. If used, when theHeader
component is mounted to the applicaton, the next requests will be made to get themaster accounts
and thecurrent master account
from the server, default APIs:GET /api/user/master-account
GET /api/user/master-accounts
masterAccountUrl
(String) - Optional, the URL will be used to get thecurrent master account
from the server, default to/api/user/master-account
masterAccountsUrl
(String) - Optional, the URL will be used to get themaster accounts
from the server, default to/api/user/master-accounts
switchMasterAccountUrl
(String) - Optional, the URL will be used when the User switches master account on the server, default API:POST /api/user/master-accounts/switch-to
with the next query parameters:masterAccountId
andmasterAccountName
. When a successful response is received from the server, the page will automatically reload, which will allow you to change the access scopes of the application
useWorkspaceSwitcher
(Boolean) - Optional, adds a section with the Workspace swither. If used, when theHeader
component is mounted to the applicaton, the next request will be made to get theworkspaces
from the server, default API:GET /api/user/workspaces
workspacesUrl
(String) - Optional, the URL will be used to get theworkspaces
from the server, default to/api/user/workspaces
useUserMenu
(Boolean) - Optional, adds a section with the User menu. If used, when theHeader
component is mounted to the applicaton, the next request will be made to get theUser
from the server, default API:GET /api/user
userUrl
(String) - Optional, the URL will be used to get theUser
from the server, default to/api/user
userSettings
(UserSettings[]) - Optional, the list of options that uses in theUserMenu
interface UserSettings {
section: string;
options: {
label: string;
url?: string;
action?: string;
}[]
}
toggleSidebar
(() => void) - Required, callback for toggling theSidebar
componenttoggleSidebarFromKeyboard
(() => void) - Required, callback for toggling theSidebar
component from keyboardonLoading
((isLoading: boolean) => void) - Optional, callback for processing loading state of theHeader
component. When theHeader
component is mounted, a callback with atrue
value will be called, when all retrieve requests are completed (depending on the configuration), the callback will be called with afalse
valueonInternalDataLoading
((isLoading: boolean) => void) - Optional, callback for processing loading state of the internal data depends on selection(applicable for loading projects depending on the selected workspace).onSwitchWorkspace
((workspace: AccountOption, projects?: Project[], selectedProject?: Project) => void) - Optional, callback for getting a selected workspace, and loading the corresponding list of projects for the selected workspace, and potentially the recently selected projectonSwitchMasterAccount
((masterAccount: AccountOption)) - Optional, callback for getting a selected master account, by default will be emitted current master account which stores in the server.
interface AccountOption {
id: number;
name: string;
}
interface Project {
id: number;
name: string;
}