From 58e8f94433d9e2fc267dec775eb79165a236e70f Mon Sep 17 00:00:00 2001
From: Jeremy Lenz <jlenz@redhat.com>
Date: Tue, 11 Jun 2024 09:18:09 -0400
Subject: [PATCH] Fixes #37553 - Wait for all plugin JS to load before
 rendering ColumnSelector

---
 .../ColumnSelector/ColumnSelector.js          |  2 +-
 .../react_app/components/HostsIndex/index.js  | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js b/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js
index ea18b0bf9c1..3fa87496f63 100644
--- 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
index afff6a49867..ca806bfc8d4 100644
--- 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}
     >