chore(ui): upgrade UI node dependencies

ui/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18 AS build
+FROM node:20 AS build
 WORKDIR /app
 COPY package.json yarn.lock ./
 RUN yarn install --frozen-lockfile

ui/README.md

@@ -8,7 +8,7 @@ Web UI for [Burrito](https://github.com/padok-team/burrito).
 
 1. Install [NodeJS](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com).
 2. Run `yarn install` to install local prerequisites.
-3. Run `yarn start` to launch the dev UI server.
+3. Run `yarn dev` to launch the dev UI server.
 4. Run `yarn build` to bundle static resources into the `./dist` directory.
 
 ## Build Docker production image

ui/package.json

@@ -10,14 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.8.3",
     "@tanstack/react-table": "^8.10.7",
     "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
     "react-tooltip": "^5.21.6",
-    "tailwind-merge": "^1.14.0"
+    "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

ui/src/components/cards/Card.tsx

@@ -151,7 +151,7 @@ const Card: React.FC<CardProps> = ({
         ))}
       </div>
       <Tooltip
-        className="!opacity-100"
+        opacity={1}
         id="card-tooltip"
         variant={variant === "light" ? "dark" : "light"}
       />

ui/src/components/tables/Table.tsx

@@ -286,7 +286,7 @@ const Table: React.FC<TableProps> = ({
         </tbody>
       </table>
       <Tooltip
-        className="!opacity-100"
+        opacity={1}
         id="table-tooltip"
         variant={variant === "light" ? "dark" : "light"}
       />

ui/src/pages/layers/Layers.tsx

@@ -31,7 +31,9 @@ const Layers: React.FC = () => {
   const [repositoryFilter, setRepositoryFilter] = useState<string[]>([]);
   const [hidePRFilter, setHidePRFilter] = useState<boolean>(true);
 
-  const layersQuery = useQuery(reactQueryKeys.layers, fetchLayers, {
+  const layersQuery = useQuery({
+    queryKey: reactQueryKeys.layers,
+    queryFn: fetchLayers,
     select: (data) => ({
       ...data,
       results: data.results

ui/src/pages/layers/components/RepositoryDropdown.tsx

@@ -21,18 +21,16 @@ const RepositoryDropdown: React.FC<RepositoryDropdownProps> = ({
 }) => {
   const [search, setSearch] = useState<string>("");
 
-  const repositoriesQuery = useQuery(
-    reactQueryKeys.repositories,
-    fetchRepositories,
-    {
-      select: (data) => ({
-        ...data,
-        results: data.results.filter((r) =>
-          r.name.toLowerCase().includes(search.toLowerCase())
-        ),
-      }),
-    }
-  );
+  const repositoriesQuery = useQuery({
+    queryKey: reactQueryKeys.repositories,
+    queryFn: fetchRepositories,
+    select: (data) => ({
+      ...data,
+      results: data.results.filter((r) =>
+        r.name.toLowerCase().includes(search.toLowerCase())
+      ),
+    }),
+  });
 
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement>,