App Dashboard V2 polish update (#3982)

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

@@ -134,7 +134,7 @@ const AddOnDashboard: React.FC<Props> = ({
     const cluster = currentCluster?.name;
     const route = `/applications/${cluster}/${x.namespace}/${x.name}`;
     const newParams = {
-      // @ts-ignore
+      // @ts-expect-error
       project_id: params.project_id,
       closeChartRedirectUrl: '/addons',
     };
@@ -157,7 +157,7 @@ const AddOnDashboard: React.FC<Props> = ({
         <ClusterProvisioningPlaceholder />
       ) : (
 
-        (addOns.length === 0) ? (
+        (addOns.length === 0 || (filteredAddOns.length === 0 && searchValue === "")) ? (
 
           isLoading ?
             (<Loading offset="-150px" />) : (

dashboard/src/main/home/app-dashboard/apps/AppGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { AppRevisionWithSource } from "./types";
+import { type AppRevisionWithSource } from "./types";
 import { search } from "shared/search";
 import _ from "lodash";
 import { match } from "ts-pattern";
@@ -81,7 +81,7 @@ const AppGrid: React.FC<AppGridProps> = ({ apps, searchValue, view, sort }) => {
   }, [appsWithProto, searchValue, sort]);
 
   const renderIcon = (bp: string[], size?: string) => {
-    var src = box;
+    let src = box;
     if (bp.length) {
       const [_, name] = bp[0].split("/");
       switch (name) {
@@ -118,7 +118,7 @@ const AppGrid: React.FC<AppGridProps> = ({ apps, searchValue, view, sort }) => {
         {source.repo_name ? (
           <Container row>
             <SmallIcon opacity="0.6" src={github} />
-            <Text size={13} color="#ffffff44">
+            <Text truncate={true} size={13} color="#ffffff44">
               {source.repo_name}
             </Text>
           </Container>

dashboard/src/main/home/app-dashboard/apps/Apps.tsx

@@ -31,10 +31,11 @@ import { z } from "zod";
 import { useDeploymentTarget } from "shared/DeploymentTargetContext";
 import DeleteEnvModal from "main/home/cluster-dashboard/preview-environments/v2/DeleteEnvModal";
 import { useHistory } from "react-router";
+import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
 
 type Props = {};
 
-const Apps: React.FC<Props> = ({}) => {
+const Apps: React.FC<Props> = ({ }) => {
   const { currentProject, currentCluster } = useContext(Context);
   const { updateAppStep } = useAppAnalytics();
   const { currentDeploymentTarget } = useDeploymentTarget();
@@ -178,28 +179,21 @@ const Apps: React.FC<Props> = ({}) => {
 
     if (apps.length === 0) {
       return (
-        <Fieldset>
-          <CentralContainer>
-            <Text size={16}>No apps have been deployed yet.</Text>
-            <Spacer y={1} />
-
-            <Text color={"helper"}>Get started by deploying your app.</Text>
-            <Spacer y={0.5} />
-            <PorterLink to="/apps/new/app">
-              <Button
-                onClick={async () =>
-                  updateAppStep({ step: "stack-launch-start" })
-                }
-                height="35px"
-              >
-                Deploy app <Spacer inline x={1} />{" "}
-                <i className="material-icons" style={{ fontSize: "18px" }}>
-                  east
-                </i>
-              </Button>
-            </PorterLink>
-          </CentralContainer>
-        </Fieldset>
+        <DashboardPlaceholder>
+          <Text size={16}>
+            No apps have been deployed yet
+          </Text>
+          <Spacer y={0.5} />
+          <Text color={"helper"}>
+            Get started by deploying your app.
+          </Text>
+          <Spacer y={1} />
+          <PorterLink to="/apps/new/app">
+            <Button alt onClick={async () => { await updateAppStep({ step: "stack-launch-start" }); }} height="35px">
+              Deploy app <Spacer inline x={1} /> <i className="material-icons" style={{ fontSize: '18px' }}>east</i>
+            </Button>
+          </PorterLink>
+        </DashboardPlaceholder>
       );
     }
 
@@ -283,8 +277,7 @@ const Apps: React.FC<Props> = ({}) => {
           ) : (
             <PorterLink to="/apps/new/app">
               <Button
-                onClick={async () =>
-                  updateAppStep({ step: "stack-launch-start" })
+                onClick={async () => { await updateAppStep({ step: "stack-launch-start" }); }
                 }
                 height="30px"
                 width="160px"
@@ -319,7 +312,7 @@ const Apps: React.FC<Props> = ({}) => {
       <Spacer y={5} />
       {showDeleteEnvModal && (
         <DeleteEnvModal
-          closeModal={() => setShowDeleteEnvModal(false)}
+          closeModal={() => { setShowDeleteEnvModal(false); }}
           deleteEnv={deletePreviewEnv}
           loading={envDeleting}
         />