Knowledge Table: Display admin permission & Enable actions for admin (#18)

Admin users have write access to all knowledge.
Previously, the knowledge table displayed all knowledge, but displayed
"No permission" for administrators.
It also did not provide the knowledge actions (set tags, permissions
etc.) to administrators, even though they are allowed to modify
knowledge.

This change also refactors the user role "calculation" into the
UserContextService, so that the role is globally available.

Author: florian-h05

src/locales/de/translation.json

@@ -96,6 +96,7 @@
         "pending": "Läuft"
       },
       "permission": {
+        "administrator": "Administrator",
         "owner": "Besitzer",
         "readwrite": "Lesen/Schreiben",
         "readonly": "Lesen",

src/locales/en/translation.json

@@ -96,6 +96,7 @@
         "unknown": "Unknown"
       },
       "permission": {
+        "administrator": "Administrator",
         "owner": "Owner",
         "readwrite": "Read/Write",
         "readonly": "Read",

src/services/UserContextService.tsx

@@ -18,8 +18,12 @@ export interface UserContext {
 
   user: UserInfoDto | null;
   setUser: (info: UserInfoDto | null) => void;
+  role: UserRole | null;
+  setRole: (role: UserRole | null) => void;
 }
 
+export type UserRole = "admin" | "user";
+
 const UserContext = createContext<UserContext | undefined>(undefined);
 
 export const UserContextProvider: FC<{ children: ReactNode }> = ({
@@ -28,10 +32,20 @@ export const UserContextProvider: FC<{ children: ReactNode }> = ({
   const [ready, setReady] = useState(false);
   const [loading, setLoading] = useState(false);
   const [user, setUser] = useState<UserInfoDto | null>(null);
+  const [role, setRole] = useState<UserRole | null>(null);
 
   const value = useMemo(
-    () => ({ loading, setLoading, ready, setReady, user, setUser }),
-    [loading, setLoading, ready, setReady, user, setUser],
+    () => ({
+      loading,
+      setLoading,
+      ready,
+      setReady,
+      user,
+      setUser,
+      role,
+      setRole,
+    }),
+    [loading, setLoading, ready, setReady, user, setUser, role, setRole],
   );
 
   return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
@@ -47,7 +61,7 @@ export const useUserContext = () => {
 
 export const useSetupUserContext = () => {
   const { token, loginInProgress } = useContext(AuthContext);
-  const { setReady, setUser } = useUserContext();
+  const { setReady, setUser, setRole } = useUserContext();
   const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
@@ -81,6 +95,7 @@ export const useSetupUserContext = () => {
           throw new Error("Failed to get user info");
         }
         setUser(response.data);
+        setRole(getUserRole(response.data.roles));
         setReady(true);
         setLoading(false);
       })
@@ -95,3 +110,13 @@ export const useSetupUserContext = () => {
       });
   }, [token, loginInProgress]);
 };
+
+function getUserRole(roles: string[] | undefined): UserRole | null {
+  if (!roles) {
+    return null;
+  }
+  if (roles.includes("admin")) {
+    return "admin";
+  }
+  return "user";
+}

src/views/knowledge/KnowledgeOptions.tsx

@@ -40,7 +40,7 @@ export default function KnowledgeOptions({
   knowledge,
 }: Readonly<KnowledgeOptionsProps>) {
   const { t } = useTranslation();
-  const { user } = useUserContext();
+  const { user, role } = useUserContext();
   const { handleDeleteKnowledge } = useDeleteKnowledgeApi();
   const { deleteLocalKnowledge } = useGetKnowledgeList();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -60,12 +60,13 @@ export default function KnowledgeOptions({
     await registerFiles([knowledge.id]);
   }
 
-  const hasUserPermission = () => {
+  const hasUserWritePermissions = () => {
+    if (role === "admin") return true;
     if (!knowledge.permissions) return false;
     if (knowledge.permissions[USER_ANY] === "READWRITE") return true;
     if (!user?.username) return false;
     return (
-      knowledge.permissions[user.username] === "READONLY" ||
+      knowledge.permissions[user.username] === "READWRITE" ||
       knowledge.permissions[user.username] === "OWNER"
     );
   };
@@ -81,7 +82,7 @@ export default function KnowledgeOptions({
         <DropdownMenuLabel>
           {t("knowledgePage.options.actions")}
         </DropdownMenuLabel>
-        {hasUserPermission() ? (
+        {hasUserWritePermissions() ? (
           <>
             <DropdownMenuItem
               onClick={() => {

src/views/knowledge/KnowledgePermissions.tsx

@@ -13,7 +13,7 @@ export default function KnowledgePermissions({
   knowledge,
 }: Readonly<KnowledgePermissionsProps>) {
   const { t } = useTranslation();
-  const { user } = useUserContext();
+  const { user, role } = useUserContext();
 
   if (!knowledge?.permissions || !user?.username) {
     return (
@@ -25,9 +25,11 @@ export default function KnowledgePermissions({
 
   return (
     <div className="ml-4">
-      {translatePermissions(
-        compareWithAnyPermission(knowledge.permissions, user.username),
-      )}
+      {role === "admin"
+        ? t("knowledgePage.table.permission.administrator")
+        : translatePermissions(
+            compareWithAnyPermission(knowledge.permissions, user.username),
+          )}
     </div>
   );
 }

src/views/overlays/sidebar/SidebarUser.tsx

@@ -45,15 +45,14 @@ export function SidebarUser() {
   const [isDeleteUserDialogOpen, setIsDeleteUserDialogOpen] =
     useState<boolean>(false);
   const { toast } = useToast();
-  const { user } = useUserContext();
+  const { user, role } = useUserContext();
   const navigate = useNavigate();
   const { token, logOut } = useContext(AuthContext);
 
   const loggedIn = token.length > 0;
 
   const username = user?.name ?? user?.username ?? t("user.anonymous");
   const name = user?.name ?? username;
-  const userRole = getUserRole(user?.roles);
   const changeLanguageHandler = (lang: string) => {
     void i18n.changeLanguage(lang);
   };
@@ -113,9 +112,9 @@ export function SidebarUser() {
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-semibold">{name}</span>
-                  {userRole !== null && (
+                  {role !== null && (
                     <span className="truncate text-xs">
-                      {t(`role.${userRole}`)}
+                      {t(`role.${role}`)}
                     </span>
                   )}
                 </div>
@@ -224,13 +223,3 @@ export function SidebarUser() {
     </SidebarMenu>
   );
 }
-
-const getUserRole = (roles: string[] | undefined): string | null => {
-  if (!roles) {
-    return null;
-  }
-  if (roles.includes("admin")) {
-    return "admin";
-  }
-  return "user";
-};