fix: Gantt Chart displays draft status of Plan in composition (#6642)

* fix: setStatus when add/replace a plan in composition

* test: add regression test

* chore: lint:fix

* test: add visual tests for plan and gantt chart drafts

e2e/tests/functional/planning/ganttChart.e2e.spec.js

@@ -28,12 +28,13 @@ const { getPreciseDuration } = require('../../../../src/utils/duration');
 
 test.describe("Gantt Chart", () => {
     let ganttChart;
+    let plan;
     test.beforeEach(async ({ page }) => {
         await page.goto('./', { waitUntil: 'domcontentloaded' });
         ganttChart = await createDomainObjectWithDefaults(page, {
             type: 'Gantt Chart'
         });
-        await createPlanFromJSON(page, {
+        plan = await createPlanFromJSON(page, {
             json: testPlan1,
             parent: ganttChart.uuid
         });
@@ -82,4 +83,21 @@ test.describe("Gantt Chart", () => {
         expect(expectedEndDate).toEqual(actualEndDate);
         expect(expectedDuration).toEqual(actualDuration);
     });
+    test("Displays a Plan's draft status", async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/6641'
+        });
+
+        // Mark the Plan's status as draft in the OpenMCT API
+        await page.evaluate(async (planObject) => {
+            await window.openmct.status.set(planObject.uuid, 'draft');
+        }, plan);
+
+        // Navigate to the Gantt Chart
+        await page.goto(ganttChart.url);
+
+        // Assert that the Plan's status is displayed as draft
+        expect(await page.locator('.u-contents.c-swimlane.is-status--draft').count()).toBe(Object.keys(testPlan1).length);
+    });
 });

e2e/tests/visual/planning.visual.spec.js

@@ -26,14 +26,16 @@ const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../ap
 const percySnapshot = require('@percy/playwright');
 const examplePlanSmall = require('../../test-data/examplePlans/ExamplePlan_Small2.json');
 
-const snapshotScope = '.c-object-view';
+const snapshotScope = '.l-shell__pane-main .l-pane__contents';
 
 test.describe('Visual - Planning', () => {
     test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
     });
+
     test('Plan View', async ({ page, theme }) => {
         const plan = await createPlanFromJSON(page, {
+            name: 'Plan Visual Test',
             json: examplePlanSmall
         });
 
@@ -42,9 +44,26 @@ test.describe('Visual - Planning', () => {
             scope: snapshotScope
         });
     });
+
+    test('Plan View w/ draft status', async ({ page, theme }) => {
+        const plan = await createPlanFromJSON(page, {
+            name: 'Plan Visual Test (Draft)',
+            json: examplePlanSmall
+        });
+        await page.goto('./#/browse/mine');
+
+        await setDraftStatusForPlan(page, plan);
+
+        await setBoundsToSpanAllActivities(page, examplePlanSmall, plan.url);
+        await percySnapshot(page, `Plan View w/ draft status (theme: ${theme})`, {
+            scope: snapshotScope
+        });
+    });
+
     test('Gantt Chart View', async ({ page, theme }) => {
         const ganttChart = await createDomainObjectWithDefaults(page, {
-            type: 'Gantt Chart'
+            type: 'Gantt Chart',
+            name: 'Gantt Chart Visual Test'
         });
         await createPlanFromJSON(page, {
             json: examplePlanSmall,
@@ -55,4 +74,35 @@ test.describe('Visual - Planning', () => {
             scope: snapshotScope
         });
     });
+
+    test('Gantt Chart View w/ draft status', async ({ page, theme }) => {
+        const ganttChart = await createDomainObjectWithDefaults(page, {
+            type: 'Gantt Chart',
+            name: 'Gantt Chart Visual Test (Draft)'
+        });
+        const plan = await createPlanFromJSON(page, {
+            json: examplePlanSmall,
+            parent: ganttChart.uuid
+        });
+
+        await setDraftStatusForPlan(page, plan);
+
+        await page.goto('./#/browse/mine');
+
+        await setBoundsToSpanAllActivities(page, examplePlanSmall, ganttChart.url);
+        await percySnapshot(page, `Gantt Chart View w/ draft status (theme: ${theme})`, {
+            scope: snapshotScope
+        });
+    });
 });
+
+/**
+ * Uses the Open MCT API to set the status of a plan to 'draft'.
+ * @param {import('@playwright/test').Page} page
+ * @param {import('../../appActions').CreatedObjectInfo} plan
+ */
+async function setDraftStatusForPlan(page, plan) {
+    await page.evaluate(async (planObject) => {
+        await window.openmct.status.set(planObject.uuid, 'draft');
+    }, plan);
+}

src/plugins/plan/components/Plan.vue

@@ -211,6 +211,7 @@ export default {
                             this.removeFromComposition(this.planObject);
                             this.planObject = domainObject;
                             this.planData = getValidatedData(domainObject);
+                            this.setStatus(this.openmct.status.get(domainObject.identifier));
                             this.setScaleAndGenerateActivities();
                             dialog.dismiss();
                         }
@@ -232,6 +233,7 @@ export default {
                 this.planObject = domainObject;
                 this.swimlaneVisibility = this.configuration.swimlaneVisibility;
                 this.planData = getValidatedData(domainObject);
+                this.setStatus(this.openmct.status.get(domainObject.identifier));
                 this.setScaleAndGenerateActivities();
             }
         },