Fix type + assets permissions display logic

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/components/assets/AssetsTable.tsx

@@ -22,7 +22,6 @@ type Props = {
     AssetsPageFragment$data
   >;
   assets: AssetsPageFragment$data["assets"]["edges"][0]["node"][];
-  hasAnyAction: boolean;
 };
 
 const schema = z.object({
@@ -46,7 +45,7 @@ const defaultValue = {
 } satisfies z.infer<typeof schema>;
 
 export function AssetsTable(props: Props) {
-  const { connectionId, pagination, assets, hasAnyAction } = props;
+  const { connectionId, pagination, assets } = props;
 
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
@@ -74,7 +73,6 @@ export function AssetsTable(props: Props) {
         organizationId,
       }}
       action={({ item }) =>
-        hasAnyAction ? (
         <ActionDropdown>
           <DropdownItem asChild>
             <Link to={`/organizations/${organizationId}/assets/${item.id}`}>
@@ -90,7 +88,6 @@ export function AssetsTable(props: Props) {
             {__("Delete")}
           </DropdownItem>
         </ActionDropdown>
-        ) : null
       }
       row={({ item }) => (
         <>

apps/console/src/components/assets/ReadOnlyAssetsTable.tsx

@@ -20,7 +20,7 @@ type Props = {
   assets: AssetEntry[];
 };
 
-export function SnapshotAssetsTable(props: Props) {
+export function ReadOnlyAssetsTable(props: Props) {
   const { pagination, assets } = props;
   const { __ } = useTranslate();
 

apps/console/src/hooks/useStateWithSchema.ts

@@ -31,7 +31,7 @@ export function useStateWithSchema<T extends ZodTypeAny>(
     value,
     errors,
     update: useCallback(
-      (key: keyof z.infer<T>, value: z.infer<T>[typeof key]) => {
+      <TKey extends keyof z.infer<T>>(key: TKey, value: z.infer<T>[TKey]) => {
         setState((prevState) => ({ ...prevState, [key]: value }));
       },
       [],

apps/console/src/pages/organizations/assets/AssetsPage.tsx

@@ -22,7 +22,7 @@ import { SnapshotBanner } from "/components/SnapshotBanner";
 import { CreateAssetDialog } from "./dialogs/CreateAssetDialog";
 import { Authorized, isAuthorized } from "/permissions";
 import { AssetsTable } from "../../../components/assets/AssetsTable";
-import { SnapshotAssetsTable } from "/components/assets/SnapshotAssetsTable";
+import { ReadOnlyAssetsTable } from "../../../components/assets/ReadOnlyAssetsTable";
 
 const paginatedAssetsFragment = graphql`
   fragment AssetsPageFragment on Organization
@@ -90,10 +90,10 @@ export default function AssetsPage(props: Props) {
   const assets = pagination.data.assets?.edges.map((edge) => edge.node);
   const connectionId = pagination.data.assets.__id;
 
-  const hasAnyAction =
-    !isSnapshotMode &&
-    (isAuthorized(organizationId, "Asset", "updateAsset") ||
-      isAuthorized(organizationId, "Asset", "deleteAsset"));
+  const canWrite = (
+    isAuthorized(organizationId, "Asset", "updateAsset") ||
+    isAuthorized(organizationId, "Asset", "deleteAsset")
+  );
   usePageTitle(__("Assets"));
 
   return (
@@ -116,14 +116,13 @@ export default function AssetsPage(props: Props) {
           </Authorized>
         )}
       </PageHeader>
-      {isSnapshotMode ?
-        <SnapshotAssetsTable pagination={pagination} assets={assets} />
+      {isSnapshotMode || !canWrite ?
+        <ReadOnlyAssetsTable pagination={pagination} assets={assets} />
         :
         <AssetsTable
           connectionId={connectionId}
           pagination={pagination}
           assets={assets}
-          hasAnyAction={hasAnyAction}
         />
       }
     </div>