#8610: rename dynamicElement -> draftModComponent (#8657)

* rename dynamicElement -> draftModComponent

* renaming

* fix test label

* updateDraftElement -> updateDraftModComponent

src/background/deploymentUpdater.test.ts

@@ -357,11 +357,11 @@ describe("syncDeployments", () => {
     const { extensions: activatedModComponents } = await getModComponentState();
     expect(activatedModComponents).toBeArrayOfSize(2);
     const foo = await getEditorState();
-    // Expect unrelated dynamic element not to be removed
+    // Expect unrelated draft mod component not to be removed
     expect(foo.elements).toBeArrayOfSize(1);
   });
 
-  test("deactivate existing mod with no dynamic elements", async () => {
+  test("deactivate existing mod with no draft mod components", async () => {
     isLinkedMock.mockResolvedValue(true);
 
     const { deployment, modDefinition } = activatableDeploymentFactory();
@@ -407,7 +407,7 @@ describe("syncDeployments", () => {
     );
   });
 
-  test("deactivate existing mod with dynamic element", async () => {
+  test("deactivate existing mod with draft mod components", async () => {
     isLinkedMock.mockResolvedValue(true);
 
     const { deployment, modDefinition } = activatableDeploymentFactory();
@@ -464,7 +464,7 @@ describe("syncDeployments", () => {
     const { extensions: activatedModComponents } = await getModComponentState();
     expect(activatedModComponents).toBeArrayOfSize(1);
     const { elements } = await getEditorState();
-    // Expect dynamic element to be removed
+    // Expect draft mod component to be removed
     expect(elements).toBeArrayOfSize(0);
     expect(activatedModComponents[0]._recipe.version).toBe(
       deployment.package.version,

src/background/removeExtensionForEveryTab.ts

@@ -18,7 +18,7 @@
 import {
   removeInstalledExtension,
   removeSidebars,
-  clearDynamicElements,
+  clearDraftModComponents,
 } from "@/contentScript/messenger/api";
 import { forEachTab } from "@/utils/extensionUtils";
 import { type UUID } from "@/types/stringTypes";
@@ -34,7 +34,7 @@ export async function removeExtensionForEveryTab(
   await forEachTab(async ({ tabId }) => {
     const allFrames = { tabId, frameId: "allFrames" } as const;
     removeInstalledExtension(allFrames, extensionId);
-    clearDynamicElements(allFrames, { uuid: extensionId });
+    clearDraftModComponents(allFrames, { uuid: extensionId });
     await removeSidebars({ tabId }, [extensionId]);
   });
   await uninstallContextMenu({ extensionId });

src/bricks/types.ts

@@ -162,7 +162,7 @@ export type BrickConfig = {
   /**
    * A unique id for the configured brick, used to correlate traces across runs when using the Page Editor.
    *
-   * DO NOT SET: generated automatically by the Page Editor when configuring a dynamic element.
+   * DO NOT SET: generated automatically by the Page Editor when configuring a draft mod component.
    */
   instanceId?: UUID;
 

src/contentScript/lifecycle.ts

@@ -264,13 +264,13 @@ export function removePersistedExtension(extensionId: UUID): void {
 /**
  * Remove a page editor extensions extension(s) from the page.
  *
- * NOTE: if the dynamic extension was taking the place of a "permanent" extension, call `reactivate` or a similar
+ * NOTE: if the draft mod component was taking the place of a "permanent" extension, call `reactivate` or a similar
  * method for the extension to be reloaded.
  *
  * NOTE: this works by removing all extensions attached to the extension point. Call `reactivate` or a similar
  * method to re-install the installed extensions.
  *
- * @param extensionId the uuid of the dynamic extension, or undefined to clear all dynamic extensions
+ * @param extensionId the uuid of the draft mod component, or undefined to clear all draft mod components
  * @param options options to control clear behavior
  */
 export function clearEditorExtension(
@@ -302,7 +302,7 @@ export function clearEditorExtension(
       _editorExtensions.delete(extensionId);
       sidebar.removeExtensions([extensionId]);
     } else {
-      console.debug(`No dynamic extension exists for uuid: ${extensionId}`);
+      console.debug(`No draft mod component exists for uuid: ${extensionId}`);
     }
 
     if (clearTrace) {
@@ -341,7 +341,7 @@ export async function runEditorExtension(
   extensionId: UUID,
   extensionPoint: StarterBrick,
 ): Promise<void> {
-  // Uninstall the installed extension point instance in favor of the dynamic extensionPoint
+  // Uninstall the installed extension point instance in favor of the draft mod componentPoint
   if (_persistedExtensions.has(extensionId)) {
     removePersistedExtension(extensionId);
   }
@@ -401,7 +401,7 @@ function cleanUpDeactivatedExtensionPoints(
  *
  * Includes starter bricks that are not available on the page.
  *
- * NOTE: Excludes dynamic extensions that are already on the page via the Page Editor.
+ * NOTE: Excludes draft mod components that are already on the page via the Page Editor.
  */
 async function loadPersistedExtensions(): Promise<StarterBrick[]> {
   console.debug("lifecycle:loadPersistedExtensions");
@@ -412,7 +412,7 @@ async function loadPersistedExtensions(): Promise<StarterBrick[]> {
 
   // Exclude the following:
   // - disabled deployments: the organization admin might have disabled the deployment because via Admin Console
-  // - dynamic extensions: these are already installed on the page via the Page Editor
+  // - draft mod components: these are already installed on the page via the Page Editor
   const activeExtensions = options.extensions.filter((extension) => {
     if (_editorExtensions.has(extension.id)) {
       const editorExtension = _editorExtensions.get(extension.id);

src/contentScript/messenger/api.ts

@@ -103,6 +103,10 @@ export const getInstalledExtensionPoints = getMethod(
 );
 export const resetTab = getNotifier("RESET_TAB");
 export const toggleQuickBar = getMethod("TOGGLE_QUICK_BAR");
-export const clearDynamicElements = getNotifier("CLEAR_DYNAMIC_ELEMENTS");
-export const updateDynamicElement = getNotifier("UPDATE_DYNAMIC_ELEMENT");
+export const clearDraftModComponents = getNotifier(
+  "CLEAR_DRAFT_MOD_COMPONENTS",
+);
+export const updateDraftModComponent = getNotifier(
+  "UPDATE_DRAFT_MOD_COMPONENT",
+);
 export const checkAvailable = getMethod("CHECK_AVAILABLE");

src/contentScript/messenger/registration.ts

@@ -53,7 +53,7 @@ import { insertButton } from "@/contentScript/pageEditor/insertButton";
 import {
   disableOverlay,
   enableOverlay,
-} from "@/contentScript/pageEditor/dynamic/overlay";
+} from "@/contentScript/pageEditor/draft/overlay";
 import { runMapArgs } from "@/contentScript/pipelineProtocol/runMapArgs";
 import { getCopilotHostData } from "@/contrib/automationanywhere/SetCopilotDataEffect";
 import { showBannerFromConfig } from "@/contentScript/integrations/deferredLoginController";
@@ -62,7 +62,7 @@ import { runBrick } from "@/contentScript/executor";
 import { runHeadlessPipeline } from "@/contentScript/pipelineProtocol/runHeadlessPipeline";
 import { runRendererBlock } from "@/contentScript/pageEditor/runRendererBlock";
 import { runRendererPipeline } from "@/contentScript/pipelineProtocol/runRendererPipeline";
-import { runStarterBrickReader } from "@/contentScript/pageEditor/dynamic/runStarterBrickReader";
+import { runStarterBrickReader } from "@/contentScript/pageEditor/draft/runStarterBrickReader";
 import {
   activatePrerenderedTab,
   ensureInstalled,
@@ -71,8 +71,8 @@ import {
   reactivateTab,
   removePersistedExtension,
 } from "@/contentScript/lifecycle";
-import { clearDynamicElements } from "@/contentScript/pageEditor/dynamic/clearDynamicElements";
-import { updateDynamicElement } from "@/contentScript/pageEditor/dynamic/updateDynamicElement";
+import { clearDraftModComponents } from "@/contentScript/pageEditor/draft/clearDraftModComponents";
+import { updateDraftModComponent } from "@/contentScript/pageEditor/draft/updateDraftModComponent";
 import { resetTab } from "@/contentScript/pageEditor/resetTab";
 
 declare global {
@@ -125,8 +125,8 @@ declare global {
     INSTALLED_EXTENSION_POINTS: typeof getActiveExtensionPoints;
     ENSURE_EXTENSION_POINTS_INSTALLED: typeof ensureInstalled;
     RESET_TAB: typeof resetTab;
-    CLEAR_DYNAMIC_ELEMENTS: typeof clearDynamicElements;
-    UPDATE_DYNAMIC_ELEMENT: typeof updateDynamicElement;
+    CLEAR_DRAFT_MOD_COMPONENTS: typeof clearDraftModComponents;
+    UPDATE_DRAFT_MOD_COMPONENT: typeof updateDraftModComponent;
   }
 }
 export default function registerMessenger(): void {
@@ -179,7 +179,7 @@ export default function registerMessenger(): void {
     INSTALLED_EXTENSION_POINTS: getActiveExtensionPoints,
     ENSURE_EXTENSION_POINTS_INSTALLED: ensureInstalled,
     RESET_TAB: resetTab,
-    CLEAR_DYNAMIC_ELEMENTS: clearDynamicElements,
-    UPDATE_DYNAMIC_ELEMENT: updateDynamicElement,
+    CLEAR_DRAFT_MOD_COMPONENTS: clearDraftModComponents,
+    UPDATE_DRAFT_MOD_COMPONENT: updateDraftModComponent,
   });
 }

src/contentScript/pageEditor/dynamic/clearDynamicElements.ts → src/contentScript/pageEditor/draft/clearDraftModComponents.ts

@@ -21,10 +21,10 @@ import { expectContext } from "@/utils/expectContext";
 
 /**
  * A version of `clearEditorExtension` that takes an object instead of a positional UUID argument.
- * @param uuid the uuid of the extension, or null to clear all page editor extensions
+ * @param uuid the uuid of the mod component, or null to clear all page editor mod components
  * @see clearEditorExtension
  */
-export async function clearDynamicElements({
+export async function clearDraftModComponents({
   uuid,
 }: {
   uuid?: UUID;

src/contentScript/pageEditor/dynamic/runStarterBrickReader.ts → src/contentScript/pageEditor/draft/runStarterBrickReader.ts

@@ -18,13 +18,13 @@
 import { type JsonObject } from "type-fest";
 import { type SelectorRoot } from "@/types/runtimeTypes";
 import { $safeFind } from "@/utils/domUtils";
-import { type DynamicDefinition } from "@/contentScript/pageEditor/types";
+import { type DraftModComponent } from "@/contentScript/pageEditor/types";
 import { expectContext } from "@/utils/expectContext";
 import { fromJS as starterBrickFactory } from "@/starterBricks/factory";
 import { type Nullishable } from "@/utils/nullishUtils";
 
 export async function runStarterBrickReader(
-  { extensionPointConfig }: Pick<DynamicDefinition, "extensionPointConfig">,
+  { extensionPointConfig }: Pick<DraftModComponent, "extensionPointConfig">,
   rootSelector: Nullishable<string>,
 ): Promise<JsonObject> {
   expectContext("contentScript");

src/contentScript/pageEditor/dynamic/updateDynamicElement.ts → src/contentScript/pageEditor/draft/updateDraftModComponent.ts

@@ -23,18 +23,18 @@ import { fromJS as starterBrickFactory } from "@/starterBricks/factory";
 import { resolveExtensionInnerDefinitions } from "@/registry/internal";
 import { expectContext } from "@/utils/expectContext";
 import { type TriggerDefinition } from "@/starterBricks/trigger/triggerStarterBrick";
-import type { DynamicDefinition } from "@/contentScript/pageEditor/types";
+import type { DraftModComponent } from "@/contentScript/pageEditor/types";
 import {
   activateExtensionPanel,
   showSidebar,
 } from "@/contentScript/sidebarController";
 import { type TourDefinition } from "@/starterBricks/tour/types";
 import { isLoadedInIframe } from "@/utils/iframeUtils";
 
-export async function updateDynamicElement({
+export async function updateDraftModComponent({
   extensionPointConfig,
   extension: extensionConfig,
-}: DynamicDefinition): Promise<void> {
+}: DraftModComponent): Promise<void> {
   expectContext("contentScript");
 
   // Iframes should not attempt to control the sidebar
@@ -63,7 +63,7 @@ export async function updateDynamicElement({
 
   const starterBrick = starterBrickFactory(extensionPointConfig);
 
-  // Don't clear actionPanel because it causes flicking between the tabs in the sidebar. The updated dynamic element
+  // Don't clear actionPanel because it causes flicking between the tabs in the sidebar. The updated draft mod component
   // will automatically replace the old panel because the panels are keyed by extension id
   if (starterBrick.kind !== "actionPanel") {
     clearEditorExtension(extensionConfig.id, { clearTrace: false });

src/contentScript/pageEditor/resetTab.ts

@@ -16,11 +16,11 @@
  */
 
 import { reactivateTab } from "@/contentScript/lifecycle";
-import { clearDynamicElements } from "@/contentScript/pageEditor/dynamic/clearDynamicElements";
+import { clearDraftModComponents } from "@/contentScript/pageEditor/draft/clearDraftModComponents";
 import { stopInspectingNativeHandler } from "@/contentScript/pageEditor/elementPicker";
 
 export async function resetTab(): Promise<void> {
   stopInspectingNativeHandler();
-  await clearDynamicElements({});
+  await clearDraftModComponents({});
   await reactivateTab();
 }

src/contentScript/pageEditor/types.ts

@@ -35,7 +35,7 @@ import { type UUID } from "@/types/stringTypes";
 import { type ApiVersion, type BrickArgsContext } from "@/types/runtimeTypes";
 import { type BrickConfig } from "@/bricks/types";
 
-export interface DynamicDefinition<
+export interface DraftModComponent<
   TExtensionPoint extends
     StarterBrickDefinitionProp = StarterBrickDefinitionProp,
   TExtension extends UnknownObject = UnknownObject,
@@ -55,7 +55,7 @@ export type PanelSelectionResult = {
   panel: Except<PanelConfig, "body">;
   containerInfo: ElementInfo;
 };
-export type ButtonDefinition = DynamicDefinition<
+export type ButtonDefinition = DraftModComponent<
   MenuItemDefinition,
   MenuItemStarterBrickConfig
 >;

src/pageEditor/EditorContent.test.tsx

@@ -44,7 +44,7 @@ jest.mock("@/pageEditor/hooks/useCurrentInspectedUrl");
 jest.mock("@/contentScript/messenger/api");
 
 describe("error alerting in the UI", () => {
-  test("shows error when checkAvailableDynamicElements fails", async () => {
+  test("shows error when checkAvailableDraftModComponents fails", async () => {
     const message = "testing error";
     jest.mocked(getCurrentInspectedURL).mockImplementation(() => {
       throw new Error(message);
@@ -55,7 +55,7 @@ describe("error alerting in the UI", () => {
       async setupRedux(dispatch) {
         dispatch(editorActions.addModComponentFormState(formState));
         dispatch(editorActions.selectElement(formState.uuid));
-        await dispatch(editorActions.checkAvailableDynamicElements());
+        await dispatch(editorActions.checkAvailableDraftModComponents());
       },
     });
 

src/pageEditor/EditorContent.tsx

@@ -49,8 +49,10 @@ const EditorContent: React.FC = () => {
   const { isBetaError, editorError } = useSelector(selectErrorState);
   const activeModComponentId = useSelector(selectActiveModComponentId);
   const activeModId = useSelector(selectActiveModId);
-  const { isPendingInstalledModComponents, isPendingDynamicModComponents } =
-    useSelector(selectModComponentAvailability);
+  const {
+    isPendingInstalledModComponents,
+    isPendingDraftModComponents: isPendingDynamicModComponents,
+  } = useSelector(selectModComponentAvailability);
 
   const isPendingModComponents =
     isPendingInstalledModComponents || isPendingDynamicModComponents;

src/pageEditor/PanelContent.test.tsx

@@ -21,7 +21,7 @@ import { render } from "./testHelpers";
 import { navigationEvent } from "@/pageEditor/events";
 import { tabStateActions } from "@/pageEditor/tabState/tabStateSlice";
 import { waitForEffect } from "@/testUtils/testHelpers";
-import { updateDynamicElement } from "@/contentScript/messenger/api";
+import { updateDraftModComponent } from "@/contentScript/messenger/api";
 import { actions as editorActions } from "@/pageEditor/slices/editorSlice";
 
 import { formStateFactory } from "@/testUtils/factories/pageEditorFactories";
@@ -49,7 +49,7 @@ describe("Listen to navigationEvent", () => {
 
     // One call on load and one on navigation event
     expect(tabStateActions.connectToContentScript).toHaveBeenCalledTimes(2);
-    expect(updateDynamicElement).not.toHaveBeenCalled();
+    expect(updateDraftModComponent).not.toHaveBeenCalled();
   });
 
   test("an element is selected", async () => {
@@ -64,12 +64,12 @@ describe("Listen to navigationEvent", () => {
     });
     await waitForEffect();
     expect(tabStateActions.connectToContentScript).toHaveBeenCalledTimes(1);
-    expect(updateDynamicElement).not.toHaveBeenCalled();
+    expect(updateDraftModComponent).not.toHaveBeenCalled();
 
     navigationEvent.emit();
 
     expect(tabStateActions.connectToContentScript).toHaveBeenCalledTimes(2);
     // Panels are not automatically updated on navigation
-    expect(updateDynamicElement).toHaveBeenCalledTimes(0);
+    expect(updateDraftModComponent).toHaveBeenCalledTimes(0);
   });
 });

src/pageEditor/PanelContent.tsx

@@ -29,11 +29,11 @@ import EditorLayout from "@/pageEditor/EditorLayout";
 import { PersistGate } from "redux-persist/integration/react";
 import { logActions } from "@/components/logViewer/logSlice";
 import {
-  updateDynamicElement,
+  updateDraftModComponent,
   removeInstalledExtension,
 } from "@/contentScript/messenger/api";
 import { selectActiveModComponentFormState } from "./slices/editorSelectors";
-import { formStateToDynamicElement } from "./starterBricks/adapter";
+import { formStateToDraftModComponent } from "./starterBricks/adapter";
 import { shouldAutoRun } from "@/pageEditor/toolbar/ReloadToolbar";
 import ReduxPersistenceContext, {
   type ReduxPersistenceContextType,
@@ -77,10 +77,10 @@ const PanelContent: React.FC = () => {
       activeModComponentFormState != null &&
       shouldAutoRun(activeModComponentFormState)
     ) {
-      const dynamicElement = formStateToDynamicElement(
+      const draftModComponent = formStateToDraftModComponent(
         activeModComponentFormState,
       );
-      updateDynamicElement(allFramesInInspectedTab, dynamicElement);
+      updateDraftModComponent(allFramesInInspectedTab, draftModComponent);
     }
   }, [dispatch, activeModComponentFormState]);
 

src/pageEditor/editorPermissionsHelpers.ts

@@ -41,7 +41,7 @@ export async function calculatePermissionsForModComponentFormState(
   const {
     extension: modComponent,
     extensionPointConfig: starterBrickDefinition,
-  } = adapter.asDynamicElement(modComponentFormState);
+  } = adapter.asDraftModComponent(modComponentFormState);
 
   const starterBrick = starterBrickFactory(starterBrickDefinition);
 

src/pageEditor/hooks/useAddNewModComponent.ts

@@ -22,7 +22,7 @@ import { actions } from "@/pageEditor/slices/editorSlice";
 import { internalStarterBrickMetaFactory } from "@/pageEditor/starterBricks/base";
 import { isSpecificError } from "@/errors/errorHelpers";
 import { type ModComponentFormStateAdapter } from "@/pageEditor/starterBricks/modComponentFormStateAdapter";
-import { updateDynamicElement } from "@/contentScript/messenger/api";
+import { updateDraftModComponent } from "@/contentScript/messenger/api";
 import { type SettingsState } from "@/store/settings/settingsTypes";
 import useFlags from "@/hooks/useFlags";
 import { type ModComponentFormState } from "@/pageEditor/starterBricks/formStateTypes";
@@ -76,9 +76,9 @@ function useAddNewModComponent(): AddNewModComponent {
           element,
         );
 
-        updateDynamicElement(
+        updateDraftModComponent(
           allFramesInInspectedTab,
-          modComponentFormStateAdapter.asDynamicElement(initialState),
+          modComponentFormStateAdapter.asDraftModComponent(initialState),
         );
 
         dispatch(