feat: Expiry rule now has a notice if not included in the permission (#278)

* Expiry rule now has a notice if not included in the permission
- Rules can now define a contentWhenDisabled that will be shown if the rule is removed
- Expiry rule for all permission types includes a notice that you should probably add an expiry

* contentWhenDisabled is now a function so that we can depend on the translate function to be initialised

* Switch notice to warning style (orange)

Author: jeffsmale90

packages/gator-permissions-snap/locales/en.json

@@ -64,6 +64,9 @@
     "expiryTooltip": {
       "message": "The expiry date of the permission"
     },
+    "expiryContentWhenDisabled": {
+      "message": "Never expires - we recommend that you set an expiry."
+    },
     "streamAmountLabel": {
       "message": "Stream Amount"
     },

packages/gator-permissions-snap/src/core/rules.tsx

@@ -32,7 +32,7 @@ export function renderRule<
   context: TContext;
   metadata: TMetadata;
 }): SnapElement | null {
-  const { label, type, name, isOptional } = rule;
+  const { label, type, name, isOptional, contentWhenDisabled } = rule;
   const {
     value,
     error,
@@ -68,6 +68,7 @@ export function renderRule<
           addFieldButtonName={addFieldButtonName}
           removeFieldButtonName={removeFieldButtonName}
           iconData={iconData}
+          contentWhenDisabled={contentWhenDisabled}
         />
       );
     }
@@ -104,6 +105,7 @@ export function renderRule<
           allowPastDate={allowPastDate}
           removeFieldButtonName={removeFieldButtonName}
           addFieldButtonName={addFieldButtonName}
+          contentWhenDisabled={contentWhenDisabled}
         />
       );
     }

packages/gator-permissions-snap/src/core/types.ts

@@ -218,6 +218,8 @@ export type RuleDefinition<
   getRuleData: (config: { context: TContext; metadata: TMetadata }) => RuleData;
   // todo: it would be nice if we could make the value type more specific
   updateContext: (context: TContext, value: any) => TContext;
+  /** When provided, called to get content shown when the field is toggled off. */
+  contentWhenDisabled?: () => string;
 };
 
 /**

packages/gator-permissions-snap/src/permissions/rules.ts

@@ -84,6 +84,7 @@ export const createExpiryRule = <
         expiry,
       };
     },
+    contentWhenDisabled: () => translate('expiryContentWhenDisabled'),
   };
 };
 

packages/gator-permissions-snap/src/ui/components/DateTimePickerField.tsx

@@ -12,6 +12,7 @@ export type DateTimePickerFieldParams = Pick<
   | 'isEditable'
   | 'removeFieldButtonName'
   | 'addFieldButtonName'
+  | 'contentWhenDisabled'
 > & {
   name: string;
   /** ISO 8601 formatted date string with timezone */
@@ -30,6 +31,7 @@ export const DateTimePickerField = ({
   allowPastDate,
   addFieldButtonName,
   removeFieldButtonName,
+  contentWhenDisabled,
 }: DateTimePickerFieldParams): JSX.Element => {
   const isFieldEnabled = value !== null && value !== undefined;
 
@@ -60,6 +62,7 @@ export const DateTimePickerField = ({
       errorMessage={errorMessage}
       isEditable={isEditable}
       isFieldEnabled={isFieldEnabled}
+      contentWhenDisabled={contentWhenDisabled}
       variant="form"
       addFieldButtonName={addFieldButtonName}
       removeFieldButtonName={removeFieldButtonName}

packages/gator-permissions-snap/src/ui/components/Field.tsx

@@ -36,6 +36,7 @@ export type BaseFieldProps = {
   isFieldEnabled?: boolean;
   addFieldButtonName?: string | undefined;
   removeFieldButtonName?: string | undefined;
+  contentWhenDisabled?: (() => string) | undefined;
 };
 
 export type ViewFieldProps = BaseFieldProps & {
@@ -104,6 +105,7 @@ const isDisplayFieldProps = (props: FieldProps): props is ViewFieldProps => {
  * @param props.isFieldEnabled - Whether the field is currently enabled (default: true).
  * @param props.addFieldButtonName - Name for the add field button (enables toggle).
  * @param props.removeFieldButtonName - Name for the remove field button (enables toggle).
+ * @param props.contentWhenDisabled - Optional content to show when the field is toggled off.
  * @param props.iconData - Optional icon data for display or input fields.
  * @param props.removeButtonName - Optional name for the remove button (input fields).
  * @param props.children - The content to render inside the field.
@@ -119,6 +121,7 @@ export const Field = (props: FieldProps): JSX.Element => {
     isFieldEnabled = true,
     addFieldButtonName,
     removeFieldButtonName,
+    contentWhenDisabled,
   } = props;
 
   const tooltipElement = tooltip ? <TooltipIcon tooltip={tooltip} /> : null;
@@ -167,7 +170,14 @@ export const Field = (props: FieldProps): JSX.Element => {
    * we only show the label section.
    */
   if (hasToggleButtons && !isFieldEnabled) {
-    return <Box direction="vertical">{labelSection}</Box>;
+    return (
+      <Box direction="vertical">
+        {labelSection}
+        {contentWhenDisabled ? (
+          <Text color="warning">{contentWhenDisabled()}</Text>
+        ) : null}
+      </Box>
+    );
   }
 
   if (isInputFieldProps(props) || isDisplayFieldProps(props)) {

packages/gator-permissions-snap/src/ui/components/InputField.tsx

@@ -13,6 +13,7 @@ export type InputFieldParams = Pick<
   | 'isEditable'
   | 'iconData'
   | 'errorMessage'
+  | 'contentWhenDisabled'
 > & {
   name: string;
   value: string | undefined;
@@ -30,6 +31,7 @@ export const InputField = ({
   isEditable = true,
   errorMessage,
   iconData,
+  contentWhenDisabled,
 }: InputFieldParams): JSX.Element => {
   if (!isEditable) {
     return (
@@ -54,6 +56,7 @@ export const InputField = ({
       removeFieldButtonName={removeFieldButtonName}
       isFieldEnabled={isFieldEnabled}
       iconData={iconData}
+      contentWhenDisabled={contentWhenDisabled}
       variant="form"
     >
       <Input name={name} type={type} value={value} />

packages/gator-permissions-snap/test/core/rules.test.ts

@@ -98,6 +98,16 @@ const optionalRule: RuleDefinition<TestContext, TestMetadata> = {
   updateContext: (context, value) => ({ ...context, optionalValue: value }),
 };
 
+const optionalRuleWithContentWhenDisabled: RuleDefinition<
+  TestContext,
+  TestMetadata
+> = {
+  ...optionalRule,
+  name: 'test-optional-rule-with-content',
+  label: 'Test Optional Rule With Content' as MessageKey,
+  contentWhenDisabled: () => 'Shown when this field is disabled.',
+};
+
 const undefinedValueRule: RuleDefinition<TestContext, TestMetadata> = {
   name: 'undefined-value-rule',
   label: 'Undefined Value Rule' as MessageKey,
@@ -379,6 +389,28 @@ describe('rules', () => {
 `);
     });
 
+    it('should render contentWhenDisabled when optional rule is toggled off', () => {
+      const { optionalValue: _omit, ...rest } = mockContext;
+      const contextWithOptionalDisabled = { ...rest } as TestContext;
+
+      const result = renderRule({
+        rule: optionalRuleWithContentWhenDisabled,
+        context: contextWithOptionalDisabled,
+        metadata: mockMetadata,
+      });
+
+      const children = result?.props?.children;
+      expect(Array.isArray(children)).toBe(true);
+      expect(children).toHaveLength(2);
+      const contentWhenDisabledElement = Array.isArray(children)
+        ? (children[1] as { type: string; props: { children: string } })
+        : undefined;
+      expect(contentWhenDisabledElement?.type).toBe('Text');
+      expect(contentWhenDisabledElement?.props?.children).toBe(
+        'Shown when this field is disabled.',
+      );
+    });
+
     it('should render an optional rule with remove button', () => {
       const result = renderRule({
         rule: optionalRule,