1"use strict";(globalThis.webpackChunkregardsoss_github_io=globalThis.webpackChunkregardsoss_github_io||[]).push([[4245],{18294(e,n,o){o.r(n),o.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>u,frontMatter:()=>r,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"development/frontend/modules/frontend-packages-lazy-modules","title":"Dynamic lazy loadable modules","description":"Description","source":"@site/versioned_docs/version-2.3.1/development/frontend/modules/dynamic-modules.md","sourceDirName":"development/frontend/modules","slug":"/development/frontend/packages/lazy-modules/","permalink":"/docs/development/frontend/packages/lazy-modules/","draft":false,"unlisted":false,"editUrl":"https://github.com/RegardsOss/RegardsOss.github.io/edit/master/versioned_docs/version-2.3.1/development/frontend/modules/dynamic-modules.md","tags":[],"version":"2.3.1","frontMatter":{"id":"frontend-packages-lazy-modules","title":"Dynamic lazy loadable modules","sidebar_label":"Overview - Lazy modules","slug":"/development/frontend/packages/lazy-modules/"},"sidebar":"dev","previous":{"title":"Microservice plugin configurator","permalink":"/docs/development/frontend/packages/business-components/microservice-plugin-configurator/"},"next":{"title":"Authentication","permalink":"/docs/development/frontend/packages/lazy-modules/authentication/"}}');var t=o(74848),i=o(28453);const r={id:"frontend-packages-lazy-modules",title:"Dynamic lazy loadable modules",sidebar_label:"Overview - Lazy modules",slug:"/development/frontend/packages/lazy-modules/"},d=void 0,a={},l=[{value:"Description",id:"description",level:2},{value:"Modules list",id:"modules-list",level:2},{value:"Module structure",id:"module-structure",level:2},{value:"About default icon:",id:"about-default-icon",level:3},{value:"Create a new module",id:"create-a-new-module",level:2},{value:"Dynamic Module architecture",id:"dynamic-module-architecture",level:2},{value:"Description",id:"description-1",level:3},{value:"AdminContainer",id:"admincontainer",level:3},{value:"The ModuleContainer",id:"the-modulecontainer",level:3},{value:"Styles",id:"styles",level:3},{value:"Reducer",id:"reducer",level:3},{value:"Messages",id:"messages",level:3},{value:"Dependencies",id:"dependencies",level:3},{value:"Load a module",id:"load-a-module",level:2}];function c(e){const n={a:"a",br:"br",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"description",children:"Description"}),"\n",(0,t.jsxs)(n.p,{children:["A lazy loadable module is a plugable module that project administrator has to use to build the ",(0,t.jsx)(n.code,{children:"User project"})," and ",(0,t.jsx)(n.code,{children:"Portal"})," interfaces, enabling features and graphic component into user interfaces. Those modules can be configured from the project administration interface."]}),"\n",(0,t.jsxs)(n.p,{children:["Microservices ",(0,t.jsx)(n.code,{children:"rs-access-instance"})," and ",(0,t.jsx)(n.code,{children:"rs-access-project"})," store the configuration of each modules and send it back to clients when browsing ",(0,t.jsx)(n.code,{children:"User project"})," and ",(0,t.jsx)(n.code,{children:"Portal"})," interfaces."]}),"\n",(0,t.jsx)(n.h2,{id:"modules-list",children:"Modules list"}),"\n",(0,t.jsx)(n.p,{children:"REGARDS defines currently the following dynamic modules:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/authentication/",children:"Authentication"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/description/",children:"Description"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/embedded-html/",children:"Embedded HTML"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/licenses/",children:"License"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/menu/",children:"Menu"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/news/",children:"News"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/order-cart/",children:"Order Cart"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/order-history/",children:"Order History"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/project-about-page/",children:"Project About Page"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/project-list/",children:"Project List"})}),"\n",(0,t.jsx)(n.li,{children:"Search Form"}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/search-graph/",children:"Search Graph"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/docs/development/frontend/packages/lazy-modules/search-results/",children:"Search Results"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"module-structure",children:"Module structure"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:" . \n \u251c\u2500\u2500 src \n | \u251c\u2500\u2500 \n | \u251c\u2500\u2500 clients : Define all backend clients needed to request/send information \n | \u251c\u2500\u2500 components : React component to display panels \n | \u251c\u2500\u2500 containers : React-Redux logic to handle module functions \n | \u251c\u2500\u2500 domain : Contains module enumerations, constants and business logic\n | \u251c\u2500\u2500 models : Contains specific module actions, selectors and reducers (local actions, it would be in clients otherwise)\n | \u251c\u2500\u2500 shapes : Contains module specific shapes (configuration for instance)\n | \u251c\u2500\u2500 i18n : Messages and labels internationalization \n | \u251c\u2500\u2500 styles : Panels styles (inline css objects) \n | \u251c\u2500\u2500 main.js : Module exported index \n | \u251c\u2500\u2500 reducer.js : Redux reducers \n | \u2514\u2500\u2500 router.js : React-router configuration \n \u251c\u2500\u2500 tests \n \u251c\u2500\u2500 default-icon.svg : Default module icon as svg, mandatory\n \u251c\u2500\u2500 package.json : Npm module description file \n \u2514\u2500\u2500 README.md \n"})}),"\n",(0,t.jsx)(n.h3,{id:"about-default-icon",children:"About default icon:"}),"\n",(0,t.jsx)(n.p,{children:"When creating a module, we must ensure the default icon is provided and respects the following rules:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Its path is ",(0,t.jsx)(n.code,{children:"[module folder]/default-icon.svg"})," where module name is also the module root folder"]}),"\n",(0,t.jsx)(n.li,{children:"Icon is an SVG"}),"\n",(0,t.jsx)(n.li,{children:"Icon stroke and fill colors are specified on first <sgv> tag - otherwise, the module icon cannot be updated with theme colors"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"That icon should be used to represent the module or its instances. It is used, for instance, to display navigation links in menu module - when administrator chooses to use the default icon."}),"\n",(0,t.jsx)(n.p,{children:"SVG icons are available, for instance, on the following sites:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://material.io/icons/",children:"https://material.io/icons/"})," : Material design icons (default regards look and feel)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"https://materialdesignicons.com/",children:"https://materialdesignicons.com/"}),": Extension to material design icons"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Finally, note that each module default-icon.svg ",(0,t.jsx)(n.strong,{children:"should be unique among all modules default icons"}),", so that user can quickly identify the page and module types."]}),"\n",(0,t.jsx)(n.h2,{id:"create-a-new-module",children:"Create a new module"}),"\n",(0,t.jsxs)(n.p,{children:["You can create a new module using the yeoman generator ",(0,t.jsx)(n.code,{children:"generator-regards-ui-module"})," provided with sources into ",(0,t.jsx)(n.code,{children:"webapp/yeoman/generator-regards-ui-module"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"$ cd weba
1pp/yeoman/generator-regards-ui-module\n$ npm install -g yo\n$ npm link\n$ cd ../../web_modules/modules\n$ yo regards-ui-module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["After the last command, informations will be asked for the new module to generate.",(0,t.jsx)(n.br,{}),"\n","When process is over, the complete structure of a module is iniatialized with some simple examples."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Important :"}),(0,t.jsx)(n.br,{}),"\n","Modules are not working as independent plugins into REGARDS yet. So to be able to use a new module into the REGARDS frontend, you have to :"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:['Add your module to the list of dependencies into the main "webapp/package.json" : ',(0,t.jsx)(n.code,{children:'"@regardsoss-modules/{new module name}": "{module version}"'})]}),"\n",(0,t.jsxs)(n.li,{children:["Add your module to the enumeration of available modules in @regardoss/modules/modulesManager (ModulesManager.js) in one of the following enumerations:","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"VisibleModuleTypes: Modules that project administrator can instantiate"}),"\n",(0,t.jsx)(n.li,{children:"HiddenModuleTypes: Modules that project administrator cannot instantiate (authentication for instance, as it is automatically added into the REGARDS interfaces)"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Congratulations"}),", your module is ready! You can now run the frontend with :"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"$ cd webapp\n$ npm install\n$ npm run start:with* # choose here your project start task\n"})}),"\n",(0,t.jsx)(n.p,{children:"To instanciate and configure your new example module :"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"go to project administrator interface, section UI, sub section modules, to instanciate and configure your module."}),"\n",(0,t.jsx)(n.li,{children:"go to user project interface to see your module running."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"dynamic-module-architecture",children:"Dynamic Module architecture"}),"\n",(0,t.jsx)(n.h3,{id:"description-1",children:"Description"}),"\n",(0,t.jsx)(n.p,{children:"To understand the main architecture of a plugable module see the main.js file :"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'export default {\n // A React.Component rendering the module functionalities\n ModuleContainer,\n // A React.Component rendering the module administration form\n AdminContainer,\n // A js object containing needed styles for both ModuleContainer and AdminContainer\n styles,\n // A js object containing Redux reducers of both ModuleContainer and AdminContainer\n reducer,\n // A js object containing, by locale key ("en" / "fr"), the messages map: (string) key to (string) message\n messages,\n // A js object containing server side endpoints dependencies required to display module\n dependencies,\n}\n'})}),"\n",(0,t.jsx)(n.h3,{id:"admincontainer",children:"AdminContainer"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"AdminContainer"})," ",(0,t.jsx)(n.strong,{children:"is facultative"}),". If you don't require a module configuration,\nyou don't need to specify the ",(0,t.jsx)(n.code,{children:"AdminContainer"})," in the ",(0,t.jsx)(n.code,{children:"main.js"})," module entrypoint."]}),"\n",(0,t.jsx)(n.p,{children:"The here-under React component example shows how to create a form for module configuration."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:"import { FormattedMessage } from 'react-intl'\nimport { i18nContextType } from '@regardsoss/i18n'\nimport { RenderTextField, RenderCheckbox, Field } from '@regardsoss/form-utils'\nimport { ModuleConfiguration } from '../shapes/ModuleConfiguration'\n\nclass AdminContainer extends React.Component {\n\n static propTypes = {\n // default module properties in configuration mode\n ...AccessShapes.runtimeConfigurationModuleFields,\n // redefines expected configuration shape for module (specifies THIS MODULE
1shape)\n moduleConf: ModuleConfiguration.isRequired,\n }\n\n static contextTypes = {\n ...i18nContextType,\n }\n\n render() {\n const { intl } = this.context\n /* \n * Please note that each field name below takes in account the current namespace. For \n * instance, the resulting name may be \"conf.myParameter\" (parent will resolve it \n * according with current use case, namespace allows embedding modules into other\n * modules)\n */\n const { adminForm: { currentNamespace } } = this.props\n return (\n <div>\n <Field\n name={`${currentNamespace}.myParameter`}\n fullWidth\n component={RenderTextField}\n type=\"text\"\n label={intl.formatMessage({ id: 'admin.example.my.parameter.label' })}\n />\n <Field\n name={`${currentNamespace}.myParameter2`}\n component={RenderCheckbox}\n label={intl.formatMessage({ id: 'admin.example.my.parameter2.label' })}\n />\n { /* ... */ }\n </div>\n )\n }\n}\nexport default AdminContainer\n\n"})}),"\n",(0,t.jsx)(n.p,{children:"Notes :"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["you should prefix all ",(0,t.jsx)(n.code,{children:"Field"})," names with ",(0,t.jsx)(n.code,{children:"currentNamespace"})," to let you receive that attribute value in your ",(0,t.jsx)(n.code,{children:"ModuleContainer"}),".",(0,t.jsx)(n.br,{}),"\n","For example if you define ",(0,t.jsx)(n.code,{children:"${currentNamespace}.myParameter"})," you will receive ",(0,t.jsx)(n.code,{children:"myParameter"})," in the ",(0,t.jsx)(n.code,{children:"moduleConf"})," property of your module ",(0,t.jsx)(n.code,{children:"ModuleContainer"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"@regardsoss/form-utils"})," module provides ready to use input fields"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"the-modulecontainer",children:"The ModuleContainer"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"ModuleContainer"})," ",(0,t.jsx)(n.strong,{children:"is mandatory"}),". This is the React component displayed at module runtime (ie, not configuration)"]}),"\n",(0,t.jsxs)(n.p,{children:["The following ",(0,t.jsx)(n.code,{children:"ModuleContainer"})," example shows you how to retrieve the prop ",(0,t.jsx)(n.code,{children:"moduleConf"})," which\ncontains the configuration created with the ",(0,t.jsx)(n.code,{children:"AdminContainer"})," and injected in your module."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:"import { i18nContextType } from '@regardsoss/i18n'\nimport { themeContextType } from '@regardsoss/theme'\nimport { FormattedMessage } from 'react-intl'\n\nclass ModuleContainer extends React.Component {\n static propTypes = {\n // Application name \"user\" or \"portal\"\n appName: PropTypes.string.isRequired,\n // Current project name\n project: PropTypes.string.isRequired,\n // Module configuration\n moduleConf: PropTypes.shape({\n myParameter: PropTypes.string,\n myParameter2: PropTypes.bool,\n }).isRequired,\n }\n\n static contextTypes = {\n ...i18nContextType,\n ...themeContextType,\n }\n\n render() {\n const { moduleTheme } = this.context\n const { moduleConf: {myParameter} } = this.props\n return (\n <div>\n <FormattedMessage id=\"example.message\" />\n <div style={moduleTheme.myParameterStyles}>\n {myParameter}\n </div>\n </div>\n )\n }\n\n}\nexport default ModuleContainer\n\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.em,{children:"Notes: the module '@regardsoss/module-api' holds components to make modules writing a bit easier."})}),"\n",(0,t.jsx)(n.h3,{id:"styles",children:"Styles"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"styles"})," field ",(0,t.jsx)(n.strong,{children:"is mandatory"}),", although it can build an empty object. REGARDS frontend uses the ",(0,t.jsx)(n.a,{href:"http://www.material-ui.com/#/get-started/usage",children:"Material-UI"}
1)," library to style all components using inline CSS styles."]}),"\n",(0,t.jsxs)(n.p,{children:["In the ",(0,t.jsx)(n.code,{children:"Styles.js"})," file, you can use the current theme to reuse a subpart of the overall theme, like illustrated in the example below."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:"const formStyles = theme => ({\n\n myParameterStyles: {\n color : theme.palette.textColor,\n width: '250px'\n }\n\n})\nexport default formStyles\n"})}),"\n",(0,t.jsxs)(n.p,{children:["In your module React component, you can access the styles using the context ",(0,t.jsx)(n.code,{children:"this.context.moduleTheme"}),",\nbut you need to explicit the ",(0,t.jsx)(n.code,{children:"contextTypes"})," with the ",(0,t.jsx)(n.code,{children:"...themeContextType"})," from ",(0,t.jsx)(n.code,{children:"@regardsoss/theme"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:"/**\n* Basic usage of the theme context\n*/\nclass Example extends React.Component {\n static contextTypes = {\n ...themeContextType\n }\n\n render() {\n return (\n <div style={this.context.moduleTheme.myParameterStyles}>\n Test\n </div>\n )\n }\n}\nexport default Example\n\n"})}),"\n",(0,t.jsxs)(n.p,{children:["More information about the theme management are available in ",(0,t.jsx)(n.a,{href:"/docs/development/frontend/view/theme/",children:"theme page"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"reducer",children:"Reducer"}),"\n",(0,t.jsxs)(n.p,{children:["The Redux ",(0,t.jsx)(n.code,{children:"reducer"})," for module ",(0,t.jsx)(n.strong,{children:"is mandatory"}),". Lazy loadable modules have their own part created in the store."]}),"\n",(0,t.jsx)(n.p,{children:"The example below shows how to define your Redux tree."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:"const reducers = {\n todos: MyTodosReducer,\n foo: MyFooReducer\n}\n"})}),"\n",(0,t.jsx)(n.p,{children:'With the previous example and for a module named "ExampleModule", the application will create the here-under subpart in the global application store :'}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",children:'{\n "modules.ExampleModule": {\n "todos": {},\n "foo" : {}\n }\n // rest of the redux tree\n}\n'})}),"\n",(0,t.jsxs)(n.p,{children:["The same store can be accessed by both ",(0,t.jsx)(n.code,{children:"ModuleContainer"})," and ",(0,t.jsx)(n.code,{children:"AdminContainer"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"messages",children:"Messages"}),"\n",(0,t.jsxs)(n.p,{children:["This parameter allows you to provide module messages, which are, by convention, stored in ",(0,t.jsx)(n.code,{children:"src/i18n"}),".",(0,t.jsx)(n.br,{}),"\n","When exporting that object, you should provide an object like:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"const messages = {\n en: {\n 'my.message.1': 'My message',\n },\n fr: {\n 'my.message.1': 'Mon message',\n }\n}\n\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By convention, we import that object in module main.js file from ",(0,t.jsx)(n.code,{children:"src/i18n/index.js"})," (noted src/i18n in code). That file only imports all locales languages from corresponding files ",(0,t.jsx)(n.code,{children:"messages.<language>.i18n.js"}),", where language is 'en', 'fr'... Then it exports messages object as illustrated before."]}),"\n",(0,t.jsxs)(n.p,{children:["More information about the internationalization are available in ",(0,t.jsx)(n.a,{href:"/docs/development/frontend/view/international/",children:"internationalization page"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,t.jsxs)(n.p,{children:["This file defines dependencies required to display ",(0,t.jsx)(n.code,{children:"ModuleContainer"})," (user field) and ",(0,t.jsx)(n.code,{children:"AdminContainer"})," (admin field). Those dependencies will be evaluated for the current user role.\nEach endpoint dependency required is composed in 3 parts, separated by the '@' caracter:",(0,t.jsx)(n.br,{}),"\n",(0,t.jsx)(n.code,{children:"<MICROSERVICE>@<ENDPOINT>@<HTTP_VERB>"})]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.em,{children:"Example of a module dependencies file:"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:"\n/**\n * Dependencies needed to display ModuleContainer\n */\nconst user = [\n 'rs-dam@/models/attributes@GET',\n]\n/**\n * Dependencies needed to display AdminContainer\n */\nconst admin = [\n 'rs-dam@/models/attributes@POST',\n]\n\nexport default {\n user,\n admin,\n}\n\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.em,{children:"Note: REGARDS actions are able exporting such format dependencies using the method getDependency(VERB), where VERB enumeration can be found in @regardoss/store-utils.RequestVerbEnum"})}),"\n",(0,t.jsx)(n.h2,{id:"load-a-module",children:"Load a module"}),"\n",(0,t.jsx)(n.p,{children:"Also most dynamic modules are made to be configured by the administrator, through REGARDS project administration interface, it is still possible to load them in code. The example below shows how to load authentication module."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:" import { modulesManager } from '@regardoss/modules'\n // ...\n\n render() {\n const module
1Configuration = {\n type: modulesManager.AllDynamicModuleTypes.AUTHENTICATION,\n active: true,\n conf: { // specific authentication module configuration field, will be the moduleConf field when in authentication ModuleContainer\n showLoginWindow: this.state.isLogin,\n showCancel: true,\n showAskProjectAccess: false,\n loginTitle: 'My login',\n onCancelAction: this.onCancelLogin,\n }\n }\n return (\n <LazyModuleComponent\n module={moduleConfiguration}\n appName={'user'}\n project={'project'}\n />\n )\n }\n"})})]})}function u(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},28453(e,n,o){o.d(n,{R:()=>r,x:()=>d});var s=o(96540);const t={},i=s.createContext(t);function r(e){const n=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.