Revamp framework view

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/components/PageHeader.tsx

@@ -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>
   );

apps/console/src/pages/organizations/frameworks/FrameworkListView.tsx

@@ -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">
+        <Card>
-          {frameworks.map((framework) => {
+          <div className="w-full overflow-auto">
-            return (
+            <table className="w-full caption-bottom text-sm">
-              <Link
+              <thead className="[&_tr]:border-b">
-                key={framework.id}
+                <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
-                to={`/organizations/${organizationId}/frameworks/${framework.id}`}
+                  <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"
                     >
-                <FrameworkCard
+                      No frameworks found. Create or import one to get started.
-                  title={framework.name}
+                    </td>
-                  description={framework.description}
+                  </tr>
-                  icon={
+                ) : (
-                    <div className="flex size-full items-center justify-center rounded-full bg-blue-100">
+                  frameworks.map((framework) => (
-                      <span className="text-lg font-semibold text-blue-900">
+                    <tr
-                        {framework.name.split(" ")[0]}
+                      key={framework.id}
-                      </span>
+                      className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted cursor-pointer"
-                    </div>
+                    >
-                  }
+                      <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>
   );

apps/console/src/pages/organizations/frameworks/FrameworkView.tsx

@@ -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>

apps/console/src/pages/organizations/frameworks/__generated__/FrameworkListViewImportFrameworkMutation.graphql.ts

@@ -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;

apps/console/src/pages/organizations/frameworks/__generated__/FrameworkListViewQuery.graphql.ts

@@ -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;