From c154f031d260f0656a4d7fc6776b25ce1b3672d4 Mon Sep 17 00:00:00 2001
From: Andres Martinez Gotor <andres@bitnami.com>
Date: Wed, 8 Apr 2020 16:56:03 +0200
Subject: [PATCH] Include the Categories filter even if the result is empty

---
 .../OperatorList/OperatorList.test.tsx        |  1 +
 .../components/OperatorList/OperatorList.tsx  | 71 ++++++++++---------
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/dashboard/src/components/OperatorList/OperatorList.test.tsx b/dashboard/src/components/OperatorList/OperatorList.test.tsx
index 69cae1b46af..4ff3f5b8148 100644
--- a/dashboard/src/components/OperatorList/OperatorList.test.tsx
+++ b/dashboard/src/components/OperatorList/OperatorList.test.tsx
@@ -234,6 +234,7 @@ describe("filter operators", () => {
         .dive()
         .text(),
     ).toMatch("No Operator found");
+    expect(wrapper.find(".horizontal-column")).toExist();
   });
 
   it("filters by category", () => {
diff --git a/dashboard/src/components/OperatorList/OperatorList.tsx b/dashboard/src/components/OperatorList/OperatorList.tsx
index 146c978d962..ee15b2abc5e 100644
--- a/dashboard/src/components/OperatorList/OperatorList.tsx
+++ b/dashboard/src/components/OperatorList/OperatorList.tsx
@@ -197,9 +197,6 @@ class OperatorList extends React.Component<IOperatorListProps, IOperatorListStat
       }
       return true;
     });
-    if (filteredOperators.length === 0) {
-      return <p>No Operator found</p>;
-    }
     filteredOperators.forEach(operator => {
       if (csvNames.some(csvName => csvName === getDefaultChannel(operator.status).currentCSV)) {
         installedOperators.push(operator);
@@ -249,34 +246,28 @@ class OperatorList extends React.Component<IOperatorListProps, IOperatorListStat
         </div>
         <div className="col-10">
           <div className="padding-l-normal">
-            {installedOperators.length > 0 && (
-              <>
-                <h3>Installed</h3>
-                <CardGrid>
-                  {installedOperators.map(operator => {
-                    return (
-                      <InfoCard
-                        key={operator.metadata.name}
-                        link={app.operators.view(this.props.namespace, operator.metadata.name)}
-                        title={operator.metadata.name}
-                        icon={api.operators.operatorIcon(
-                          this.props.namespace,
-                          operator.metadata.name,
-                        )}
-                        info={`v${operator.status.channels[0].currentCSVDesc.version}`}
-                        tag1Content={
-                          operator.status.channels[0].currentCSVDesc.annotations.categories
-                        }
-                        tag2Content={operator.status.provider.name}
-                      />
-                    );
-                  })}
-                </CardGrid>
-              </>
+            {filteredOperators.length === 0 ? (
+              <p>No Operator found</p>
+            ) : (
+              this.renderCardGrid(installedOperators, availableOperators)
             )}
-            <h3>Available Operators</h3>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private renderCardGrid(
+    installedOperators: IPackageManifest[],
+    availableOperators: IPackageManifest[],
+  ) {
+    return (
+      <>
+        {installedOperators.length > 0 && (
+          <>
+            <h3>Installed</h3>
             <CardGrid>
-              {availableOperators.map(operator => {
+              {installedOperators.map(operator => {
                 return (
                   <InfoCard
                     key={operator.metadata.name}
@@ -290,9 +281,25 @@ class OperatorList extends React.Component<IOperatorListProps, IOperatorListStat
                 );
               })}
             </CardGrid>
-          </div>
-        </div>
-      </div>
+          </>
+        )}
+        <h3>Available Operators</h3>
+        <CardGrid>
+          {availableOperators.map(operator => {
+            return (
+              <InfoCard
+                key={operator.metadata.name}
+                link={app.operators.view(this.props.namespace, operator.metadata.name)}
+                title={operator.metadata.name}
+                icon={api.operators.operatorIcon(this.props.namespace, operator.metadata.name)}
+                info={`v${operator.status.channels[0].currentCSVDesc.version}`}
+                tag1Content={operator.status.channels[0].currentCSVDesc.annotations.categories}
+                tag2Content={operator.status.provider.name}
+              />
+            );
+          })}
+        </CardGrid>
+      </>
     );
   }