feat(web): link Dashboard stats to Releases page (#1281)

* feat(web): link stats to release table

- added Errored Pushes
- Made Recent Activity same color as Stats

* feat(releasetable): made links a separate row

https://i.imgur.com/ZoAOrXP.png

remove comment

* added LinkIcon to StatsItem

- Changed grid-cols to 2, as we now have 4 for narrow widths

* fix linting

* move some text modifier to parent element

* feat: add scale on hover with transition

deduplicated some classes

* adapt gap between StatsItems for mobile
remove border and title on stats divs

---------

Co-authored-by: Fabricio Silva <hi@fabricio.dev>
Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>

web/src/screens/releases/ReleaseTable.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { CellProps, Column, useFilters, usePagination, useSortBy, useTable } from "react-table";
 import {
@@ -23,9 +24,7 @@ import * as DataTable from "@components/data-table";
 
 import { IndexerSelectColumnFilter, PushStatusSelectColumnFilter, SearchColumnFilter } from "./Filters";
 import { classNames } from "@utils";
-import { ArrowTopRightOnSquareIcon, ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import { Tooltip } from "@components/tooltips/Tooltip";
-import { ExternalLink } from "@components/ExternalLink";
 
 export const releaseKeys = {
   all: ["releases"] as const,
@@ -84,6 +83,9 @@ const TableReducer = (state: TableState, action: Actions): TableState => {
 };
 
 export const ReleaseTable = () => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const filterTypeFromUrl = queryParams.get("filter");
   const columns = React.useMemo(() => [
     {
       Header: "Age",
@@ -110,26 +112,17 @@ export const ReleaseTable = () => {
                 {String(props.cell.value)}
               </span>
             </Tooltip>
-            <div className="flex mr-0">
-              {props.row.original.download_url && (
-                <ExternalLink
-                  href={props.row.original.download_url}
-                  className="px-2"
-                >
-                  <ArrowDownTrayIcon className="h-5 w-5 text-blue-400 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
-                </ExternalLink>
-              )}
-              {props.row.original.info_url && (
-                <ExternalLink href={props.row.original.info_url}>
-                  <ArrowTopRightOnSquareIcon className="h-5 w-5 text-blue-400 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-600" aria-hidden="true" />
-                </ExternalLink>
-              )}
-            </div>
           </div>
         );
       },
       Filter: SearchColumnFilter
     },
+    {
+      Header: "Links",
+      accessor: (row) => ({ download_url: row.download_url, info_url: row.info_url }),
+      id: "links",
+      Cell: DataTable.LinksCell
+    },
     {
       Header: "Actions",
       accessor: "action_status",
@@ -199,7 +192,7 @@ export const ReleaseTable = () => {
       initialState: {
         pageIndex: queryPageIndex,
         pageSize: queryPageSize,
-        filters: []
+        filters: filterTypeFromUrl ? [{ id: "action_status", value: filterTypeFromUrl }] : []
       },
       manualPagination: true,
       manualFilters: true,