[POR-1630] AddOns/ Apps UI-fix (#3510)

dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx

@@ -155,8 +155,7 @@ const AddOnDashboard: React.FC<Props> = ({
         <ClusterProvisioningPlaceholder />
       ) : (
 
-
-        (filteredAddOns.length === 0) ? (
+        (addOns.length === 0) ? (
 
           isLoading ?
             (<Loading offset="-150px" />) : (
@@ -209,7 +208,14 @@ const AddOnDashboard: React.FC<Props> = ({
             </Container>
             <Spacer y={1} />
 
-            {isLoading ? <Loading offset="-150px" /> : view === "grid" ? (
+            {filteredAddOns.length === 0 ? (
+              <Fieldset>
+                <Container row>
+                  <PlaceholderIcon src={notFound} />
+                  <Text color="helper">No matching add-ons were found.</Text>
+                </Container>
+              </Fieldset>
+            ) : (isLoading ? <Loading offset="-150px" /> : view === "grid" ? (
               <GridList>
                 {(filteredAddOns ?? []).map((app: any, i: number) => {
                   return (
@@ -261,6 +267,7 @@ const AddOnDashboard: React.FC<Props> = ({
                   );
                 })}
               </List>
+            )
             )}
           </>
         ))}

dashboard/src/main/home/add-on-dashboard/NewAddOnFlow.tsx

@@ -192,11 +192,12 @@ const NewAddOnFlow: React.FC<Props> = ({
                           <div>
                             <Text color="helper">For developer productivity.</Text>
                           </div>
+                          <TemplateList
+                            templates={appTemplates} // This is where you provide only APP templates
+                            setCurrentTemplate={(x) => setCurrentTemplate(x)}
+                          />
                         </>}
-                      <TemplateList
-                        templates={appTemplates} // This is where you provide only APP templates
-                        setCurrentTemplate={(x) => setCurrentTemplate(x)}
-                      />
+
                       {dataStoreTemplates?.length > 0 &&
                         <>
                           <div>
@@ -205,11 +206,12 @@ const NewAddOnFlow: React.FC<Props> = ({
                           <div>
                             <Text color="helper">Pre-production datastores are not highly available and use ephemeral storage.</Text>
                           </div>
+                          <TemplateList
+                            templates={dataStoreTemplates} // This is where you provide only DATA_STORE templates
+                            setCurrentTemplate={(x) => setCurrentTemplate(x)}
+                          />
                         </>}
-                      <TemplateList
-                        templates={dataStoreTemplates} // This is where you provide only DATA_STORE templates
-                        setCurrentTemplate={(x) => setCurrentTemplate(x)}
-                      />
+
 
                       {filteredTemplates?.length > 0 && (currentProject?.full_add_ons || user.isPorterUser) &&
                         <>

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -215,7 +215,7 @@ const AppDashboard: React.FC<Props> = ({ }) => {
       {currentCluster?.status === "UPDATING_UNAVAILABLE" ? (
         <ClusterProvisioningPlaceholder />
       ) : (
-        filteredApps.length === 0 ? (
+        apps.length === 0 ? (
           isLoading ?
             (<Loading offset="-150px" />) : (
               <Fieldset>
@@ -283,7 +283,14 @@ const AppDashboard: React.FC<Props> = ({ }) => {
             </Container>
             <Spacer y={1} />
 
-            {isLoading ? (
+            {filteredApps.length === 0 ? (
+              <Fieldset>
+                <Container row>
+                  <PlaceholderIcon src={notFound} />
+                  <Text color="helper">No matching apps were found.</Text>
+                </Container>
+              </Fieldset>
+            ) : (isLoading ? (
               <Loading offset="-150px" />
             ) : view === "grid" ? (
               <GridList>
@@ -342,7 +349,7 @@ const AppDashboard: React.FC<Props> = ({ }) => {
                   }
                 })}
               </List>
-            )}
+            ))}
           </>
         )
       )