Config: Introducing feature configuration

entrypoints/client.tsx

@@ -7,4 +7,7 @@ showGenesysUI(document.getElementById('genesys'), {
   clientKey: 'changeme',
   apiUrl: 'http://localhost:8080',
   filter: { institute: { code: [ 'COL003', 'BEL084', 'ETH013' ] } },
-}, queryLang);
+  accession: { enabled: true },
+  language: { locale: queryLang, enableSwitch: true },
+  request: { enabled: false },
+});

src/accession/AccessionListPage.tsx

@@ -23,6 +23,7 @@ interface IAccessionListPageState {
 interface IAccessionListPageProps {
   filter: AccessionFilter;
   location: any;
+  cartEnabled: boolean;
 }
 
 class AccessionListPage extends React.Component<IAccessionListPageProps & WithTranslation, IAccessionListPageState> {
@@ -164,7 +165,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
 
   public render() {
     const { accessions, selected, isAllSelected } = this.state;
-    const { t } = this.props;
+    const { t, cartEnabled } = this.props;
     const selectedUUIDs = new Set();
     selected.forEach((uuid) => selectedUUIDs.add(uuid));
 
@@ -188,48 +189,54 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
             <table className="table table-striped">
               <thead className="thead-dark">
                 <tr>
-                  <th>
-                    <input
-                      type="checkbox"
-                      name="select-all"
-                      checked={ isAllSelected }
-                      onChange={ this.onToggleAll }
-                      className="align-middle"
-                    />
-                  </th>
+                  { cartEnabled && (
+                    <th>
+                      <input
+                        type="checkbox"
+                        name="select-all"
+                        checked={ isAllSelected }
+                        onChange={ this.onToggleAll }
+                        className="align-middle"
+                      />
+                    </th>
+                  ) }
                   <th>{ t('accession.crop') }</th>
                   <th>{ t('accession.acceNumb') }</th>
                   <th>{ t('accession.accessionName') }</th>
                   <th>{ t('accession.taxonomy') }</th>
                   <th>{ t('accession.countryOfOrigin') }</th>
                   <th>{ t('accession.sampStat') }</th>
-                  <th>{ t('list.availability') }</th>
+                  { cartEnabled && ( <th>{ t('list.availability') }</th> ) }
                 </tr>
               </thead>
               <tbody>
                 { accessions.content.map((a, i) => (
                   <tr key={ a.id } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
-                    <td>
-                      {this.canAddToCart(a) &&
-                        <input
-                          type="checkbox"
-                          name={ `checkbox-${a.uuid}-${i}` }
-                          data-uuid={ a.uuid }
-                          checked={ selectedUUIDs.has(a.uuid) }
-                          onChange={ this.toggleRowSelect }
-                          className="align-middle"
-                        />
-                      }
-                    </td>
+                    { cartEnabled && (
+                      <td>
+                        { this.canAddToCart(a) &&
+                          <input
+                            type="checkbox"
+                            name={ `checkbox-${a.uuid}-${i}` }
+                            data-uuid={ a.uuid }
+                            checked={ selectedUUIDs.has(a.uuid) }
+                            onChange={ this.toggleRowSelect }
+                            className="align-middle"
+                          />
+                        }
+                      </td>
+                    ) }
                     <td>{ a.cropName }</td>
                     <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
                     <td>{ a.accessionName }</td>
                     <td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td>
                     <td>{ a.countryOfOrigin && a.countryOfOrigin.name }</td>
                     <td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
-                    <td>
-                      {this.renderCartButton(a, i)}
-                    </td>
+                    { cartEnabled &&
+                      <td>
+                        { this.renderCartButton(a, i) }
+                      </td>
+                    }
                   </tr>
                 )) }
               </tbody>
@@ -243,6 +250,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
 
 const mapStateToProps = (state) => ({
   filter: state.appConfig.config.filter,
+  cartEnabled: state.appConfig.config.request.enabled,
 });
 
 export default connect(mapStateToProps)(withTranslation()(AccessionListPage));

src/config/config.ts

@@ -4,6 +4,11 @@ export class Config {
   public clientKey: string;
   public filter: Record<string, any>;
 
+  // module config
+  public accession: BaseFeatureConfig;
+  public language: Partial<LanguageConfig>;
+  public request: BaseFeatureConfig;
+
   public constructor(config: Config) {
     this.apiUrl = config.apiUrl;
     this.clientId = config.clientId;
@@ -12,9 +17,21 @@ export class Config {
   }
 }
 
+export class BaseFeatureConfig {
+  public enabled: boolean;
+}
+
+class LanguageConfig {
+  public locale: string;
+  public enableSwitch: boolean;
+}
+
 export const DefaultConfig = new Config( {
   apiUrl: 'https://api.sandbox.genesys-pgr.org',
   clientId: 'clientid@genesys',
   clientKey: 'changeme',
   filter: {},
+  language: { locale: 'en', enableSwitch: true },
+  accession: { enabled: true },
+  request: { enabled: true },
 })

src/genesys.tsx

@@ -51,11 +51,11 @@ function checkAccessTokens(apiUrl: string, clientId: string, clientSecret: strin
   return appLogin;
 };
 
-export function showGenesysUI(holdingNode: HTMLElement, config: Config = DefaultConfig, language: string = 'en') {
+export function showGenesysUI(holdingNode: HTMLElement, config: Config = DefaultConfig) {
   const { apiUrl, clientId, clientKey } = config;
   reconfigureServiceAxios({ apiUrl });
 
-  initI18n(language);
+  initI18n(config.language.locale);
   store.dispatch(setConfig(config));
 
   checkAccessTokens(apiUrl, clientId, clientKey).then( (result) => {

src/ui/core/App.tsx

@@ -9,7 +9,7 @@ import { createHashHistory } from 'history';
 import { bindActionCreators } from 'redux';
 import { getCountryCodes } from 'core/actions/decoding';
 import { withTranslation, WithTranslation } from 'react-i18next';
-
+import { Config } from 'config/config';
 import CartPage from 'request/CartPage';
 import OverviewPage from 'accession/OverviewPage';
 import RequestPage from 'request/RequestPage';
@@ -17,8 +17,7 @@ import RequestPage from 'request/RequestPage';
 const hashHistory = createHashHistory({});
 
 interface IAppProps extends React.ClassAttributes<any>, WithTranslation {
-  apiUrl: string;
-  filter: object;
+  config: Config;
   getCountryCodes: (lang: string) => Promise<Record<string, string>>;
 }
 
@@ -29,8 +28,9 @@ class App extends React.Component<IAppProps, any> {
   }
 
   public render() {
-    const { apiUrl } = this.props;
-    console.log('Using filter', this.props.filter);
+    const { config } = this.props;
+    const { apiUrl, request } = config;
+
     return (
       <>
         <Router>
@@ -39,9 +39,9 @@ class App extends React.Component<IAppProps, any> {
               <Route path="/a/:uuid" exact component={ AccessionDetails } />
               <Route path="/" exact component={ AccessionList }/>
               <Route path="/api-info" exact component={ ApiInfoPage }/>
-              <Route path="/cart" exact component={ CartPage }/>
+              { request.enabled && <Route path="/cart/" exact component={ CartPage }/> }
               <Route path="/overview" exact component={ OverviewPage }/>
-              <Route path="/request" exact component={ RequestPage }/>
+              { request.enabled && <Route path="/request" exact component={ RequestPage }/> }
               <Route component={ NotFound }/>
             </Switch>
 
@@ -57,8 +57,7 @@ class App extends React.Component<IAppProps, any> {
 }
 
 const mapStateToProps = (state) => ({
-  apiUrl: state.appConfig.config.apiUrl,
-  filter: state.appConfig.config.filter,
+  config: state.appConfig.config,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({