Implement plan read only mode

src/components/activity/ActivityAnchorForm.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
+  import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import type { ActivityDirective, ActivityDirectiveId, ActivityDirectivesMap } from '../../types/activity';
   import type { DropdownOptions, SelectedDropdownOptionValue } from '../../types/dropdown';
   import { getTarget } from '../../utilities/generic';
@@ -21,10 +22,10 @@
   export let highlightKeysMap: Record<string, boolean> = {};
   export let isAnchoredToStart: boolean = true;
   export let startOffset: string | null = null;
+  export let planReadOnly: boolean = false;
 
   const dispatch = createEventDispatcher();
   const anchorTextDelimiter = ' - ';
-  const updatePermissionError: string = 'You do not have permission to update this anchor';
 
   let anchorableActivityDirectives: ActivityDirective[] = [];
   let anchoredActivity: ActivityDirective | null = null;
@@ -43,6 +44,9 @@
     value: anchorableActivity.id,
   }));
   $: startOffsetError = validateStartOffset(startOffsetString, activityDirective);
+  $: updatePermissionError = planReadOnly
+    ? PlanStatusMessages.READ_ONLY
+    : 'You do not have permission to update this anchor';
 
   $: if (startOffset) {
     const offsetString = convertUsToDurationString(getIntervalInMs(startOffset) * 1000, true);
@@ -150,13 +154,13 @@
         </label>
         <SearchableDropdown
           {disabled}
-          {hasUpdatePermission}
+          hasUpdatePermission={hasUpdatePermission && !planReadOnly}
           options={searchableOptions}
           placeholder="To Plan"
           searchPlaceholder="Search Directives"
           settingsIconTooltip="Set Anchor"
           selectedOptionValue={anchorId}
-          updatePermissionError="You do not have permission to update this anchor"
+          {updatePermissionError}
           on:selectOption={onSelectAnchor}
         />
       </Input>
@@ -177,7 +181,7 @@
             class:disabled
             role="none"
             use:permissionHandler={{
-              hasPermission: hasUpdatePermission,
+              hasPermission: hasUpdatePermission && !planReadOnly,
               permissionError: updatePermissionError,
             }}
             on:click={onAnchorToStart}
@@ -190,7 +194,7 @@
             class:selected={!isAnchoredToStart}
             class:disabled
             use:permissionHandler={{
-              hasPermission: hasUpdatePermission,
+              hasPermission: hasUpdatePermission && !planReadOnly,
               permissionError: updatePermissionError,
             }}
             on:click={onAnchorToEnd}
@@ -212,7 +216,7 @@
           {disabled}
           name="start-offset"
           use:permissionHandler={{
-            hasPermission: hasUpdatePermission,
+            hasPermission: hasUpdatePermission && !planReadOnly,
             permissionError: updatePermissionError,
           }}
           bind:value={startOffsetString}

src/components/activity/ActivityDirectiveForm.svelte

@@ -3,8 +3,9 @@
 <script lang="ts">
   import CheckIcon from '@nasa-jpl/stellar/icons/check.svg?component';
   import PenIcon from '@nasa-jpl/stellar/icons/pen.svg?component';
+  import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import { field } from '../../stores/form';
-  import { plan } from '../../stores/plan';
+  import { plan, planReadOnly } from '../../stores/plan';
   import type {
     ActivityDirective,
     ActivityDirectiveId,
@@ -51,8 +52,6 @@
   export let showHeader: boolean = true;
   export let user: User | null;
 
-  const updatePermissionError = 'You do not have permission to update this activity';
-
   let editingActivityName: boolean = false;
   let hasUpdatePermission: boolean = false;
   let numOfUserChanges: number = 0;
@@ -64,8 +63,12 @@
   let startTimeDoyField: FieldStore<string>;
 
   $: if (user !== null && $plan !== null) {
-    hasUpdatePermission = featurePermissions.activityDirective.canUpdate(user, $plan, activityDirective);
+    hasUpdatePermission =
+      featurePermissions.activityDirective.canUpdate(user, $plan, activityDirective) && !$planReadOnly;
   }
+  $: updatePermissionError = $planReadOnly
+    ? PlanStatusMessages.READ_ONLY
+    : 'You do not have permission to update this activity';
   $: highlightKeysMap = keyByBoolean(highlightKeys);
   $: activityType =
     (activityTypes ?? []).find(({ name: activityTypeName }) => activityDirective?.type === activityTypeName) ?? null;
@@ -385,6 +388,7 @@
         anchorId={activityDirective.anchor_id}
         disabled={!editable}
         {highlightKeysMap}
+        planReadOnly={$planReadOnly}
         isAnchoredToStart={activityDirective.anchored_to_start}
         startOffset={activityDirective.start_offset}
         on:updateAnchor={updateAnchor}

src/components/activity/ActivityDirectivesTable.svelte

@@ -18,6 +18,7 @@
   export let dataGrid: DataGrid<ActivityDirective> | undefined = undefined;
   export let plan: Plan | null;
   export let selectedActivityDirectiveId: ActivityDirectiveId | null = null;
+  export let planReadOnly: boolean = false;
   export let user: User | null;
 
   type CellRendererParams = {
@@ -30,7 +31,8 @@
   let hasDeletePermission: boolean = false;
   let isDeletingDirective: boolean = false;
 
-  $: hasDeletePermission = plan !== null ? featurePermissions.activityDirective.canDelete(user, plan) : false;
+  $: hasDeletePermission =
+    plan !== null ? featurePermissions.activityDirective.canDelete(user, plan) && !planReadOnly : false;
   $: {
     activityActionColumnDef = {
       cellClass: 'action-cell-container',
@@ -45,6 +47,7 @@
               placement: 'bottom',
             },
             hasDeletePermission,
+            planReadOnly,
             rowData: params.data,
           },
           target: actionsDiv,
@@ -96,6 +99,7 @@
   columnDefs={completeColumnDefs}
   {columnStates}
   {getRowId}
+  {planReadOnly}
   {hasDeletePermission}
   items={activityDirectives}
   pluralItemDisplayText="Activity Directives"

src/components/activity/ActivityDirectivesTablePanel.svelte

@@ -10,7 +10,7 @@
     selectActivity,
     selectedActivityDirectiveId,
   } from '../../stores/activities';
-  import { plan } from '../../stores/plan';
+  import { plan, planReadOnly } from '../../stores/plan';
   import { spanUtilityMaps, spansMap } from '../../stores/simulation';
   import { view, viewTogglePanel, viewUpdateActivityDirectivesTable } from '../../stores/views';
   import type { ActivityDirective } from '../../types/activity';
@@ -318,6 +318,7 @@
       columnDefs={derivedColumnDefs ?? []}
       columnStates={activityDirectivesTable?.columnStates}
       plan={$plan}
+      planReadOnly={$planReadOnly}
       {user}
       on:columnStateChange={onColumnStateChange}
       on:selectionChanged={onSelectionChanged}

src/components/activity/ActivityFormPanel.svelte

@@ -4,14 +4,22 @@
   import LockIcon from '@nasa-jpl/stellar/icons/lock.svg?component';
   import TrashIcon from '@nasa-jpl/stellar/icons/trash.svg?component';
   import UnlockIcon from '@nasa-jpl/stellar/icons/unlock.svg?component';
+  import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import {
     activityDirectivesMap,
     activityMetadataDefinitions,
     selectActivity,
     selectedActivityDirective,
   } from '../../stores/activities';
   import { filteredExpansionSequences } from '../../stores/expansion';
-  import { activityEditingLocked, activityTypes, modelId, plan, setActivityEditingLocked } from '../../stores/plan';
+  import {
+    activityEditingLocked,
+    activityTypes,
+    modelId,
+    plan,
+    planReadOnly,
+    setActivityEditingLocked,
+  } from '../../stores/plan';
   import { selectedSpan, simulationDatasetId, spanUtilityMaps, spansMap } from '../../stores/simulation';
   import { tags } from '../../stores/tags';
   import type { User } from '../../types/app';
@@ -30,12 +38,14 @@
   export let gridSection: ViewGridSection;
   export let user: User | null;
 
-  const deletePermissionError = 'You do not have permission to delete this activity';
-
   let hasDeletePermission: boolean = false;
 
+  $: deletePermissionError = $planReadOnly
+    ? PlanStatusMessages.READ_ONLY
+    : 'You do not have permission to delete this activity';
   $: if (user !== null && $plan !== null && $selectedActivityDirective !== null) {
-    hasDeletePermission = featurePermissions.activityDirective.canDelete(user, $plan, $selectedActivityDirective);
+    hasDeletePermission =
+      featurePermissions.activityDirective.canDelete(user, $plan, $selectedActivityDirective) && !$planReadOnly;
   }
 
   function onSelectSpan(event: CustomEvent<SpanId>) {

src/components/activity/ActivityPresetInput.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
+  import { planReadOnly } from '../../stores/plan';
   import { gqlSubscribable } from '../../stores/subscribable';
   import type { ActivityDirective, ActivityPreset } from '../../types/activity';
   import type { User } from '../../types/app';
@@ -54,14 +55,15 @@
     // because we also assign after preset creation, we must include both checks here as part of the creation permission check
     hasCreatePermission =
       featurePermissions.activityPresets.canCreate(user, plan) &&
-      featurePermissions.activityPresets.canAssign(user, plan);
+      featurePermissions.activityPresets.canAssign(user, plan) &&
+      !$planReadOnly;
 
     const selectedPreset = $activityPresets.find(
       activityPreset => activityPreset.id === activityDirective?.applied_preset?.preset_id,
     );
     if (selectedPreset !== undefined) {
-      hasDeletePermission = featurePermissions.activityPresets.canDelete(user, plan, selectedPreset);
-      hasUpdatePermission = featurePermissions.activityPresets.canUpdate(user, plan, selectedPreset);
+      hasDeletePermission = featurePermissions.activityPresets.canDelete(user, plan, selectedPreset) && !$planReadOnly;
+      hasUpdatePermission = featurePermissions.activityPresets.canUpdate(user, plan, selectedPreset) && !$planReadOnly;
     }
   }
 
@@ -100,6 +102,7 @@
         {options}
         optionLabel="preset"
         placeholder="None"
+        planReadOnly={$planReadOnly}
         selectedOptionValue={activityDirective?.applied_preset?.preset_id}
         showPlaceholderOption={hasAssignPermission}
         on:deleteOption={onDeletePreset}

src/components/activity/ActivityTypesPanel.svelte

@@ -2,7 +2,8 @@
 
 <script lang="ts">
   import PlusIcon from 'bootstrap-icons/icons/plus.svg?component';
-  import { activityTypes, plan } from '../../stores/plan';
+  import { PlanStatusMessages } from '../../enums/planStatusMessages';
+  import { activityTypes, plan, planReadOnly } from '../../stores/plan';
   import type { ActivityType } from '../../types/activity';
   import type { User } from '../../types/app';
   import type { ViewGridSection } from '../../types/view';
@@ -16,13 +17,12 @@
   export let gridSection: ViewGridSection;
   export let user: User | null;
 
-  const permissionError = 'You do not have permission to add an activity.';
-
   let filterText: string = '';
   let hasPermission: boolean = false;
 
+  $: permissionError = $planReadOnly ? PlanStatusMessages.READ_ONLY : 'You do not have permission to add an activity.';
   $: if ($plan !== null) {
-    hasPermission = featurePermissions.activityDirective.canCreate(user, $plan);
+    hasPermission = featurePermissions.activityDirective.canCreate(user, $plan) && !$planReadOnly;
   }
   $: filteredActivityTypes = ($activityTypes ?? []).filter(({ name }) =>
     name.toLowerCase().includes(filterText.toLowerCase()),

src/components/constraints/ConstraintsPanel.svelte

@@ -8,6 +8,7 @@
   import PlanRightArrow from '@nasa-jpl/stellar/icons/plan_with_right_arrow.svg?component';
   import VisibleHideIcon from '@nasa-jpl/stellar/icons/visible_hide.svg?component';
   import VisibleShowIcon from '@nasa-jpl/stellar/icons/visible_show.svg?component';
+  import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import {
     checkConstraintsStatus,
     constraintResultMap,
@@ -18,7 +19,7 @@
     setConstraintVisibility,
   } from '../../stores/constraints';
   import { field } from '../../stores/form';
-  import { plan, viewTimeRange } from '../../stores/plan';
+  import { plan, planReadOnly, viewTimeRange } from '../../stores/plan';
   import type { User } from '../../types/app';
   import type { Constraint, ConstraintResult } from '../../types/constraint';
   import type { FieldStore } from '../../types/form';
@@ -168,8 +169,10 @@
           [
             permissionHandler,
             {
-              hasPermission: $plan ? featurePermissions.constraints.canCheck(user, $plan) : false,
-              permissionError: 'You do not have permission to run constraint checks',
+              hasPermission: $plan ? featurePermissions.constraints.canCheck(user, $plan) && !$planReadOnly : false,
+              permissionError: $planReadOnly
+                ? PlanStatusMessages.READ_ONLY
+                : 'You do not have permission to run constraint checks',
             },
           ],
         ]}
@@ -194,8 +197,10 @@
           name="new-constraint"
           class="st-button secondary"
           use:permissionHandler={{
-            hasPermission: $plan ? featurePermissions.constraints.canCreate(user, $plan) : false,
-            permissionError: 'You do not have permission to create constraints',
+            hasPermission: $plan ? featurePermissions.constraints.canCreate(user, $plan) && !$planReadOnly : false,
+            permissionError: $planReadOnly
+              ? PlanStatusMessages.READ_ONLY
+              : 'You do not have permission to create constraints',
           }}
           on:click={() => window.open(`${base}/constraints/new`, '_blank')}
         >

src/components/expansion/ExpansionPanel.svelte

@@ -3,14 +3,15 @@
 <script lang="ts">
   import { base } from '$app/paths';
   import type { ICellRendererParams } from 'ag-grid-community';
+  import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import {
     creatingExpansionSequence,
     expansionSets,
     filteredExpansionSequences,
     planExpansionStatus,
     selectedExpansionSetId,
   } from '../../stores/expansion';
-  import { plan } from '../../stores/plan';
+  import { plan, planReadOnly } from '../../stores/plan';
   import { simulationDatasetId } from '../../stores/simulation';
   import type { User } from '../../types/app';
   import type { DataGridColumnDef, RowId } from '../../types/data-grid';
@@ -69,9 +70,9 @@
   let selectedExpansionSet: ExpansionSet | null;
 
   $: if (user !== null && $plan !== null) {
-    hasCreatePermission = featurePermissions.expansionSequences.canCreate(user);
-    hasDeletePermission = featurePermissions.expansionSequences.canDelete(user, $plan);
-    hasExpandPermission = featurePermissions.expansionSequences.canExpand(user, $plan);
+    hasCreatePermission = featurePermissions.expansionSequences.canCreate(user) && !$planReadOnly;
+    hasDeletePermission = featurePermissions.expansionSequences.canDelete(user, $plan) && !$planReadOnly;
+    hasExpandPermission = featurePermissions.expansionSequences.canExpand(user, $plan) && !$planReadOnly;
   }
   $: {
     columnDefs = [
@@ -148,7 +149,9 @@
             permissionHandler,
             {
               hasPermission: hasExpandPermission,
-              permissionError: 'You do not have permission to expand sequences',
+              permissionError: $planReadOnly
+                ? PlanStatusMessages.READ_ONLY
+                : 'You do not have permission to expand sequences',
             },
           ],
         ]}
@@ -247,15 +250,19 @@
                     class="st-input"
                     use:permissionHandler={{
                       hasPermission: hasCreatePermission,
-                      permissionError: 'You do not have permission to create an expansion',
+                      permissionError: $planReadOnly
+                        ? PlanStatusMessages.READ_ONLY
+                        : 'You do not have permission to create an expansion',
                     }}
                   />
                   <button
                     class="st-button secondary"
                     disabled={!createButtonEnabled}
                     use:permissionHandler={{
                       hasPermission: hasCreatePermission,
-                      permissionError: 'You do not have permission to create an expansion',
+                      permissionError: $planReadOnly
+                        ? PlanStatusMessages.READ_ONLY
+                        : 'You do not have permission to create an expansion',
                     }}
                     on:click|stopPropagation={() =>
                       effects.createExpansionSequence(seqIdInput, $simulationDatasetId, user)}