feat(widget): add restriction callback to restrict visibility and modification of widget kinds (#2658)

* feat(widget): add restriction callback to restrict visibility and modification of widget kinds

* fix: typecheck issue

* chore: address pull request feedback

apps/nextjs/src/components/board/items/item-content.tsx

@@ -5,6 +5,8 @@ import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "node_modules/@homarr/widgets/src/errors";
 import { ErrorBoundary } from "react-error-boundary";
 
+import { useSession } from "@homarr/auth/client";
+import { isWidgetRestricted } from "@homarr/auth/shared";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useSettings } from "@homarr/settings";
@@ -15,6 +17,7 @@ import type { SectionItem } from "~/app/[locale]/boards/_types";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import { BoardItemMenu } from "./item-menu";
+import { RestrictedWidgetContent } from "./restricted";
 
 interface BoardItemContentProps {
   item: SectionItem;
@@ -59,6 +62,7 @@ interface InnerContentProps {
 const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
   const settings = useSettings();
   const board = useRequiredBoard();
+  const { data: session } = useSession();
   const [isEditMode] = useEditMode();
   const Comp = loadWidgetDynamic(item.kind);
   const { definition } = widgetImports[item.kind];
@@ -70,6 +74,16 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
   const widgetSupportsIntegrations =
     "supportedIntegrations" in definition && definition.supportedIntegrations.length >= 1;
 
+  if (
+    isWidgetRestricted({
+      definition,
+      user: session?.user ?? null,
+      check: (level) => level === "all",
+    })
+  ) {
+    return <RestrictedWidgetContent kind={item.kind} />;
+  }
+
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -3,6 +3,8 @@ import { ActionIcon, Menu } from "@mantine/core";
 import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
+import { isWidgetRestricted } from "@homarr/auth/shared";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
@@ -37,6 +39,7 @@ export const BoardItemMenu = ({
   const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
   const { gridstack } = useSectionContext().refs;
   const settings = useSettings();
+  const { data: session } = useSession();
 
   // Reset error boundary on next render if item has been edited
   useEffect(() => {
@@ -91,6 +94,16 @@ export const BoardItemMenu = ({
     });
   };
 
+  if (
+    isWidgetRestricted({
+      definition: currentDefinition,
+      user: session?.user ?? null,
+      check: (level) => level !== "none",
+    })
+  ) {
+    return null;
+  }
+
   return (
     <Menu withinPortal withArrow position="right-start" arrowPosition="center">
       <Menu.Target>

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -2,6 +2,8 @@ import { useMemo, useState } from "react";
 import { Button, Card, Center, Grid, Input, Stack, Text } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 
+import { useSession } from "@homarr/auth/client";
+import { isWidgetRestricted } from "@homarr/auth/shared";
 import { objectEntries } from "@homarr/common";
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal } from "@homarr/modals";
@@ -15,10 +17,18 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   const [search, setSearch] = useState("");
   const t = useI18n();
   const { createItem } = useItemActions();
+  const { data: session } = useSession();
 
   const items = useMemo(
     () =>
       objectEntries(widgetImports)
+        .filter(([, value]) => {
+          return !isWidgetRestricted({
+            definition: value.definition,
+            user: session?.user ?? null,
+            check: (level) => level !== "none",
+          });
+        })
         .map(([kind, value]) => ({
           kind,
           icon: value.definition.icon,
@@ -26,7 +36,7 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
           description: t(`widget.${kind}.description`),
         }))
         .sort((itemA, itemB) => itemA.name.localeCompare(itemB.name)),
-    [t],
+    [t, session?.user],
   );
 
   const filteredItems = useMemo(

apps/nextjs/src/components/board/items/restricted.tsx

@@ -0,0 +1,28 @@
+import { Center, Group, Stack, Text } from "@mantine/core";
+import { IconShield } from "@tabler/icons-react";
+
+import type { WidgetKind } from "@homarr/definitions";
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface RestrictedWidgetProps {
+  kind: WidgetKind;
+}
+
+export const RestrictedWidgetContent = ({ kind }: RestrictedWidgetProps) => {
+  const tCurrentWidget = useScopedI18n(`widget.${kind}`);
+  const tCommonWidget = useScopedI18n("widget.common");
+
+  return (
+    <Center h="100%">
+      <Stack ta="center" gap="xs" align="center">
+        <Group gap="sm">
+          <IconShield size={16} />
+          <Text size="sm" fw="bold">
+            {tCommonWidget("restricted.title")}
+          </Text>
+        </Group>
+        <Text size="sm">{tCommonWidget("restricted.description", { name: tCurrentWidget("name") })}</Text>
+      </Stack>
+    </Center>
+  );
+};