gearnode
@@ -70,7 +70,12 @@ export function PageDescription({
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("text-md text-muted-foreground", className)}>
|
||||
<div
|
||||
className={cn(
|
||||
"text-md text-muted-foreground whitespace-pre-wrap",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -36,9 +36,6 @@ const FrameworkListViewQuery = graphql`
|
||||
node {
|
||||
id
|
||||
name
|
||||
description
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -57,45 +54,12 @@ const FrameworkListViewImportFrameworkMutation = graphql`
|
||||
node {
|
||||
id
|
||||
name
|
||||
description
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function FrameworkCard({
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Card className="relative overflow-hidden border bg-card p-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="size-16">{icon}</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold">{title}</h3>
|
||||
{status && (
|
||||
<span className="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">
|
||||
{status}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function FrameworkListViewContent({
|
||||
queryRef,
|
||||
}: {
|
||||
@@ -211,28 +175,47 @@ function FrameworkListViewContent({
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
|
||||
{frameworks.map((framework) => {
|
||||
return (
|
||||
<Link
|
||||
key={framework.id}
|
||||
to={`/organizations/${organizationId}/frameworks/${framework.id}`}
|
||||
>
|
||||
<FrameworkCard
|
||||
title={framework.name}
|
||||
description={framework.description}
|
||||
icon={
|
||||
<div className="flex size-full items-center justify-center rounded-full bg-blue-100">
|
||||
<span className="text-lg font-semibold text-blue-900">
|
||||
{framework.name.split(" ")[0]}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Card>
|
||||
<div className="w-full overflow-auto">
|
||||
<table className="w-full caption-bottom text-sm">
|
||||
<thead className="[&_tr]:border-b">
|
||||
<tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
|
||||
Name
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="[&_tr:last-child]:border-0">
|
||||
{frameworks.length === 0 ? (
|
||||
<tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
||||
<td
|
||||
colSpan={4}
|
||||
className="text-center p-4 align-middle text-muted-foreground"
|
||||
>
|
||||
No frameworks found. Create or import one to get started.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
frameworks.map((framework) => (
|
||||
<tr
|
||||
key={framework.id}
|
||||
className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted cursor-pointer"
|
||||
>
|
||||
<td className="p-4 align-middle">
|
||||
<Link
|
||||
to={`/organizations/${organizationId}/frameworks/${framework.id}`}
|
||||
className="font-medium underline-offset-4 hover:underline"
|
||||
>
|
||||
{framework.name}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</PageTemplate>
|
||||
);
|
||||
|
||||
@@ -169,7 +169,7 @@ function FrameworkViewContent({
|
||||
</span>
|
||||
<CardTitle>{control.name}</CardTitle>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground mt-1">
|
||||
<div className="text-sm text-muted-foreground mt-1 whitespace-pre-wrap">
|
||||
{control.description}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<c1a3bc146c71229f94ea60f820bb43eb>>
|
||||
* @generated SignedSource<<c9bf877d405180bb5fe0211022bd846f>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -21,11 +21,8 @@ export type FrameworkListViewImportFrameworkMutation$data = {
|
||||
readonly importFramework: {
|
||||
readonly frameworkEdge: {
|
||||
readonly node: {
|
||||
readonly createdAt: string;
|
||||
readonly description: string;
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly updatedAt: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
@@ -82,27 +79,6 @@ v3 = {
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "updatedAt",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
@@ -176,16 +152,16 @@ return {
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "0d952e4f9f3e106ea7a30d69f7268385",
|
||||
"cacheID": "04a42349410d12247fcbf3bd99b0b625",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "FrameworkListViewImportFrameworkMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation FrameworkListViewImportFrameworkMutation(\n $input: ImportFrameworkInput!\n) {\n importFramework(input: $input) {\n frameworkEdge {\n node {\n id\n name\n description\n createdAt\n updatedAt\n }\n }\n }\n}\n"
|
||||
"text": "mutation FrameworkListViewImportFrameworkMutation(\n $input: ImportFrameworkInput!\n) {\n importFramework(input: $input) {\n frameworkEdge {\n node {\n id\n name\n }\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "8be3328101831be07eeea8670d47debd";
|
||||
(node as any).hash = "9fb0921f16ca755b8130fcd8603e8933";
|
||||
|
||||
export default node;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<1d45b549aa04b80f7e0a2951d7910a3f>>
|
||||
* @generated SignedSource<<6aa35f3abf36b1b8660942a354a882fb>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -17,11 +17,8 @@ export type FrameworkListViewQuery$data = {
|
||||
readonly frameworks?: {
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly createdAt: string;
|
||||
readonly description: string;
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly updatedAt: string;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
@@ -86,27 +83,6 @@ v4 = [
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "updatedAt",
|
||||
"storageKey": null
|
||||
},
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
@@ -241,7 +217,7 @@ return {
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "ad629b287bbe0482ef250bae68c4018c",
|
||||
"cacheID": "f06159f3fa9c1667819b8663219ad4e9",
|
||||
"id": null,
|
||||
"metadata": {
|
||||
"connection": [
|
||||
@@ -258,11 +234,11 @@ return {
|
||||
},
|
||||
"name": "FrameworkListViewQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query FrameworkListViewQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n frameworks(first: 100) {\n edges {\n node {\n id\n name\n description\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n id\n }\n}\n"
|
||||
"text": "query FrameworkListViewQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n frameworks(first: 100) {\n edges {\n node {\n id\n name\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "27aa68a4b7303c125c427acdf6aa9dc4";
|
||||
(node as any).hash = "c2bf8dc4215c53e7d63f2027893a20cf";
|
||||
|
||||
export default node;
|
||||
|
||||
Reference in New Issue
Block a user