From e7bbda5c876e9967b1dced0f4debd2f0d7ff8bf5 Mon Sep 17 00:00:00 2001
From: Gang Li <ligangty@users.noreply.github.com>
Date: Fri, 5 Jan 2024 10:31:49 +0800
Subject: [PATCH] Change Capabilities section in StoreListingWidget to accept
 store instead of options

---
 .../content/common/StoreListingWidget.jsx     | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/main/webui/src/app/components/content/common/StoreListingWidget.jsx b/src/main/webui/src/app/components/content/common/StoreListingWidget.jsx
index 7ee6d75..737acd5 100644
--- a/src/main/webui/src/app/components/content/common/StoreListingWidget.jsx
+++ b/src/main/webui/src/app/components/content/common/StoreListingWidget.jsx
@@ -29,17 +29,24 @@ LocalURLSection.propTypes = {
 };
 
 // For options, see AppUtils.remoteOptions|hostedOptions
-const CapabilitiesSection = ({options}) => <div className="left-half">
-    <label>Capabilities:</label>{' '}
-    {
-      options.map(option => <div key={option.title} className="options">
-          <span className="key">{option.icon} </span>
-        </div>)
-    }
-  </div>;
+const CapabilitiesSection = ({store}) => {
+  if(store.type==="remote" || store.type==="hosted"){
+    const options = Utils.storeOptions(store);
+    const styleClass = store.type==="remote"?"left-half":"right-half";
+    return <div className={styleClass}>
+      <label>Capabilities:</label>{' '}
+      {
+        options.map(option => <div key={option.title} className="options">
+            <span className="key">{option.icon} </span>
+          </div>)
+      }
+    </div>;
+  }
+  return <Fragment/>;
+};
 
 CapabilitiesSection.propTypes = {
-  options: PropTypes.array
+  store: PropTypes.object
 };
 
 const StoreNameSection = ({store, storeClass}) => <div className="fieldset-caption">
@@ -75,10 +82,11 @@ const StoreListingWidget = ({storeList, disableMap, storeType}) => {
                           <a href={store.url} target="_new">{store.url}</a>
                         </div>
                       }
+                      { storeType === "hosted" && <CapabilitiesSection store={store} />}
                     </div>
-                    <div>
-                      <CapabilitiesSection options={Utils.storeOptions(store)} />
-                    </div>
+                    {
+                      storeType === "remote" && <div><CapabilitiesSection store={store} /></div>
+                    }
                     <div className="description field"><span>{store.description}</span></div>
                   </div>
                 </div>