fix issues and update README.md

Dockerfile

@@ -20,7 +20,9 @@ RUN  apk add --update nodejs npm
 # VITE arguments
 ARG VITE_BACKEND_PORT
 ARG VITE_BACKEND_NAME
+ARG VITE_APP_BACKEND_URL
 ENV VITE_BACKEND_PORT=${VITE_BACKEND_PORT}
 ENV VITE_BACKEND_NAME=${VITE_BACKEND_PORT}
+ENV VITE_APP_BACKEND_URL=${VITE_APP_BACKEND_URL}
 EXPOSE 5173
 CMD ["npm", "run", "dev"]

README.md

@@ -34,10 +34,13 @@ the default backend port is 9000
 
 `set VITE_BACKEND_PORT=8000`
 
-### Configure the backend port
+### Configure the backend url (optional)
 
-`set VITE_BACKEND_PORT={port}` before running `npm run dev`
-the default backend port is 9000
+if sveltos backend is hosted on a different host, you can set the url by running the following command:
+
+`set VITE_APP_BACKEND_URL={url}` before running `npm run dev`
+
+there is no default url.
 
 ##### Example :
 

src/components/ui/errorQuery.tsx

@@ -1,11 +1,8 @@
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-
-import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
-import { AlertTriangleIcon, RefreshCcw } from "lucide-react";
+import { AlertTriangleIcon } from "lucide-react";
 import { appConfig } from "@/config/app";
-import { useQueryClient } from "react-query";
 import { RefreshButton } from "@/components/ui/RefreshButton";
 
 type ErrorFetchingProps = {

src/modules/clusters/cluster-information/components/AddonsTable/AddonsTable.tsx

@@ -193,7 +193,7 @@ export const AddonsTable = ({
                     </TableCell>
                     <TableCell
                       content={row.profileName}
-                      className="hidden md:table-cell"
+                      className="hidden md:table-cell break-words whitespace-normal"
                     >
                       {row.profileType && (
                         <div>

src/modules/clusters/clusters-list/components/ClusterList.tsx

@@ -1,10 +1,10 @@
-import {ClusterCard} from "@/modules/clusters/clusters-list/components/ClusterCard";
+import { ClusterCard } from "@/modules/clusters/clusters-list/components/ClusterCard";
 
-import {useNavigate, useParams} from "react-router-dom";
-import {ClusterInfoType, ClusterListResponse} from "@/types/cluster.types";
-import {EmptyData} from "@/components/ui/emptyData";
-import {usePagination} from "@/hooks/usePagination";
-import {FC} from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ClusterInfoType, ClusterListResponse } from "@/types/cluster.types";
+import { EmptyData } from "@/components/ui/emptyData";
+import { usePagination } from "@/hooks/usePagination";
+import { FC } from "react";
 
 type ClusterListProps = {
   data: ClusterListResponse;

vite.config.ts

@@ -6,8 +6,10 @@ const basenameProd = "/";
 
 export default defineConfig(({ command }) => {
   dotenv.config();
-  const { VITE_BACKEND_PORT,VITE_BACKEND_NAME } = process.env;
-  const VITE_BACKEND_URL = `http://${VITE_BACKEND_NAME}:${VITE_BACKEND_PORT}`;
+  const { VITE_BACKEND_PORT, VITE_BACKEND_NAME, VITE_APP_BACKEND_URL } =
+    process.env;
+  const VITE_BACKEND_URL =
+    VITE_APP_BACKEND_URL ?? `http://${VITE_BACKEND_NAME}:${VITE_BACKEND_PORT}`;
   return {
     plugins: [react()],
     resolve: {