David
d2bf856c97
- Add softwareReferenceHref helper function for generating resource links. - Create useGlobalResourceEditor hook for managing global application resources. - Implement useGlobalResourceForm hook for handling global resource forms. - Introduce GlobalSoftwareCatalogProvider for context management of global applications. - Develop GlobalOperatingSystemsPage to render global operating systems using the existing GlobalApplicationsPage. - Add operating system form identity helpers for managing OS-specific fields. - Create operating system specification labels for better localization. - Implement OperatingSystemIdentityReview component for reviewing OS identities. - Add OperatingSystemProductFields component for displaying OS product details. - Write tests for resource characteristic control to ensure proper translation and value handling. - Create a Python script for auditing global operating systems UI interactions. - Add tests for expanded workstation profiles to ensure proper functionality and responsiveness.
75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { DetailField } from "@repo/rdx-ui/components/detail-field";
|
|
import { EntityListHeader, EntityStatus } from "@repo/rdx-ui/components/entity-list";
|
|
import { LayersIcon } from "@repo/rdx-ui/lib/icons";
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { GlobalApplicationCapabilitiesDTO } from "../../../../common";
|
|
import { OperatingSystemProductFields } from "../../../global-operating-systems/shared/ui/operating-system-product-fields";
|
|
import { useGlobalSoftwareCatalog } from "../../shared/global-software-catalog-context";
|
|
import { GlobalApplicationFeedback } from "../../shared/ui/global-application-feedback";
|
|
|
|
import { GlobalApplicationAdministration } from "./global-application-administration";
|
|
|
|
export function GlobalApplicationDetail({
|
|
id,
|
|
access,
|
|
onEdit,
|
|
}: {
|
|
id: string;
|
|
access: GlobalApplicationCapabilitiesDTO | undefined;
|
|
onEdit: (id: string) => void;
|
|
}) {
|
|
const {
|
|
api: globalApplicationsApi,
|
|
keys: globalApplicationKeys,
|
|
text,
|
|
} = useGlobalSoftwareCatalog();
|
|
const { t } = useTranslation("resources");
|
|
const query = useQuery({
|
|
queryKey: globalApplicationKeys.detail(id),
|
|
queryFn: () => globalApplicationsApi.detail(id),
|
|
retry: false,
|
|
});
|
|
const resource = query.data?.resource;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<GlobalApplicationFeedback error={query.error} />
|
|
{query.isPending && <p role="status">{t(`${text}.loading`)}</p>}
|
|
{query.isError && (
|
|
<Button onClick={() => query.refetch()} variant="outline">
|
|
{t(`${text}.retry`)}
|
|
</Button>
|
|
)}
|
|
{resource && (
|
|
<>
|
|
<EntityListHeader
|
|
description={t(`${text}.detailDescription`)}
|
|
icon={<LayersIcon />}
|
|
title={resource.name}
|
|
/>
|
|
{access?.canManage ? (
|
|
<GlobalApplicationAdministration access={access} id={id} onEdit={onEdit} />
|
|
) : (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<DetailField label={t(`${text}.provider`)}>{resource.provider ?? "—"}</DetailField>
|
|
<DetailField label={t("status")}>
|
|
<EntityStatus active={resource.active}>
|
|
{t(resource.active ? "active" : "inactive")}
|
|
</EntityStatus>
|
|
</DetailField>
|
|
{resource.kind === "os" && <OperatingSystemProductFields product={resource} />}
|
|
<DetailField label={t(`${text}.url`)}>{resource.url ?? "—"}</DetailField>
|
|
<DetailField label={t(`${text}.productDescription`)}>
|
|
{resource.description ?? "—"}
|
|
</DetailField>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|