feat(releases): show indexer name instead of identifier (#1706)

* feat(releases): show indexer name instead of identifier

* feat(releases): remove log in Cell

* feat(releases): update Dashboard recent releases

* fix(releases): db tests

* fix(releases): remove unused code

* fix(releases): remove more unused code

* fix(releases): remove even more unused code

---------

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
This commit is contained in:
ze0s 2024-09-03 14:57:48 +02:00 committed by GitHub
parent 54eab05f1f
commit fd90020400
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 76 additions and 200 deletions

View file

@ -110,23 +110,23 @@ export const AgeCell = ({value}: CellProps<Release>) => (
</div>
);
export const IndexerCell = ({value}: CellProps<Release>) => (
<div
className={classNames(
"py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300",
"max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]"
)}
>
<Tooltip
requiresClick
label={value}
maxWidth="max-w-[90vw]"
export const IndexerCell = (props: CellProps<Release>) => (
<div
className={classNames(
"py-3 text-sm font-medium box-content text-gray-900 dark:text-gray-300",
"max-w-[96px] sm:max-w-[216px] md:max-w-[360px] lg:max-w-[640px] xl:max-w-[840px]"
)}
>
<Tooltip
requiresClick
label={props.row.original.indexer.name ? props.row.original.indexer.name : props.row.original.indexer.identifier}
maxWidth="max-w-[90vw]"
>
<span className="whitespace-pre-wrap break-words">
{value}
{props.row.original.indexer.name ? props.row.original.indexer.name : props.row.original.indexer.identifier}
</span>
</Tooltip>
</div>
</Tooltip>
</div>
);
export const TitleCell = ({value}: CellProps<Release>) => (

View file

@ -3,7 +3,7 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import React, { Suspense, useState } from "react";
import React, { useState } from "react";
import { useSuspenseQuery } from "@tanstack/react-query";
import {
useTable,
@ -18,8 +18,8 @@ import { EmptyListState } from "@components/emptystates";
import * as Icons from "@components/Icons";
import * as DataTable from "@components/data-table";
import { RandomLinuxIsos } from "@utils";
import { RingResizeSpinner } from "@components/Icons";
import { ReleasesLatestQueryOptions } from "@api/queries";
import { IndexerCell } from "@components/data-table";
// This is a custom filter UI for selecting
// a unique option from a list
@ -166,28 +166,6 @@ function Table({ columns, data }: TableProps) {
);
}
export const RecentActivityTable = () => {
return (
<div className="flex flex-col mt-12">
<h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
Recent activity
</h3>
<div className="animate-pulse text-black dark:text-white">
<Suspense
fallback={
<div className="flex items-center justify-center lg:col-span-9">
<RingResizeSpinner className="text-blue-500 size-12" />
</div>
}
>
{/*<EmptyListState text="Loading..."/>*/}
<ActivityTableContent />
</Suspense>
</div>
</div>
)
}
export const ActivityTable = () => {
const columns = React.useMemo(() => [
{
@ -208,7 +186,7 @@ export const ActivityTable = () => {
{
Header: "Indexer",
accessor: "indexer.identifier",
Cell: DataTable.TitleCell,
Cell: IndexerCell,
Filter: SelectColumnFilter,
filter: "includes"
}
@ -275,80 +253,3 @@ export const ActivityTable = () => {
</div>
);
};
export const ActivityTableContent = () => {
const columns = React.useMemo(() => [
{
Header: "Age",
accessor: "timestamp",
Cell: DataTable.AgeCell
},
{
Header: "Release",
accessor: "name",
Cell: DataTable.TitleCell
},
{
Header: "Actions",
accessor: "action_status",
Cell: DataTable.ReleaseStatusCell
},
{
Header: "Indexer",
accessor: "indexer.identifier",
Cell: DataTable.TitleCell,
Filter: SelectColumnFilter,
filter: "includes"
}
] as Column[], []);
const { isLoading, data } = useSuspenseQuery(ReleasesLatestQueryOptions());
const [modifiedData, setModifiedData] = useState<Release[]>([]);
const [showLinuxIsos, setShowLinuxIsos] = useState(false);
if (isLoading) {
return (
<EmptyListState text="Loading..."/>
);
}
const toggleReleaseNames = () => {
setShowLinuxIsos(!showLinuxIsos);
if (!showLinuxIsos && data && data.data) {
const randomNames = RandomLinuxIsos(data.data.length);
const newData: Release[] = data.data.map((item, index) => ({
...item,
name: `${randomNames[index]}.iso`,
indexer: {
id: 0,
name: index % 2 === 0 ? "distrowatch" : "linuxtracker",
identifier: index % 2 === 0 ? "distrowatch" : "linuxtracker",
identifier_external: index % 2 === 0 ? "distrowatch" : "linuxtracker",
},
}));
setModifiedData(newData);
}
};
const displayData = showLinuxIsos ? modifiedData : (data?.data ?? []);
return (
<>
<Table columns={columns} data={displayData} />
<button
onClick={toggleReleaseNames}
className="p-2 absolute -bottom-8 right-0 bg-gray-750 text-white rounded-full opacity-10 hover:opacity-100 transition-opacity duration-300"
aria-label="Toggle view"
title="Go incognito"
>
{showLinuxIsos ? (
<EyeIcon className="h-4 w-4" />
) : (
<EyeSlashIcon className="h-4 w-4" />
)}
</button>
</>
);
};