Custom widgets - force prefix name to prevent collisions

Author: JMach1

src/admin/custom-widgets/customWidgetDetailsModal.tsx

@@ -15,6 +15,7 @@ import { ChoiceGroup, CommandBarButton, DefaultButton, IChoiceGroupOption, Icon,
 import { DeleteConfirmationOverlay } from '../utils/components/deleteConfirmationOverlay';
 import { CopyableTextField } from '../utils/components/copyableTextField';
 import { UNIQUE_REQUIRED, validateField } from '../utils/validator';
+import { customWidgetPrefixName } from "../../components/custom-widget/ko/utils";
 
 interface CustomWidgetDetailsModalState {
     isEdit: boolean,
@@ -100,15 +101,15 @@ export class CustomWidgetDetailsModal extends React.Component<CustomWidgetDetail
         await this.blobStorage.uploadBlob(`/${dataPath}index.html`, fallbackUiUnit8);
         await this.blobStorage.uploadBlob(`/${dataPath}editor.html`, fallbackUiUnit8);
 
-        this.widgetService.registerWidget(name, {
+        this.widgetService.registerWidget(customWidgetPrefixName(name), {
             modelDefinition: CustomWidgetModel,
             componentBinder: KnockoutComponentBinder,
             componentDefinition: CustomWidgetViewModel,
             modelBinder: CustomWidgetModelBinder,
             viewModelBinder: CustomWidgetViewModelBinder
         });
 
-        this.widgetService.registerWidgetEditor(name, {
+        this.widgetService.registerWidgetEditor(customWidgetPrefixName(name), {
             displayName: this.state.customWidget.displayName,
             category: widgetCategory,
             iconClass: "widget-icon widget-icon-component",
@@ -200,7 +201,7 @@ export class CustomWidgetDetailsModal extends React.Component<CustomWidgetDetail
                     }
                     <Stack className={`collapsible-section${!this.state.showInstructions ? ' hidden' : ''}`}>
                         <Text block styles={{ root: { paddingTop: 20 } }}>
-                            Follow the steps below to create, implement, and deploy a custom widget. 
+                            Follow the steps below to create, implement, and deploy a custom widget.
                             <Link href="https://aka.ms/apimdocs/portal/customwidgets" target="_blank">Learn more</Link>.
                         </Text>
                         <ol>

src/components/custom-widget-list/createWidget.ts

@@ -14,6 +14,7 @@ import template from "./createWidget.html";
 import fallbackUi from "!!raw-loader!./fallbackUi.html";
 import { KnockoutComponentBinder } from "@paperbits/core/ko/knockoutComponentBinder";
 import { CustomWidgetEditorViewModel, CustomWidgetViewModel, CustomWidgetViewModelBinder } from "../custom-widget/ko";
+import { customWidgetPrefixName } from "../custom-widget/ko/utils";
 
 const techToName: Record<ScaffoldTech, string> = {
     typescript: "TypeScript",
@@ -102,15 +103,15 @@ export class CreateWidget {
         await this.blobStorage.uploadBlob(`/${dataPath}index.html`, fallbackUiUnit8);
         await this.blobStorage.uploadBlob(`/${dataPath}editor.html`, fallbackUiUnit8);
 
-        this.widgetService.registerWidget(name, {
+        this.widgetService.registerWidget(customWidgetPrefixName(name), {
             modelDefinition: CustomWidgetModel,
             componentBinder: KnockoutComponentBinder,
             componentDefinition: CustomWidgetViewModel,
             modelBinder: CustomWidgetModelBinder,
             viewModelBinder: CustomWidgetViewModelBinder
         });
 
-        this.widgetService.registerWidgetEditor(name, {
+        this.widgetService.registerWidgetEditor(customWidgetPrefixName(name), {
             displayName: displayName,
             category: widgetCategory,
             iconClass: "widget-icon widget-icon-component",
@@ -128,7 +129,7 @@ export class CreateWidget {
     public async deleteWidget(): Promise<void> {
         if (!this.config) return alert("Didn't found config to delete.")
 
-        if (!confirm(`This operation is in-reversible, are you sure you want to delete custom widget '${this.config.displayName}'?`)) return;
+        if (!confirm(`This operation is in-reversible, are you sure you want to delete custom widget '${this.config.displayName}' (ID: ${this.config.name})?`)) return;
 
         const blobsToDelete = await this.blobStorage.listBlobs(buildBlobDataPath(this.config.name));
         blobsToDelete.push(buildBlobConfigPath(this.config.name));

src/components/custom-widget-list/customWidgetList.module.ts

@@ -11,6 +11,7 @@ import { DevelopmentInstructions } from "./developmentInstructions";
 import { CopyCode } from "./copyCode";
 import { KnockoutComponentBinder } from "@paperbits/core/ko";
 import { CustomWidgetEditorViewModel, CustomWidgetViewModel, CustomWidgetViewModelBinder } from "../custom-widget/ko";
+import { customWidgetPrefixName } from "../custom-widget/ko/utils";
 
 export class CustomWidgetListModule implements IInjectorModule {
     public register(injector: IInjector): void {
@@ -27,15 +28,15 @@ export class CustomWidgetListModule implements IInjectorModule {
 
         const widgetService = injector.resolve<IWidgetService>("widgetService");
         configsPromise.then(configs => configs.forEach(config => {
-            widgetService.registerWidget(config.name, {
+            widgetService.registerWidget(customWidgetPrefixName(config.name), {
                 modelDefinition: CustomWidgetModel,
                 componentBinder: KnockoutComponentBinder,
                 componentDefinition: CustomWidgetViewModel,
                 modelBinder: CustomWidgetModelBinder,
                 viewModelBinder: CustomWidgetViewModelBinder
             });
 
-            widgetService.registerWidgetEditor(config.name, {
+            widgetService.registerWidgetEditor(customWidgetPrefixName(config.name), {
                 displayName: config.displayName || config.name,
                 category: widgetCategory,
                 iconClass: "widget-icon widget-icon-component",

src/components/custom-widget/customWidgetHandlers.ts

@@ -3,6 +3,7 @@ import { IWidgetHandler } from "@paperbits/common/editing";
 import { StyleHelper } from "@paperbits/styles";
 import { CustomWidgetModel } from "./customWidgetModel";
 import { sizeStylesInitial } from "./ko/constants";
+import { customWidgetPrefixName } from "./ko/utils";
 
 export interface TCustomWidgetConfig extends CustomWidgetCommonConfig {
     name: string;
@@ -17,8 +18,10 @@ export class CustomWidgetHandlers implements IWidgetHandler {
     }
 
     public async getWidgetModel(): Promise<CustomWidgetModel> {
+        const id = customWidgetPrefixName(this.configuration.name); // add prefix to prevent conflicts with existing widgets
+
         const model = new CustomWidgetModel();
-        model.name = this.configuration.name;
+        model.name = id;
         model.displayName = this.configuration.displayName;
         model.customInputValue = "{}";
         StyleHelper.setPluginConfigForLocalStyles(model.styles, "size", sizeStylesInitial);

src/components/custom-widget/ko/customWidgetEditorView.html

@@ -3,7 +3,8 @@
         <div class="flex-item">
             <div class="form-group">
                 <label class="form-label">Name</label>
-                <input type="text" class="form-control" data-bind="textInput: model.widgetDisplayName" disabled />
+                <input type="text" class="form-control" data-bind="textInput: model.displayName" disabled />
+                <input type="text" class="form-control" data-bind="textInput: model.name" disabled style="display: none" />
             </div>
 
             <size-editor params="{ features: 'width,height', allowUnits: 'px,%', sizeConfig: sizeStyleConfig, onUpdate: onSizeUpdate }">

src/components/custom-widget/ko/utils.ts

@@ -9,19 +9,27 @@ import * as Constants from "../../../constants";
 import { MapiBlobStorage } from "../../../persistence";
 import { CustomWidgetModel } from "../customWidgetModel";
 
+const customWidgetNamePrefix = "CustomWidget-"
+
+export const customWidgetPrefixName = (name: string): string => {
+    return customWidgetNamePrefix + name;
+}
+
 export async function buildWidgetSource(
     blobStorage: MapiBlobStorage,
     model: CustomWidgetModel,
     environment: Environment,
     filePath: string,
 ): Promise<{ override: string | null, src: string }> {
+    const name = model.name.startsWith(customWidgetNamePrefix) ? model.name.replace(customWidgetNamePrefix, "") : model.name;
+
     // check is necessary during publishing as window.sessionStorage.getItem throws "DOMException {}  node:internal/process/promises:279"
     const developmentSrc = environment !== "publishing"
-        ? window.sessionStorage.getItem(Constants.overrideConfigSessionKeyPrefix + model.name)
+        ? window.sessionStorage.getItem(Constants.overrideConfigSessionKeyPrefix + name)
         : null;
 
     const url = new URL(developmentSrc == null ? (
-        await blobStorage.getDownloadUrlWithoutToken(`${buildBlobDataPath(model.name)}${filePath}`)
+        await blobStorage.getDownloadUrlWithoutToken(`${buildBlobDataPath(name)}${filePath}`)
     ) : developmentSrc + filePath);
 
     url.pathname = decodeURIComponent(url.pathname);