@clarabridge/react-studio-console

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 the Sidebar component, defaults to empty string
• links (URLListItem[]) - Optional, list of links

  interface URLLinkItem {
      name: string;
      url: string | null;
      children?: URLListItem[];
      callback?: never;
      collapsed?: boolean;
  }

• locale (String) - Optional, locale name, defaults to EN
• sidebarUrl (String) - Optional, the URL will be used to get the links from the server, default to /api/sidebar
• showSidebar (Boolean) - Required, status of the Sidebar component
• shouldHaveKeyboardFocus (Boolean) - Required, trigger of keyboard focus
• toggleSidebar (() => void) - Required, callback for toggling the Sidebar component
• onLoading ((isLoading: boolean) => void) - Optional, callback for processing loading state of the Sidebar component. When the Sidebar component is mounted, a callback with a true value will be called, when the request for getting the list of links is comleted, the callback will be called with a false value

Header

The available options are:

• className (String) - Optional, class names applied to the Header component, defaults to empty string
• showSidebar (Boolean) - Required, status of the Sidebar component
• toggleSidebarButtonLabel (String) - Optional, label for toggle Sidebar button , defaults to XM Discover Navigation
• useAppName (Boolean) - Optional, adds a section with the applicationName of the application to the Header component
• applicationName (String) - Optional, the name of the application, defaults to empty string
• useAccountSwitcher (Boolean) - Optional, adds a section with the Master Account swither. If used, when the Header component is mounted to the applicaton, the next requests will be made to get the master accounts and the current 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 the current master account from the server, default to /api/user/master-account
• masterAccountsUrl (String) - Optional, the URL will be used to get the master 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 and masterAccountName. 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 the Header component is mounted to the applicaton, the next request will be made to get the workspaces from the server, default API: GET /api/user/workspaces
• workspacesUrl (String) - Optional, the URL will be used to get the workspaces from the server, default to /api/user/workspaces
• useUserMenu (Boolean) - Optional, adds a section with the User menu. If used, when the Header component is mounted to the applicaton, the next request will be made to get the User from the server, default API: GET /api/user
• userUrl (String) - Optional, the URL will be used to get the User from the server, default to /api/user
• userSettings (UserSettings[]) - Optional, the list of options that uses in the UserMenu

  interface UserSettings {
    section: string;
    options: {
      label: string;
      url?: string;
      action?: string;
    }[]
  }

• toggleSidebar (() => void) - Required, callback for toggling the Sidebar component
• toggleSidebarFromKeyboard (() => void) - Required, callback for toggling the Sidebar component from keyboard
• onLoading ((isLoading: boolean) => void) - Optional, callback for processing loading state of the Header component. When the Header component is mounted, a callback with a true value will be called, when all retrieve requests are completed (depending on the configuration), the callback will be called with a false value
• onInternalDataLoading ((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 project
• onSwitchMasterAccount ((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;
  }