Migrate Views interface patterns

webui/src/features/views/PersonalViewsPanel.tsx

@@ -1,12 +1,19 @@
 import { useEffect, useMemo, useState } from "react";
 import {
+  ActionBlockerHint,
   FormField,
   hasScope,
+  i18nMessage,
   type ApiSettings,
   type AuthInfo
 } from "@govoplan/core-webui";
 import ViewsAdminPanel from "./ViewsAdminPanel";
 import type { ViewScopeType } from "../../api/views";
+import {
+  VIEWS_DOCUMENTATION,
+  VIEWS_FIELD_DOCUMENTATION,
+  VIEWS_INTERFACE_I18N
+} from "./interfacePatterns";
 
 
 type OwnerOption = {
@@ -38,9 +45,20 @@ export default function PersonalViewsPanel({
   const owner = options.find((option) => option.key === ownerKey) ?? options[0];
   if (!owner) {
     return (
-      <p className="muted">
-        You do not have access to personal or group View definitions.
-      </p>
+      <ActionBlockerHint
+        reason={{
+          summary: "i18n:govoplan-views.no_personal_access",
+          requiredAction: VIEWS_INTERFACE_I18N.permissionGuidanceText,
+          actor: VIEWS_INTERFACE_I18N.administratorText,
+          target: VIEWS_INTERFACE_I18N.administrationTargetText
+        }}
+        labels={{
+          requiredAction: VIEWS_INTERFACE_I18N.requiredActionText,
+          actor: VIEWS_INTERFACE_I18N.actorText,
+          target: VIEWS_INTERFACE_I18N.destinationText
+        }}
+        documentation={VIEWS_DOCUMENTATION}
+      />
     );
   }
 
@@ -48,7 +66,10 @@ export default function PersonalViewsPanel({
     <div className="views-personal-panel">
       {options.length > 1 && (
         <div className="views-owner-toolbar">
-          <FormField label="View owner">
+          <FormField
+            label="i18n:govoplan-views.view_owner"
+            documentation={VIEWS_FIELD_DOCUMENTATION}
+          >
             <select
               value={owner.key}
               onChange={(event) => setOwnerKey(event.target.value)}
@@ -91,9 +112,8 @@ function ownerOptions(auth: AuthInfo): OwnerOption[] {
       key: `user:${auth.user.account_id}`,
       scopeType: "user",
       scopeId: auth.user.account_id,
-      label: "My Views",
-      description:
-        "Design personal interface projections. Publishing a View makes it available to this account.",
+      label: "i18n:govoplan-views.my_views",
+      description: "i18n:govoplan-views.personal_description",
       canWrite:
         tenantManager ||
         hasScope(auth, "views:personal_definition:write")
@@ -109,9 +129,10 @@ function ownerOptions(auth: AuthInfo): OwnerOption[] {
         key: `group:${group.id}`,
         scopeType: "group",
         scopeId: group.id,
-        label: `Group: ${group.name}`,
-        description:
-          "Design reusable interface projections for this group. Publishing a View makes it available to all current group members.",
+        label: i18nMessage("i18n:govoplan-views.group_value", {
+          value0: group.name
+        }),
+        description: "i18n:govoplan-views.group_description",
         canWrite:
           tenantManager ||
           hasScope(auth, "views:group_definition:write")