(ui) delete banner insight in admin view for machines and trainings

app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx

@@ -71,7 +71,7 @@ export const EditorialBlockForm: React.FC<EditorialBlockFormProps> = ({ register
                       register={register}
                       formState={formState}
                       rules={{ required: { value: isActiveCta, message: t('app.admin.editorial_block_form.label_is_required') } }}
-                      maxLength={40}
+                      maxLength={25}
                       label={t('app.admin.editorial_block_form.cta_label')} />
             <FormInput id={keys.cta_url}
                       register={register}

app/frontend/src/javascript/components/machines/machines-editorial-block.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { IApplication } from '../../models/application';
+import { react2angular } from 'react2angular';
+import { Loader } from '../base/loader';
+import { EditorialBlock } from '../editorial-block/editorial-block';
+import SettingAPI from '../../api/setting';
+import SettingLib from '../../lib/setting';
+import { SettingValue, machinesSettings } from '../../models/setting';
+
+declare const Application: IApplication;
+
+interface MachinesEditorialBlockProps {
+  onError: (message: string) => void
+}
+
+/**
+ * This component displays to Users the editorial block (banner) associated to machines.
+ */
+export const MachinesEditorialBlock: React.FC<MachinesEditorialBlockProps> = ({ onError }) => {
+  // Store Banner retrieved from API
+  const [banner, setBanner] = useState<Record<string, SettingValue>>({});
+
+  // Retrieve the settings related to the Machines Banner from the API
+  useEffect(() => {
+    SettingAPI.query(machinesSettings)
+      .then(settings => {
+        setBanner({ ...SettingLib.bulkMapToObject(settings) });
+      })
+      .catch(onError);
+  }, []);
+
+  return (
+    <>
+      {banner.machines_banner_active &&
+        <EditorialBlock
+          text={banner.machines_banner_text}
+          cta={banner.machines_banner_cta_active && banner.machines_banner_cta_label}
+          url={banner.machines_banner_cta_active && banner.machines_banner_cta_url} />
+      }
+    </>
+  );
+};
+
+const MachinesEditorialBlockWrapper: React.FC<MachinesEditorialBlockProps> = (props) => {
+  return (
+    <Loader>
+      <MachinesEditorialBlock {...props} />
+    </Loader>
+  );
+};
+
+Application.Components.component('machinesEditorialBlock', react2angular(MachinesEditorialBlockWrapper, ['onError']));

app/frontend/src/javascript/components/machines/machines-list.tsx

@@ -10,10 +10,6 @@ import { MachineCategory } from '../../models/machine-category';
 import { MachineCard } from './machine-card';
 import { MachinesFilters } from './machines-filters';
 import { User } from '../../models/user';
-import { EditorialBlock } from '../editorial-block/editorial-block';
-import SettingAPI from '../../api/setting';
-import SettingLib from '../../lib/setting';
-import { SettingValue, machinesSettings } from '../../models/setting';
 
 declare const Application: IApplication;
 
@@ -44,9 +40,7 @@ export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess,
     category: null
   });
 
-  const [banner, setBanner] = useState<Record<string, SettingValue>>({});
-
-  // retrieve the full list of machines and the machines Banner on component mount
+  // retrieve the full list of machines on component mount
   useEffect(() => {
     MachineAPI.index()
       .then(data => setAllMachines(data))
@@ -54,11 +48,6 @@ export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess,
     MachineCategoryAPI.index()
       .then(data => setMachineCategories(data))
       .catch(e => onError(e));
-    SettingAPI.query(machinesSettings)
-      .then(settings => {
-        setBanner({ ...SettingLib.bulkMapToObject(settings) });
-      })
-      .catch(onError);
   }, []);
 
   // filter the machines shown when the full list was retrieved
@@ -106,12 +95,6 @@ export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess,
 
   return (
     <div className="machines-list">
-      {banner.machines_banner_active &&
-        <EditorialBlock
-          text={banner.machines_banner_text}
-          cta={banner.machines_banner_cta_active && banner.machines_banner_cta_label}
-          url={banner.machines_banner_cta_active && banner.machines_banner_cta_url} />
-      }
       <MachinesFilters onFilterChangedBy={handleFilterChangedBy} machineCategories={machineCategories}/>
       <div className="all-machines">
         {machines && machines.map(machine => {

app/frontend/src/javascript/components/trainings/trainings.tsx

@@ -35,7 +35,6 @@ export const Trainings: React.FC<TrainingsProps> = ({ onError, onSuccess }) => {
   const [trainings, setTrainings] = useState<Array<Training>>([]);
   const [machines, setMachines] = useState<Array<Machine>>([]);
   const [filter, setFilter] = useState<boolean>(null);
-  const [banner, setBanner] = useState<Record<string, SettingValue>>({});
 
   // Styles the React-select component
   const customStyles = {
@@ -50,13 +49,8 @@ export const Trainings: React.FC<TrainingsProps> = ({ onError, onSuccess }) => {
     })
   };
 
-  // At component mount, fetch Banner and Machines from API
+  // At component mount, fetch Machines from API
   useEffect(() => {
-    SettingAPI.query(trainingsSettings)
-      .then(settings => {
-        setBanner({ ...SettingLib.bulkMapToObject(settings) });
-      })
-      .catch(onError);
     MachineAPI.index({ disabled: false })
       .then(setMachines)
       .catch(onError);
@@ -129,12 +123,6 @@ export const Trainings: React.FC<TrainingsProps> = ({ onError, onSuccess }) => {
         </div>
       </header>
 
-      {banner.trainings_banner_active &&
-        <EditorialBlock
-          text={banner.trainings_banner_text}
-          cta={banner.trainings_banner_cta_active && banner.trainings_banner_cta_label}
-          url={banner.trainings_banner_cta_active && banner.trainings_banner_cta_url} />
-      }
       <div className="trainings-content">
         <div className='display'>
           <div className='filter'>

app/frontend/templates/machines/index.html

@@ -13,7 +13,6 @@
   </div>
 </section>
 
-
 <section class="m-lg"
          ui-tour="machines"
          ui-tour-backdrop="true"
@@ -22,6 +21,8 @@
          ui-tour-scroll-parent-id="content-main"
          post-render="setupMachinesTour">
 
+  <machines-editorial-block on-error="onError"></machines-editorial-block>
+
   <machines-list user="currentUser"
                  on-error="onError"
                  on-success="onSuccess"