Merge pull request #98 from projectsveltos/empty-profiles

Safouene1 · web-flow · commit db1fb3476ecd · 2025-05-29T19:37:10.000+01:00
add empty display when profiles are empty
diff --git a/SECURITY.md b/SECURITY.md
@@ -4,25 +4,26 @@
 
 The following table outlines the versions of the project that are currently supported with security updates:
 
-| Version | Supported          |
-|---------|--------------------|
-| All     | ✅                 |
+| Version | Supported |
+| ------- | --------- |
+| All     | ✅        |
 
 ## Reporting a Vulnerability
 
 If you discover a security vulnerability, please follow the steps below to report it responsibly:
 
 1. **Do not disclose publicly**: Avoid sharing the vulnerability in public forums, issues, or pull requests.
 2. **Contact us**: Send an email to [support@projectsveltos.io](mailto:support@projectsveltos.io) with the details of the vulnerability, including:
-    - A description of the issue.
-    - Steps to reproduce the vulnerability.
-    - Any potential impact or exploit scenarios.
+   - A description of the issue.
+   - Steps to reproduce the vulnerability.
+   - Any potential impact or exploit scenarios.
 3. **Response time**: We will acknowledge receipt of your report within 48 hours and provide a timeline for addressing the issue.
 4. **Credit**: If you wish, we will credit you for the discovery once the issue is resolved.
 
 ## Security Best Practices
 
 To ensure the security of your deployment, follow these best practices:
+
 - Always use the latest stable version of the project.
 - Regularly review and update dependencies.
 - Restrict access to sensitive resources and configurations.
@@ -32,4 +33,4 @@ To ensure the security of your deployment, follow these best practices:
 
 We are committed to transparency and will publicly disclose vulnerabilities after they have been resolved and patches have been made available. Details will be shared in the release notes or security advisories.
 
-For more information, refer to the [documentation](https://projectsveltos.github.io/sveltos/).
+For more information, refer to the [documentation](https://projectsveltos.github.io/sveltos/).
diff --git a/src/hooks/NavigateWithParams.tsx b/src/hooks/NavigateWithParams.tsx
@@ -1,11 +1,9 @@
-
 import { Navigate, useLocation } from "react-router-dom";
 const PreserveSearchNavigate = ({ to }: { to: string }) => {
   const location = useLocation();
   const searchParams = location.search; // Get current search params
 
-
   return <Navigate to={`${to}${searchParams}`} />;
 };
 
-export default PreserveSearchNavigate;
+export default PreserveSearchNavigate;
diff --git a/src/lib/components/ui/emptyData.tsx b/src/lib/components/ui/emptyData.tsx
@@ -24,12 +24,14 @@ export const EmptyData = ({
             <h2 className="text-center  text-base font-semibold leading-relaxed pb-1">
               There’s no {name} found.
             </h2>
-            <p className="text-base  text-xs font-normal leading-snug pb-4">
+            <div className="text-base font-normal leading-snug pb-4">
               <ul>
+                {isFiltered && (
                 <li>Try changing the filter criteria or clear the filter</li>
+                  )}
                 <li>Try refreshing the page or check back later</li>
               </ul>
-            </p>
+            </div>
             <div className="flex gap-3">
               {isFiltered && (
                 <Button onClick={clearFilter}>
diff --git a/src/lib/components/ui/failed-flag.tsx b/src/lib/components/ui/failed-flag.tsx
@@ -10,8 +10,7 @@ import {
   TooltipTrigger,
 } from "@/lib/components/ui/tooltip";
 
-
-export const FailedFlag = ({ msg }: { msg?: string | undefined | null}) => {
+export const FailedFlag = ({ msg }: { msg?: string | undefined | null }) => {
   return (
     <>
       <Tooltip>
@@ -21,7 +20,6 @@ export const FailedFlag = ({ msg }: { msg?: string | undefined | null}) => {
               <Icons.k8s className={"h-6 w-6 animate-pulse"} />
             </AvatarRectFallback>
           </AvatarRectangle>
-
         </TooltipTrigger>
         <TooltipContent>
           <div className={"inline-flex items-baseline"}>
@@ -36,4 +34,4 @@ export const FailedFlag = ({ msg }: { msg?: string | undefined | null}) => {
       </Tooltip>
     </>
   );
-};
+};
diff --git a/src/modules/clusters/cluster-information/ClusterInfoById.tsx b/src/modules/clusters/cluster-information/ClusterInfoById.tsx
@@ -44,7 +44,9 @@ export function ClusterInfoById() {
           <ClusterHeading
             name={InfoQuery.data.managedClusters[0].name}
             ready={InfoQuery.data.managedClusters[0]?.clusterInfo.ready}
-            failureMsg={InfoQuery.data.managedClusters[0]?.clusterInfo.failureMessage}
+            failureMsg={
+              InfoQuery.data.managedClusters[0]?.clusterInfo.failureMessage
+            }
             namespace={InfoQuery.data.managedClusters[0].namespace}
             version={InfoQuery.data.managedClusters[0]?.clusterInfo.version}
           />
diff --git a/src/modules/clusters/cluster-information/components/clusterHeading.tsx b/src/modules/clusters/cluster-information/components/clusterHeading.tsx
@@ -20,7 +20,7 @@ export const ClusterHeading = ({
   ready,
   hideDetails,
   namespace,
-  failureMsg
+  failureMsg,
 }: ClusterHeadingProps) => {
   const navigate = useNavigate();
   return (
@@ -55,13 +55,11 @@ export const ClusterHeading = ({
         {!hideDetails && (
           <Badge
             variant="outline"
-            className={`ml-auto sm:ml-0 ${failureMsg ?"bg-red-500": "bg-main-500" }  flex items-center text-white`}
+            className={`ml-auto sm:ml-0 ${failureMsg ? "bg-red-500" : "bg-main-500"}  flex items-center text-white`}
           >
             <Icons.k8s className="w-4 h-4 mr-1" />
-            {failureMsg ?"Unhealthy": "Healthy" }
+            {failureMsg ? "Unhealthy" : "Healthy"}
           </Badge>
-
-
         )}
         {!hideDetails && (
           <Badge
diff --git a/src/modules/clusters/clusters-list/components/ClusterCard.tsx b/src/modules/clusters/clusters-list/components/ClusterCard.tsx
@@ -29,7 +29,6 @@ export const ClusterCard = ({
   labels,
   onClick,
   failureMsg,
-
 }: ClusterCardProps) => {
   const labelEntries = Object.entries(labels || {});
   const displayEntries = labelEntries.slice(0, appConfig.maxBadges);
@@ -43,7 +42,7 @@ export const ClusterCard = ({
         onClick={onClick}
       >
         <div className=" flex items-center space-x-4 rounded-md  p-4">
-          {failureMsg ?<FailedFlag msg={failureMsg} />: <ReadyFlag />  }
+          {failureMsg ? <FailedFlag msg={failureMsg} /> : <ReadyFlag />}
           <div className="flex-1 space-y-1">
             <p className="text-sm font-medium leading-none">
               {name}
diff --git a/src/modules/profiles/profile-information/ProfileInformation.tsx b/src/modules/profiles/profile-information/ProfileInformation.tsx
@@ -7,7 +7,7 @@ import { useParams } from "react-router-dom";
 import { LoadingProfile } from "@/modules/profiles/profile-information/components/ProfileInfo/LoadingProfile";
 
 export function ProfileInformation() {
-  const { namespace= "", name = "", kind = "" } = useParams();
+  const { namespace = "", name = "", kind = "" } = useParams();
 
   const { data, isLoading, isSuccess } = useProfileInfo(namespace, name, kind);
   return (
@@ -27,7 +27,7 @@ export function ProfileInformation() {
             </div>
             <div className="col-span-6">
               <ProfileSpecCard spec={data.spec} />
-              <MatchingClusterTable data={data?.matchingClusters??[]} />
+              <MatchingClusterTable data={data?.matchingClusters ?? []} />
             </div>
           </div>
         </div>
diff --git a/src/modules/profiles/profile-information/components/ClusterTable/MatchingClusterTable.tsx b/src/modules/profiles/profile-information/components/ClusterTable/MatchingClusterTable.tsx
@@ -22,8 +22,8 @@ import { MatchingCluster } from "@/types/profile.types";
 import { FailureMessage } from "@/lib/components/ui/failureMessage";
 
 export default function MatchingClusterTable({
-                                               data,
-                                             }: {
+  data,
+}: {
   data: MatchingCluster[];
 }) {
   const [openAccordions, setOpenAccordions] = useState<number[]>([]);
@@ -47,14 +47,21 @@ export default function MatchingClusterTable({
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <ScrollArea className={data.length === 0?"":" h-96"+"rounded-md border p-4"}>
+        <ScrollArea
+          className={data.length === 0 ? "" : " h-96" + "rounded-md border p-4"}
+        >
           {data.length === 0 ? (
-            <span className={"flex flex-col items-center justify-center h-full mt-4"}>
+            <span
+              className={
+                "flex flex-col items-center justify-center h-full mt-4"
+              }
+            >
               <Archive className="h-12 w-12 text-muted-foreground" />
-            <div className="flex justify-center items-center h-full">
-
-              <p className="text-muted-foreground mt-2">No matching clusters found.</p>
-            </div>
+              <div className="flex justify-center items-center h-full">
+                <p className="text-muted-foreground mt-2">
+                  No matching clusters found.
+                </p>
+              </div>
             </span>
           ) : (
             <Table>
@@ -166,4 +173,4 @@ export default function MatchingClusterTable({
       </CardContent>
     </Card>
   );
-}
+}
diff --git a/src/modules/profiles/profile-information/components/ProfileRelations/ProfileRelations.tsx b/src/modules/profiles/profile-information/components/ProfileRelations/ProfileRelations.tsx
@@ -35,8 +35,8 @@ export function ProfileRelations({
   profile,
 }: {
   profile: {
-    kind: string,
-    namespace: string,
+    kind: string;
+    namespace: string;
     name: string;
     apiVersion?: string;
     dependencies: Dependency[];
diff --git a/src/modules/profiles/profile-information/hooks/useProfileInfo.ts b/src/modules/profiles/profile-information/hooks/useProfileInfo.ts
@@ -4,7 +4,11 @@ import { API_ENDPOINTS } from "@/api-client/endpoints";
 import { ProfileInfo } from "@/types/profile.types";
 import { useMemo } from "react";
 
-const fetchProfileInfo = async (namespace: string, name: string, kind: string) => {
+const fetchProfileInfo = async (
+  namespace: string,
+  name: string,
+  kind: string,
+) => {
   const { data } = await client.get(API_ENDPOINTS.PROFILE, {
     params: {
       namespace,
@@ -20,7 +24,10 @@ const useProfileInfo = (
   name: string,
   kind: string,
 ): UseQueryResult<ProfileInfo, Error> => {
-  const queryKey = useMemo(() => ["profile-info", namespace, name, kind], [namespace, name, kind]);
+  const queryKey = useMemo(
+    () => ["profile-info", namespace, name, kind],
+    [namespace, name, kind],
+  );
   return useQuery(queryKey, () => fetchProfileInfo(namespace, name, kind), {
     keepPreviousData: false,
   });
diff --git a/src/modules/profiles/profiles-list/ProfilePage.tsx b/src/modules/profiles/profiles-list/ProfilePage.tsx
@@ -0,0 +1,14 @@
+import { PageHeading } from "@/lib/components/ui/PageHeading";
+import { ProfileList } from "@/modules/profiles/profiles-list/components/list/ProfileList";
+
+export const ProfilePage = () => {
+  return <>
+    <PageHeading
+      title={"Profiles"}
+      description={
+        "You can view all tiers , profiles and visualize dependents and dependencies "
+      }
+    />
+    <ProfileList/>
+  </>;
+};
diff --git a/src/modules/profiles/profiles-list/components/list/ProfileList.tsx b/src/modules/profiles/profiles-list/components/list/ProfileList.tsx
@@ -1,21 +1,19 @@
 import { TierCard } from "@/modules/profiles/profiles-list/components/tier/TierCard";
-import { PageHeading } from "@/lib/components/ui/PageHeading";
 import useProfiles from "@/modules/profiles/profiles-list/hooks/useProfiles";
 import { TierData } from "@/types/profile.types";
 import { ErrorQuery } from "@/lib/components/ui/errorQuery";
 import { LoadingTier } from "@/modules/profiles/profiles-list/components/tier/LoadingTier";
+import { EmptyData } from "@/lib/components/ui/emptyData";
 
 export function ProfileList() {
   const { data, isSuccess, isLoading, isError, error, isPreviousData } =
     useProfiles();
+  if ( !data  || data?.length <= 0 ) {
+    return <EmptyData name={"profiles"} isFiltered={false} />;
+  }
   return (
     <>
-      <PageHeading
-        title={"Profiles"}
-        description={
-          "You can view all tiers , profiles and visualize dependents and dependencies "
-        }
-      />
+
       {(isLoading || isPreviousData) && <LoadingTier />}
       {isError && <ErrorQuery name={"profiles"} error={error} />}
       {isSuccess && data && (
diff --git a/src/modules/profiles/profiles-list/components/profile/ProfileCard/ProfileCard.tsx b/src/modules/profiles/profiles-list/components/profile/ProfileCard/ProfileCard.tsx
@@ -7,7 +7,9 @@ export function ProfileCard({ profile }: { profile: Profile }) {
   const navigate = useNavigate();
   function handleNavigation() {
     if (profile.namespace) {
-      navigate(`/sveltos/profile/${profile.namespace}/${profile.name}/${profile.kind}`);
+      navigate(
+        `/sveltos/profile/${profile.namespace}/${profile.name}/${profile.kind}`,
+      );
     } else {
       navigate(`/sveltos/profile/${profile.name}/${profile.kind}`);
     }
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -7,14 +7,15 @@ import ClustersPage from "@/modules/clusters/clusters-list/ClustersPage";
 import { appConfig } from "@/config/app";
 import { ClusterInfoById } from "@/modules/clusters/cluster-information/ClusterInfoById";
 import { Authentication } from "@/modules/authentication/Authentication";
-import { ProfileList } from "@/modules/profiles/profiles-list/ProfileList";
 import { ProfileInformation } from "@/modules/profiles/profile-information/ProfileInformation";
 import { Logout } from "@/modules/authentication/Logout";
 import PreserveSearchNavigate from "@/hooks/NavigateWithParams";
+import { ProfilePage } from "@/modules/profiles/profiles-list/ProfilePage";
 
 const defaultTab = appConfig.defaultType;
 const defaultPage = appConfig.defaultPage;
 
+
 export const routes: RouteObject[] = [
   {
     path: "/",
@@ -36,12 +37,14 @@ export const routes: RouteObject[] = [
       {
         path: "/sveltos",
         element: (
-          <PreserveSearchNavigate to={`/sveltos/clusters/${defaultTab}/${defaultPage}`} />
+          <PreserveSearchNavigate
+            to={`/sveltos/clusters/${defaultTab}/${defaultPage}`}
+          />
         ),
       },
       {
         path: "/sveltos/profiles",
-        element: <ProfileList />,
+        element: <ProfilePage />,
       },
       {
         path: "/sveltos/profile/:namespace/:name/:kind",
@@ -54,7 +57,9 @@ export const routes: RouteObject[] = [
       {
         path: "/sveltos/clusters",
         element: (
-          <PreserveSearchNavigate to={`/sveltos/clusters/${defaultTab}/${defaultPage}`} />
+          <PreserveSearchNavigate
+            to={`/sveltos/clusters/${defaultTab}/${defaultPage}`}
+          />
         ),
       },
       {
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,15 +1,16 @@
 import path from "path";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
-import dotenv from "dotenv";
-const { VITE_BACKEND_PORT, VITE_BACKEND_NAME, VITE_BACKEND_PROTOCOL } =
-  process.env;
-const protocol =
-  VITE_BACKEND_PROTOCOL === "https" || VITE_BACKEND_PROTOCOL === "http"
-    ? VITE_BACKEND_PROTOCOL
-    : "http";
-const VITE_BACKEND_URL = `${protocol}://${VITE_BACKEND_NAME}:${VITE_BACKEND_PORT}`;
+import dotenv from "dotenv"
 export default defineConfig(({}) => {
+
+  const { VITE_BACKEND_PORT, VITE_BACKEND_NAME, VITE_BACKEND_PROTOCOL } =
+    process.env;
+  const protocol =
+    VITE_BACKEND_PROTOCOL === "https" || VITE_BACKEND_PROTOCOL === "http"
+      ? VITE_BACKEND_PROTOCOL
+      : "http";
+  const VITE_BACKEND_URL = `${protocol}://${VITE_BACKEND_NAME}:${VITE_BACKEND_PORT}`;
   dotenv.config();
 
   return {
