1"use strict";(globalThis.webpackChunkregardsoss_github_io=globalThis.webpackChunkregardsoss_github_io||[]).push([[9065],{23142(e,n,s){s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>r,default:()=>m,frontMatter:()=>a,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"development/frontend/frontend-introduction-architecture","title":"Architecture overview","description":"Presentation","source":"@site/versioned_docs/version-2.2.0/development/frontend/arch.md","sourceDirName":"development/frontend","slug":"/development/frontend/introduction/architecture/","permalink":"/docs/2.2.0/development/frontend/introduction/architecture/","draft":false,"unlisted":false,"editUrl":"https://github.com/RegardsOss/RegardsOss.github.io/edit/master/versioned_docs/version-2.2.0/development/frontend/arch.md","tags":[],"version":"2.2.0","frontMatter":{"id":"frontend-introduction-architecture","title":"Architecture overview","sidebar_label":"Architecture","slug":"/development/frontend/introduction/architecture/"},"sidebar":"dev","previous":{"title":"Setting up an IDE","permalink":"/docs/2.2.0/development/frontend/introduction/ide/"},"next":{"title":"Lint","permalink":"/docs/2.2.0/development/frontend/introduction/eslint/"}}');var o=s(74848),i=s(28453);const a={id:"frontend-introduction-architecture",title:"Architecture overview",sidebar_label:"Architecture",slug:"/development/frontend/introduction/architecture/"},r=void 0,d={},l=[{value:"Presentation",id:"presentation",level:2},{value:"Structure",id:"structure",level:2},{value:"Common businness modules (business-common)",id:"common-businness-modules-business-common",level:2},{value:"Business modules",id:"business-modules",level:2},{value:"Eslint configuration module",id:"eslint-configuration-module",level:2},{value:"Mocks",id:"mocks",level:2},{value:"Plugins",id:"plugins",level:2},{value:"Components modules",id:"components-modules",level:2},{value:"Data",id:"data",level:2},{value:"Modules",id:"modules",level:2},{value:"Utils modules",id:"utils-modules",level:2}];function c(e){const n={a:"a",code:"code",em:"em",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h2,{id:"presentation",children:"Presentation"}),"\n",(0,o.jsx)(n.p,{children:"The REGARDS frontend contains three differents interfaces:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["The ",(0,o.jsx)(n.code,{children:"Portal interface"}),", fully configurable (layout, theme and modules displayed), that lists projects."]}),"\n",(0,o.jsxs)(n.li,{children:["The ",(0,o.jsx)(n.code,{children:"User interface"}),", fully configurable (layout, theme and modules displayed), that lets users browse project content."]}),"\n",(0,o.jsxs)(n.li,{children:["The ",(0,o.jsx)(n.code,{children:"Administrator interface"}),", that allows ",(0,o.jsx)(n.strong,{children:"Instance admin"})," creating Projects and ",(0,o.jsx)(n.strong,{children:"Project Admin"})," configuring them."]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["For the ",(0,o.jsx)(n.code,{children:"Portal"})," and ",(0,o.jsx)(n.code,{children:"User"})," interfaces, REGARDS UI defines ",(0,o.jsx)(n.a,{href:"/docs/2.2.0/development/frontend/packages/lazy-modules/",children:"Dynamic modules"})," to bring UI features that the administrator can control (options, layout, menus....)."]}),"\n",(0,o.jsx)(n.h2,{id:"structure",children:"Structure"}),"\n",(0,o.jsxs)(n.p,{children:["The REGARDS frontend is divided in several NPM modules. Each one has a ",(0,o.jsx)(n.code,{children:"package.json"})," file defining the name of the module. It allows us to import a module using that name instead of module relative path."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:"import { configureStore } from '@regardsoss/store' // Good\nimport { configureStore } from '../web_modules/data/store/src/main.js' // Bad practice\n"})}),"\n",(0,o.jsx)(n.p,{children:"Before further explanation about the role of each module and folders, let's have a look on the global rs-frontend/webapp folder structure."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:'\u251c\u2500\u2500 webapp # REGARDS Frontend webapp folder\n \u251c\u2500\u2500 dist # transpiled code for dev and prod \n \u251c\u2500\u2500 eslint-config-es6-rules # Eslint configuration for project (as a module)\n \u251c\u2500\u2500 mocks # Holds mock servers for features development\n \u251c\u2500\u2500 plugins # REGARDS plugins\n \u251c\u2500\u2500 reports # Local reports\n | \u251c\u2500\u2500 coverage # Coverage report\n | \u251c\u2500\u2500 mocha # Test report\n \u251c\u2500\u2500 resources # Some demo resources\n \u251c\u2500\u2500 scripts # Some helper scripts for installing, building... Mainly for plugins usage\n \u251c\u2500\u2500 src # frontend starter source code, common to user, portal and admin applications\n | \u251c\u2500\u2500 main.jsx # Starter React file\n | \u251c\u2500\u2500 rootReducer.js # Loads the Redux tree\n | \u2514\u2500\u2500 rootRouter.js # Loads the react-router logic\n \u251c\u2500\u2500 tests # Tests corresponding to src folder\n \u251c\u2500\u2500 web_modules # Contains all @regardsoss modules, except builder and lint ones\n | \u251c\u2500\u2500 business-common # Reusable business logic, often shared between admin and user app\n | \u251c\u2500\u2500 business-modules # Application static modules and specific applications starters `admin`, `portal` and `user`\n | \u251c\u2500\u2500 components # Reusable React components\n | \u251c\u2500\u2500 data # data related reusable elements\n | | \u251c\u2500\u2500 api # module holding normalizer configurations for backend API\n | | \u251c\u2500\u2500 client # module holding redux client to fetch data from backend\n | | \u251c\u2500\u2500 domain # module holding business domain enumerations and constants\n | | \u251c\u2500\u2500 shape # React PropTypes related with backend data and normalized data\n | | \u2514\u2500\u2500 store # Redux store helpers and configurators\n | \u251c\u2500\u2500 modules # Dynamic modules \n | \u251c\u2500\u2500 utils # REGARDS "generic" toolkit\n | \u2514\u2500\u2500 vendors # External libraries forks\n \u251c\u2500\u2500 webpack-config-front # Module holding plugins and modules webpack transpiler and defining dev and prod build constants\n \u251c\u2500\u2500 yeoman # Yeoman templates (cli to generate frontend modules and plugins)\n \u251c\u2500\u2500 package.json # Define npm scripts and list all dependencies\n \u251c\u2500\u2500 webpack.*.config.js # Various webpack configuration files, corresponding to similar NPM task\n'})}),"\n",(0,o.jsx)(n.h2,{id:"common-businness-modules-business-common",children:"Common businness modules (business-common)"}),"\n",(0,o.jsx)(n.p,{children:"This folder contains business related modules, shared accross many REGARDS modules and/or applications"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"admin-data-entities-attributes-management"}),":\nShared React component to handle entities attributes configuration"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"admin-error-user-config-module"}),": Shared React component to validate modules configuration"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"attributes-common"}),": Shared React components to configure and display attributes values"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"endpoints-common"}),": Shared data fetcher and storage for endpoint access rights"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"entities-common"}),": Shared React components for entities related UI services (like displaying entity detail)"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"global-system-error"}),": Shared React components to display errors in REGARDS interfaces"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"microservice-plugin-configurator"}),": Shared React component to configure a REGARDS backedn microservice plugin"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"order-common"}),": Shared React components to display orders in REGARDS"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"project-handler"}),": Shared React High Order Component to fetch and publish in Redux store (see later sections) the current project"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"toponym-common"}),": Shared React components to work with toponyms"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"user-metadata-common"}),": Shared project user metadata definition and edition React components"]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"business-modules",children:"Business modules"}),"\n",(0,o.jsxs)(n.p,{children:["This folder contains all applications modules that are not ",(0,o.jsx)(n.em,{children:"dynamic"})," - ie that cannot be configured and set up in user nor in portal applications. Therefore it contains application starters (admin, user, portal) plus all administration interface modules."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.em,{children:"Note: The administration application is structured in a thematic tree, like seen in the tree below. Each module at a given tree level imports and setup the modules below (reducers, routers,...)"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:"\u251c\u2500\u2500 portal # Portal app starter\n\u251c\u2500\u2500 user # User app starter\n\u251c\u2500\u2500 authenticate # Authenticate app starter\n\u251c\u2500\u2500 admin # Admin app starter\n\u251c\u2500\u2500 admin-accessright-accessgroup-management # Data access groups\n\u251c\u2500\u2500 admin-accessright-dataaccess-management # Data access rights per group\n\u251c\u2500\u2500 admin-account-management # Account (rs-admin instance)\n\u251c\u2500\u2500 admin-board-account # Account (rs-admin instance)\n\u251c\u2500\u2500 admin-board-acquisition # Acquisition\n\u251c\u2500\u2500 admin-board-collections # Data (rs-dam tenant)\n\u251c\u2500\u2500 admin-board-commands # Commands\n\u251c\u2500\u2500 admin-board-dataaccess # Data access rights (rs-dam tenant)\n\u251c\u2500\u2500 admin-board-models # Modelisation (rs-dam tenant)\n\u251c\u2500\u2500 admin-dashboard-management # Dashboard\n\u251c\u2500\u2500 admin-data-attribute-plugins-management\n\u251c\u2500\u2500 admin-data-attributemodel-management # Attribute model\n\u251c\u2500\u2500 admin-data-collection-management # Collection \n\u251c\u2500\u2500 admin-data-connection-management # Connection \n\u251c\u2500\u2500 admin-data-dataset-management # Dataset\n\u251c\u2500\u2500 admin-data-datasource-management # Datasource \n\u251c\u2500\u2500 admin-data-fragment-management # Fragment\n\u251c\u2500\u2500 admin-data-model-management # Model\n\u251c\u2500\u2500 admin-data-modelattribute-management # Model attribute association\n\u251c\u2500\u2500 admin-data-provider-management\n\u251c\u2500\u2500 admin-dataaccess-searchengines-management\n\u251c\u2500\u2500 admin-dataaccess-services-management\n\u251c\u2500\u2500 admin-datapreparation-management\n\u251c\u2500\u2500 admin-delivery-management\n\u251c\u2500\u2500 admin-feature-management\n\u251c\u2500\u2500 admin-ingest-processing-chain-management\n\u251c\u2500\u2500 admin-lta-management\n\u251c\u2500\u2500 admin-microservice-management # Java Plugins and microservice lifecycle\n\u251c\u2500\u2500 admin-oais-management\n\u251c\u2500\u2500 admin-order-management\n\u251c\u2500\u2500 admin-processing-management\n\u251c\u2500\u2500 admin-project-management # Project (rs-admin instance)\n\u251c\u2500\u2500 admin-storage-management\n\u251c\u2500\u2500 admin-ui-layout-management # UI Layout\n\u251c\u2500\u2500 admin-ui-management # User interface (rs-access-*)\n\u251c\u2500\u2500 admin-ui-module-management # UI Modules configuration\n\u251c\u2500\u2500 admin-ui-plugin-management # UI Plugin\n\u251c\u2500\u2500 admin-ui-service-management # UI Plugin services\n\u251c\u2500\u2500 admin-ui-settings-management\n\u251c\u2500\u2500 admin-ui-theme-management # UI Theme\
1n\u251c\u2500\u2500 admin-user-authentication-plugins-management \n\u251c\u2500\u2500 admin-user-management # User configuration (rs-admin tenant)\n\u251c\u2500\u2500 admin-user-projectuser-management # Project User \n\u251c\u2500\u2500 admin-user-role-management # Role\n\u251c\u2500\u2500 admin-user-role-resource-access-management # REST resource authorisation per role\n"})}),"\n",(0,o.jsx)(n.h2,{id:"eslint-configuration-module",children:"Eslint configuration module"}),"\n",(0,o.jsxs)(n.p,{children:["The folder ",(0,o.jsx)(n.code,{children:"eslint-config-es6-rules"})," holds the lint configuration module for REGARDS frontend. Lint corresponds to the set of style rules that are applied to project code."]}),"\n",(0,o.jsx)(n.h2,{id:"mocks",children:"Mocks"}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"mocks"})," folder contains runnable mock servers:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.em,{children:"front"})," folder contains a standalone server that answers all front end calls based on a node JS server"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.em,{children:"json"})," folder contains a standalone server that answers all front end calls using JSONServer"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.em,{children:"proxy"})," folder contains a standalone server that answers known front end calls based on a local node JS server and is able to report unknown URL onto configured backend server, acting as a proxy"]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["Those servers are used to develop and test new functionnalities. The team recently uses ",(0,o.jsx)(n.strong,{children:"proxy"})," server for most new features development."]}),"\n",(0,o.jsx)(n.h2,{id:"plugins",children:"Plugins"}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"plugins"})," folder contains REGARDS front end plugins code. Those plugins are separed of front end core code. However, it is convenient for development to keep the folder within webapp to address compilation, version and references issues. For more detail about plugins, see ",(0,o.jsx)(n.a,{href:"/docs/2.2.0/development/frontend/plugins/",children:"plugins page"})]}),"\n",(0,o.jsx)(n.h2,{id:"components-modules",children:"Components modules"}),"\n",(0,o.jsxs)(n.p,{children:["This package provides ",(0,o.jsx)(n.strong,{children:"React"})," generic components to handle forms, buttons, cards and so on. More details are available in ",(0,o.jsx)(n.a,{href:"/docs/2.2.0/development/frontend/packages/components/",children:"components detail page"})]}),"\n",(0,o.jsx)(n.h2,{id:"data",children:"Data"}),"\n",(0,o.jsxs)(n.p,{children:["This folder holds API data related modules (server fetching, shapes, redux store, middlewares...). See ",(0,o.jsx)(n.a,{href:"/docs/2.2.0/development/frontend/data/ui-data/",children:"data presentation page"})]}),"\n",(0,o.jsx)(n.h2,{id:"modules",children:"Modules"}),"\n",(0,o.jsxs)(n.p,{children:["This folder contains all ",(0,o.jsx)(n.em,{children:"dynamic"})," modules, ie all modules that can be configured to be displayed in user and portal application. For more details, see ",(0,o.jsx)(n.a,{href:"/docs/2.2.0/development/frontend/packages/lazy-modules/",children:"dynamic modules sections"})]}),"\n",(0,o.jsx)(n.h2,{id:"utils-modules",children:"Utils modules"}),"\n",(0,o.jsx)(n.p,{children:"This folder holds modules, one by folder, providing high level tools and components shared by all application interfaces (administration, user application and portal application)."}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"adapters"}),": Provides enriched components from external librairies - adds headless render or default styles to a component for instance"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"authentication-utils"}),": Interact with the API to authenticate users. Provides some helpers to authenticate the user, get authentication state, and so on. Also manages 'external authentication parameters' used, for instance, by the mail link sent when creating a new account email"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"cesium-adapter"}),": Provides components and tools to handle Cesium js library"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"display-control"}),": Provides ready to use React components to show/hide a component depending on a logic - show loading when fetching, hide a button when user has not sufficient rights, and so on..."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"file-utils"}),": Provides ready to use React components to manage files."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"form-utils"}),": Provides ready to use internationalized React components and various tools to manage and update ",(0,o.jsx)(n.a,{href:"http://redux-form.com",children:"Redux forms"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"i18n"}),": Provides tools and components to manage internationalization. Note: REGARDS i18n system relies on ",(0,o.jsx)(n.a,{href:"https://github.com/yahoo/react-intl",children:"React intl"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"i18n-ui"}),": Provides i18n graphic interactors to select / display current i18n state in application"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"layout"}),": Provides components and tools to handle REGARDS user interface layout customizing and render"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"mime-types"}),": Provides tools and enumerationrs related with MIME type management in REGARDS"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"modules"}),": Provides components and tools to show dynamic modules in REGARDS interfaces"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"modules-api"}),": Provides tools to implement new modules configuration and user interfaces"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"plugins"}),': Provides components and tools to show plugins in REGARDS interfaces. Note that this modules is only related with "UI plugins"; "Backend plugins" are not handled here']}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"plugins-api"}),": Provides tools to implement new UI plugins in REGARDS."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"redux"}),": Provides tools to connect with application Redux store"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"scroll"}),": Provides tools to handle scrolling."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"store-utils"}),": Provides redux generic actions, reducers and selectors to make ",(0,o.jsx)(n.a,{href:"https://www.npmjs.com/package/redux-api-middleware",children:"Redux API middleware"})," use easier with REGARDS backend. Also provides some other standard redux models for REGARDS, like partitions storage model"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"test-helpers"}),": Provides test tools for react components headless tests.\n",(0,o.jsx)(n.em,{children:"Note: this modules is only provided for test, it should never be bundled with the core application. Therefore the developer must not use it outside test code"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"theme"}),": Provide tools and components to manage REGARDS components theme. Note: it relies on ",(0,o.jsx)(n.a,{href:"http://www.material-ui.com/#/customization/themes",children:"Material UI theme"})," system"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"theme-ui"}),": Provides theme graphic interactors to select / display current theme state in application"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"units"}),": Provides tools to handle units conversion."]}),"\n"]})]})}function m(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},28453(e,n,s){s.d(n,{R:()=>a,x:()=>r});var t=s(96540);const o={},i=t.createContext(o);function a(e){const n=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.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.