@hortiview/shared-components 2.11.1 → 2.12.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [2.12.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.11.2...v2.12.0) (2026-02-02)
+
+### Features
+
+* add a permission context and provider to be able to access permissions inside of shared components ([7462a97](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7462a970c02a715eb8edb526d5afc4c50f829de3))
+* add loadingspinner to AllowedButton ([a999ba5](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a999ba53f1ae6806ec6a39b1443dc419fc0c2587))
+* add permission types and enum from main repo ([f3da7fb](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/f3da7fb003158daf2e0901fe37cb90af5982af1d))
+* add permissionService ([fabef22](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/fabef220f5f85773bc4044b069c8241b42987fad))
+* add storybooks for newly introduced components ([7d79ea3](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7d79ea3286f3775fe5ee30a432de7abf777c8995))
+* addnew permission components to readMe + export new components from main ([1fbe431](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1fbe4316e5e424b9c2bbcfc27e3ae03e427b1e31))
+* introduce button components that are permission-gated ([c811d31](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/c811d3198bb72f32007db3a37c8eb822b341f1f9))
+* introduce get permissionFromModulePermissionToken ([523ff1b](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/523ff1b8d9c08af701a0318efb0e260cbf436431))
+
+## [2.11.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.11.1...v2.11.2) (2026-01-27)
+
+### Bug Fixes
+
+* adjusted stepperHeader invalid prop values ([7542b35](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7542b358125e8b4460ededdc4c2e08d00499c189)), closes [#13800](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/13800)
+
 ## [2.11.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.11.0...v2.11.1) (2026-01-22)
 
 ### Styles

package/README.md

@@ -54,6 +54,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [OfflineView](#offlineview)
 1. [OnboardingBanner](#onboardingbanner)
 1. [OverflowTooltip](#overflowtooltip)
+1. [Permissions](#permissions)
 1. [SafeForm](#safeform)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
@@ -932,6 +933,137 @@ const longText =
 </OverflowTooltip>;
 ```
 
+### Permissions
+
+This shared library provides different hooks and component that can be used to check wether a user is allowed to proceed with an action, view a component or not.
+
+In order for this component to correctly determine whether a user has the appropriate permissions, a basic setup must be implemented. The following section explains how:
+
+#### Setup
+
+#### 1. Wrap your app with the SharedComponentsPermissionProvider
+
+In your main application file (e.g., `App.tsx` or `main.tsx`), wrap your app with the `PermissionProvider`:
+
+```tsx
+import { SharedComponentsPermissionProvider } from '@hortiview/shared-components';
+
+function App() {
+  // Get these values from your store or state management
+  // In this example `Zustand` stores are used
+  const userPermissions = useClaimsIdentityStore(state => state.userPermissions);
+  const activeOrganizationId = useActiveOrganizationStore(state => state.activeOrganization?.id);
+
+  return (
+    <SharedComponentsPermissionProvider
+      userPermissions={userPermissions}
+      activeOrganizationId={activeOrganizationId}
+    >
+      <YourAppComponents />
+    </SharedComponentsPermissionProvider>
+  );
+}
+```
+
+#### 2.1 Use the Allowed component anywhere in your app
+
+Once the provider is set up, you can use `<Allowed />` anywhere in your component tree without passing props. The wrapped component is conditionally rendered depending on the user permissions:
+
+```tsx
+import { Allowed } from '@hortiview/shared-components';
+
+function MyComponent() {
+  return (
+    <Allowed neededPermissions={["organization-read", "organization-edit"]} entityId={organizationId}>
+      <OrganizationSettings />
+    <Allowed/>
+  );
+}
+```
+
+#### 2.2 Use the useIsAllowed-hook anywhere in your app
+
+The `useIsAllowed`-hook works similar to the `<Allowed />` component. Instead of being used as a wrapper it returns a boolean. That value can be used to conditionally render components or control application logic based on user permissions.
+
+```tsx
+import { useIsAllowed } from '@hortiview/shared-components';
+
+function MyComponent() {
+  const isAllowed = useIsAllowed();
+
+  // Check if user has permission to edit members for the current organization
+  const canEditMembers = isAllowed(['member-edit', 'member-create'], orgId);
+
+  return <MembersList isDisabled={!canEditMembers} />;
+}
+```
+
+#### 2.3 Use the AllowedButton or AllowedIconButton anywhere in your app
+
+Once the provider is set up, you can use `AllowedButton` and `AllowedIconButton` anywhere in your component tree without passing props. Both buttons expect a permissions array and call the `useIsAllowed` under the hood.
+
+> **Note:** Both components will automatically hide (return `null`) if the user doesn't have the required permissions. The button will only render when the user is authorized.
+
+**AllowedButton Example:**
+
+```jsx
+import { AllowedButton, Permission } from '@hortiview/shared-components';
+
+function FarmActions({ farmId }) {
+  return (
+    <div>
+      <AllowedButton
+        data-testid='edit-season-button'
+        label='Edit Season'
+        permissions={['season-edit']}
+        entityId={organizationId}
+        buttonVariant='filled'
+        onClick={() => handleEditSeason(seasonId)}
+      />
+
+      <AllowedButton
+        data-testid='delete-season-button'
+        label='Delete Season'
+        permissions={['season-delete']}
+        entityId={organizationId}
+        buttonVariant='danger'
+        onClick={() => handleDeleteSeason(seasonId)}
+      />
+    </div>
+  );
+}
+```
+
+**AllowedIconButton Example:**
+
+```jsx
+import { AllowedIconButton, Permission } from '@hortiview/shared-components';
+
+function BlockActions({ blockId, farmId }) {
+  return (
+    <div>
+      <AllowedIconButton
+        data-testid='edit-block-icon'
+        icon='edit'
+        permissions={['block-edit', 'block-create']}
+        entityId={farmId}
+        iconButtonVariant='filled-primary'
+        onClick={() => handleEditBlock(blockId)}
+      />
+
+      <AllowedIconButton
+        data-testid='delete-block-icon'
+        icon='delete'
+        permissions={['block-delete']}
+        entityId={farmId}
+        iconButtonVariant='filled-danger'
+        onClick={() => handleDeleteBlock(blockId)}
+      />
+    </div>
+  );
+}
+```
+
 ### SafeForm
 
 A wrapper around a form that prevents accidental submission when pressing Enter in input fields.
@@ -1018,10 +1150,10 @@ import { Select } from '@hortiview/shared-components';
 ### Stepper
 
 Provides a simple stepper component, which contains the step indicators, a title text and buttons to navigate forwards and backwards.
-The component is available in two types: 
+The component is available in two types:
 
-* 'default' (steps as dots and a centered step title below them)
-* 'description' (n/n numerical progress, description/title right of it)
+- 'default' (steps as dots and a centered step title below them)
+- 'description' (n/n numerical progress, description/title right of it)
 
 **Be aware that you need to control the Stepper flow by your own, like:**
 

package/dist/components/Allowed/Allowed.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { HVPermissions } from '../../types/Permission';
+
+type AllowedProps = {
+    neededPermissions: HVPermissions[];
+    entityId: string | undefined;
+    disclaimer?: boolean;
+    disclaimerText?: string;
+};
+/**
+ * A component wrapper which takes permissions and an entity id (as a fallback the activeOrganization id is used) the permission is for.
+ * Returns the children if the user has the permission for the entity, nothing otherwise (or an optional disclaimer)
+ * @param children - the children to return if allowed to see it
+ * @param entityId - the entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmId)
+ * @param neededPermissions - the permissions needed to see the children
+ * @param disclaimer - if true a disclaimer is shown, otherwise not. (default: false)
+ * @param disclaimerText - the text to show in the disclaimer (default: 'You are not allowed to see the content of this section.')
+ * @returns
+ */
+export declare const Allowed: ({ children, neededPermissions, entityId, disclaimer, disclaimerText, }: PropsWithChildren<AllowedProps>) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | null | undefined;
+export {};

package/dist/components/Allowed/Allowed.js

@@ -0,0 +1,13 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Disclaimer as i } from "../Disclaimer/Disclaimer.js";
+import { useIsAllowed as n } from "../PermissionChecks/PermissionService.js";
+const d = ({
+  children: o,
+  neededPermissions: e,
+  entityId: t,
+  disclaimer: r = !1,
+  disclaimerText: l = "You are not allowed to see the content of this section."
+}) => n()(e, t) ? o : r ? /* @__PURE__ */ s(i, { text: l }) : null;
+export {
+  d as Allowed
+};

package/dist/components/Allowed/Allowed.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Allowed/Allowed.test.js

@@ -0,0 +1,49 @@
+import { jsx as e } from "react/jsx-runtime";
+import { s as n } from "../../react.esm-BbMrgZCM.js";
+import { renderWithPermissions as s } from "../../test-utils.js";
+import { HVMainPermissions as o } from "../../types/Permission.js";
+import { Allowed as i } from "./Allowed.js";
+import { d as l, t as d, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+l("Test Allowed", () => {
+  d("should return the children if allowed to see them", () => {
+    const r = /* @__PURE__ */ e("div", { children: "Allowed to see children" });
+    s(
+      /* @__PURE__ */ e(i, { neededPermissions: [o.CurrentUserRead], entityId: "General", children: r }),
+      {
+        userPermissions: {
+          General: [o.CurrentUserRead]
+        }
+      }
+    ), t(n.getByText("Allowed to see children")).toBeInTheDocument();
+  }), d("should return empty wrapper when not allowed to see children", () => {
+    const r = /* @__PURE__ */ e("div", { children: "Allowed to see children" });
+    s(
+      /* @__PURE__ */ e(i, { neededPermissions: [o.CurrentUserRead], entityId: "General", children: r }),
+      {
+        userPermissions: {
+          General: []
+        }
+      }
+    ), t(n.queryByText("Allowed to see children")).not.toBeInTheDocument();
+  }), d("should return disclaimer when defined & not allowed to see children", () => {
+    const r = /* @__PURE__ */ e("div", { children: "Allowed to see children" });
+    s(
+      /* @__PURE__ */ e(
+        i,
+        {
+          disclaimer: !0,
+          neededPermissions: [o.CurrentUserRead],
+          entityId: "General",
+          children: r
+        }
+      ),
+      {
+        userPermissions: {
+          General: []
+        }
+      }
+    ), t(n.queryByText("Allowed to see children")).not.toBeInTheDocument(), t(
+      n.getByText("You are not allowed to see the content of this section.")
+    ).toBeInTheDocument();
+  });
+});

package/dist/components/AllowedButton/AllowedButton.d.ts

@@ -0,0 +1,51 @@
+import { ButtonProps } from '@element-public/react-button';
+import { HVPermissions } from '../../types/Permission';
+
+export type AllowedButtonProps = Omit<ButtonProps, 'buttonSize' | 'variant' | 'type' | 'label'> & {
+    /**
+     * This applies the html button type (button, submit, reset) or the anchor media type when used with the href property.
+     * Default: 'button'
+     */
+    buttonType?: 'button' | 'submit' | 'reset' | string;
+    /**
+     * Applies the selected style to the button.
+     * Default: 'filled'
+     */
+    variant?: 'filled' | 'outlined' | 'danger' | 'text' | 'success';
+    /**
+     * data-testid used for testing.
+     */
+    'data-testid': string;
+    /**
+     * The entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmLocationId).
+     */
+    entityId?: string;
+    /**
+     * Id used for linking the button to a form.
+     */
+    formId?: string;
+    /**
+     * If true, the button shows a loading spinner instead of the label.
+     * While true, the button is disabled.
+     */
+    isLoading?: boolean;
+    /**
+     * Can be a string or JSX.Element for setting a loading spinner or custom component.
+     */
+    label: string | JSX.Element;
+    /**
+     * The permissions needed to enable the button. If the array is empty, the button is always enabled.
+     */
+    permissions: HVPermissions[];
+    /**
+     * Changes the the size of the button.
+     * Default: 'medium'
+     */
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+};
+/**
+ * A permission-gated button component that only renders when the user has the required permissions.
+ * @param {AllowedButtonProps} props - Component properties
+ * @returns {JSX.Element | null} The button component or null if permissions are not met
+ */
+export declare const AllowedButton: ({ buttonType, variant, "data-testid": testId, label, size, isLoading, ...props }: AllowedButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AllowedButton/AllowedButton.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import { B as r } from "../../index.es-B0QNuIUR.js";
+import { Allowed as s } from "../Allowed/Allowed.js";
+import { LoadingSpinner as a } from "../LoadingSpinner/Default/LoadingSpinner.js";
+const c = ({
+  buttonType: d = "button",
+  variant: n = "filled",
+  "data-testid": o,
+  label: m,
+  size: l = "medium",
+  isLoading: i = !1,
+  ...t
+}) => /* @__PURE__ */ e(s, { neededPermissions: t.permissions, entityId: t.entityId, children: /* @__PURE__ */ e(
+  r,
+  {
+    buttonSize: l,
+    "data-testid": `allowed-button-${o}`,
+    disabled: t.disabled || i,
+    form: t.formId,
+    type: d,
+    variant: n,
+    ...t,
+    children: i ? /* @__PURE__ */ e(a, { size: "sm", spinnerOnly: !0 }) : m
+  }
+) });
+export {
+  c as AllowedButton
+};

package/dist/components/AllowedButton/AllowedButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AllowedButton/AllowedButton.test.js

@@ -0,0 +1,126 @@
+import { jsx as s } from "react/jsx-runtime";
+import { s as t, f as u } from "../../react.esm-BbMrgZCM.js";
+import { renderWithPermissions as n } from "../../test-utils.js";
+import { HVMainPermissions as i } from "../../types/Permission.js";
+import { AllowedButton as d } from "./AllowedButton.js";
+import { u as b } from "../../useBreakpoints-MzTZ0tCT.js";
+import { v as l, d as m, b as c, t as r, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+l.mock("../../hooks/useBreakpoints", () => ({
+  useBreakpoints: l.fn()
+}));
+m("AllowedButton Test", () => {
+  c(() => {
+    l.mocked(b).mockReturnValue({
+      isDesktop: !0,
+      isMobile: !1,
+      isTablet: !1,
+      isDesktopNavbar: !0
+    });
+  }), r("renders button with no permissions required", () => {
+    n(
+      /* @__PURE__ */ s(d, { "data-testid": "test", label: "Add", permissions: [], entityId: void 0 })
+    ), e(t.getByText("Add")).toBeInTheDocument();
+  }), r("renders outlined button variant", () => {
+    n(
+      /* @__PURE__ */ s(
+        d,
+        {
+          "data-testid": "regular-outlined-button",
+          label: "Add",
+          variant: "outlined",
+          permissions: [],
+          entityId: void 0
+        }
+      )
+    );
+    const o = t.getAllByRole("button")[0];
+    e(o).toHaveClass("mdc-button--outlined"), e(t.getByTestId("allowed-button-regular-outlined-button")).toBeInTheDocument();
+  }), r("renders full-width button", () => {
+    n(
+      /* @__PURE__ */ s(
+        d,
+        {
+          "data-testid": "regular-button",
+          label: "Add",
+          fullWidth: !0,
+          permissions: [],
+          entityId: void 0
+        }
+      )
+    );
+    const o = t.getAllByRole("button")[0];
+    e(o).toHaveClass("lmnt-button--full-width"), e(t.getByTestId("allowed-button-regular-button")).toBeInTheDocument();
+  }), r("calls onClick when clicked", () => {
+    const o = l.fn();
+    n(
+      /* @__PURE__ */ s(
+        d,
+        {
+          "data-testid": "test-onclick-button",
+          label: "Add",
+          onClick: o,
+          permissions: [],
+          entityId: void 0
+        }
+      )
+    );
+    const a = t.getAllByRole("button")[0];
+    u.click(a), e(o).toHaveBeenCalled(), e(t.getByTestId("allowed-button-test-onclick-button")).toBeInTheDocument();
+  }), r("renders disabled button when prop is used", () => {
+    n(
+      /* @__PURE__ */ s(
+        d,
+        {
+          "data-testid": "disabled-button",
+          label: "Add",
+          permissions: [i.SuperUser],
+          entityId: "farm-123",
+          disabled: !0
+        }
+      ),
+      {
+        userPermissions: {
+          "farm-123": [i.SuperUser]
+        }
+      }
+    ), e(t.getByText("Add")).toBeInTheDocument(), e(t.getByTestId("allowed-button-disabled-button")).toBeInTheDocument();
+    const o = t.getAllByRole("button")[0];
+    e(o).toHaveAttribute("disabled");
+  }), r("hides button when permission is missing", () => {
+    n(
+      /* @__PURE__ */ s(
+        d,
+        {
+          "data-testid": "missing",
+          label: "Add",
+          permissions: [i.SuperUser],
+          entityId: "farm-123"
+        }
+      ),
+      {
+        userPermissions: {
+          "farm-123": [i.FarmsUpdate, i.FarmsRead]
+        }
+      }
+    ), e(t.queryByText("Add")).not.toBeInTheDocument(), e(t.queryByTestId("allowed-button-missing")).not.toBeInTheDocument();
+  }), r("renders button when permission exists", () => {
+    n(
+      /* @__PURE__ */ s(
+        d,
+        {
+          "data-testid": "enabled",
+          label: "Add",
+          permissions: [i.SuperUser],
+          entityId: "farm-123"
+        }
+      ),
+      {
+        userPermissions: {
+          "farm-123": [i.SuperUser]
+        }
+      }
+    ), e(t.getByText("Add")).toBeInTheDocument(), e(t.getByTestId("allowed-button-enabled")).toBeInTheDocument();
+    const o = t.getAllByRole("button")[0];
+    e(o).not.toHaveAttribute("disabled");
+  });
+});

package/dist/components/AllowedIconButton/AllowedIconButton.d.ts

@@ -0,0 +1,43 @@
+import { IconButtonProps } from '@element-public/react-icon-button';
+import { HVPermissions } from '../../types/Permission';
+
+export type AllowedIconButtonProps = Omit<IconButtonProps, 'variant' | 'iconType' | 'iconSize'> & {
+    /**
+     * data-testid used for testing.
+     */
+    'data-testid': string;
+    /**
+     * The entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmLocationId).
+     */
+    entityId?: string;
+    /**
+     * Id used for linking the button to a form.
+     */
+    formId?: string;
+    /**
+     * Variants prefixed with filled- will add a background color to the icon according to the theme.
+     * Variants prefixed with color- will change the color of the icon according to the theme.
+     * Default: 'filled-primary'
+     */
+    variant?: 'filled-danger-alt' | 'filled-danger' | 'filled-primary' | 'filled-secondary' | 'color-primary' | 'color-secondary' | 'color-on-dark' | 'color-on-unknown-black' | 'secondary-on-surface';
+    /**
+     * The icon style to be used (filled, outlined, two-tone, rounded, sharp).
+     * Default: 'filled'
+     */
+    iconType?: 'filled' | 'outlined' | 'two-tone' | 'rounded' | 'sharp';
+    /**
+     * The permissions needed to enable the button. If the array is empty, the button is always enabled.
+     */
+    permissions: HVPermissions[];
+    /**
+     * Changes the the size of the icon button.
+     * Default: 'medium'
+     */
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+};
+/**
+ * A permission-gated icon button component that only renders when the user has the required permissions.
+ * @param {AllowedIconButtonProps} props - Component properties
+ * @returns {JSX.Element | null} The icon button component or null if permissions are not met
+ */
+export declare const AllowedIconButton: ({ "data-testid": testId, variant, iconType, size, ...props }: AllowedIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AllowedIconButton/AllowedIconButton.js

@@ -0,0 +1,23 @@
+import { jsx as i } from "react/jsx-runtime";
+import { I as m } from "../../index.es-C1u7zUBz.js";
+import { Allowed as l } from "../Allowed/Allowed.js";
+const f = ({
+  "data-testid": o,
+  variant: e = "filled-primary",
+  iconType: d = "filled",
+  size: n = "medium",
+  ...t
+}) => /* @__PURE__ */ i(l, { neededPermissions: t.permissions, entityId: t.entityId, children: /* @__PURE__ */ i(
+  m,
+  {
+    "data-testid": `allowed-icon-button-${o}`,
+    form: t.formId,
+    iconSize: n,
+    iconType: d,
+    variant: e,
+    ...t
+  }
+) });
+export {
+  f as AllowedIconButton
+};

package/dist/components/AllowedIconButton/AllowedIconButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AllowedIconButton/AllowedIconButton.test.js

@@ -0,0 +1,121 @@
+import { jsx as s } from "react/jsx-runtime";
+import { s as t, f as u } from "../../react.esm-BbMrgZCM.js";
+import { renderWithPermissions as i } from "../../test-utils.js";
+import { HVMainPermissions as n } from "../../types/Permission.js";
+import { AllowedIconButton as r } from "./AllowedIconButton.js";
+import { u as c } from "../../useBreakpoints-MzTZ0tCT.js";
+import { v as a, d as m, b, t as d, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+a.mock("../../hooks/useBreakpoints", () => ({
+  useBreakpoints: a.fn()
+}));
+m("AllowedIconButton Test", () => {
+  b(() => {
+    a.mocked(c).mockReturnValue({
+      isDesktop: !0,
+      isMobile: !1,
+      isTablet: !1,
+      isDesktopNavbar: !0
+    });
+  }), d("renders icon button with no permissions required", () => {
+    i(
+      /* @__PURE__ */ s(
+        r,
+        {
+          "data-testid": "icon-button",
+          icon: "add",
+          permissions: [],
+          entityId: void 0
+        }
+      )
+    );
+    const o = t.getAllByRole("button")[0];
+    e(o).toHaveClass("lmnt-icon-button"), e(t.getByTestId("allowed-icon-button-icon-button")).toBeInTheDocument();
+  }), d("renders secondary variant icon button", () => {
+    i(
+      /* @__PURE__ */ s(
+        r,
+        {
+          "data-testid": "secondary-button",
+          icon: "add",
+          variant: "filled-secondary",
+          permissions: [],
+          entityId: void 0
+        }
+      )
+    );
+    const o = t.getAllByRole("button")[0];
+    e(o).toHaveClass("lmnt-icon-button--fill-secondary"), e(t.getByTestId("allowed-icon-button-secondary-button")).toBeInTheDocument();
+  }), d("calls onClick when clicked", () => {
+    const o = a.fn();
+    i(
+      /* @__PURE__ */ s(
+        r,
+        {
+          "data-testid": "test-onclick-button",
+          icon: "add",
+          onClick: o,
+          permissions: [],
+          entityId: void 0
+        }
+      )
+    );
+    const l = t.getAllByRole("button")[0];
+    u.click(l), e(o).toHaveBeenCalled(), e(t.getByTestId("allowed-icon-button-test-onclick-button")).toBeInTheDocument();
+  }), d("renders disabled icon button when prop is used", () => {
+    i(
+      /* @__PURE__ */ s(
+        r,
+        {
+          "data-testid": "disabled-button",
+          icon: "add",
+          permissions: [n.SuperUser],
+          entityId: "farm-123",
+          disabled: !0
+        }
+      ),
+      {
+        userPermissions: {
+          "farm-123": [n.SuperUser]
+        }
+      }
+    ), e(t.getByTestId("allowed-icon-button-disabled-button")).toBeInTheDocument();
+    const o = t.getAllByRole("button")[0];
+    e(o).toHaveAttribute("disabled");
+  }), d("hides icon button when permission is missing", () => {
+    i(
+      /* @__PURE__ */ s(
+        r,
+        {
+          "data-testid": "missing",
+          icon: "add",
+          permissions: [n.SuperUser],
+          entityId: "farm-123"
+        }
+      ),
+      {
+        userPermissions: {
+          "farm-123": [n.FarmsUpdate, n.FarmsRead]
+        }
+      }
+    ), e(t.queryByTestId("allowed-icon-button-missing")).not.toBeInTheDocument();
+  }), d("renders icon button when permission exists", () => {
+    i(
+      /* @__PURE__ */ s(
+        r,
+        {
+          "data-testid": "enabled",
+          icon: "add",
+          permissions: [n.SuperUser],
+          entityId: "farm-123"
+        }
+      ),
+      {
+        userPermissions: {
+          "farm-123": [n.SuperUser]
+        }
+      }
+    ), e(t.getByTestId("allowed-icon-button-enabled")).toBeInTheDocument();
+    const o = t.getAllByRole("button")[0];
+    e(o).not.toHaveAttribute("disabled");
+  });
+});