Fixes #37553 - Wait for all plugin JS to load before rendering Column…

…Selector
theforeman · Jun 13, 2024 · 58e8f94 · 58e8f94
1 parent 94b3416
commit 58e8f94
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js b/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js
@@ -152,7 +152,7 @@ const ColumnSelector = props => {
           icon={<ColumnsIcon />}
           iconPosition="left"
           className="columns-selector"
-          onClick={() => toggleModal()}
+          onClick={toggleModal}
           title={__('Manage columns')}
         >
           <span className="columns-selector-text">{__('Manage columns')}</span>

diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/index.js b/webpack/assets/javascripts/react_app/components/HostsIndex/index.js
@@ -58,6 +58,10 @@ export const ForemanHostsIndexActionsBarContext = forceSingleton(
 );
 
 const HostsIndex = () => {
+  const [allColumns, setAllColumns] = useState(
+    getColumnData({ tableName: 'hosts' })
+  );
+  const [allJsLoaded, setAllJsLoaded] = useState(false);
   const {
     searchParam: urlSearchQuery = '',
     page: urlPage,
@@ -92,7 +96,16 @@ const HostsIndex = () => {
     setAPIOptions: response.setAPIOptions,
   });
 
-  const allColumns = getColumnData({ tableName: 'hosts' });
+  useEffect(() => {
+    const handleLoadJS = () => {
+      setAllColumns(getColumnData({ tableName: 'hosts' }));
+      setAllJsLoaded(true);
+    };
+    document.addEventListener('loadJS', handleLoadJS);
+    return () => {
+      document.removeEventListener('loadJS', handleLoadJS);
+    };
+  }, [setAllColumns]);
   const {
     hasPreference,
     columns: userColumns,
@@ -200,12 +213,12 @@ const HostsIndex = () => {
   ];
 
   const registeredItems = useSelector(selectKebabItems, shallowEqual);
-  const pluginToolbarItems = (
+  const pluginToolbarItems = jsReady => (
     <ForemanHostsIndexActionsBarContext.Provider
       value={{ ...selectAllOptions, fetchBulkParams }}
     >
       <ActionKebab items={dropdownItems.concat(registeredItems)} />
-      <ColumnSelector data={columnSelectData} />
+      {jsReady && <ColumnSelector data={columnSelectData} />}
     </ForemanHostsIndexActionsBarContext.Provider>
   );
 
@@ -305,7 +318,7 @@ const HostsIndex = () => {
       controller="hosts"
       creatable={false}
       replacementResponse={response}
-      customToolbarItems={pluginToolbarItems}
+      customToolbarItems={pluginToolbarItems(allJsLoaded)}
       selectionToolbar={selectionToolbar}
       updateSearchQuery={updateSearchQuery}
     >