Added confirm and strings for tag and rename operations

Author: tbarlow12

src/common/localization/en-us.ts

@@ -256,6 +256,14 @@ export const english: IAppStrings = {
                 apply: "Apply Tag with Hot Key",
                 lock: "Lock Tag with Hot Key",
             },
+            rename: {
+                title: "Rename Tag",
+                confirmation: "Are you sure you want to rename this tag? It will be renamed throughout all assets",
+            },
+            delete: {
+                title: "Delete Tag",
+                confirmation: "Are you sure you want to delete this tag? It will be deleted throughout all assets and any regions where this is the only tag will also be deleted",
+            }
         },
         canvas: {
             removeAllRegions: {

src/common/localization/es-cl.ts

@@ -258,6 +258,14 @@ export const spanish: IAppStrings = {
                 apply: "Aplicar etiqueta con tecla de acceso rápido",
                 lock: "Bloquear etiqueta con tecla de acceso rápido",
             },
+            rename: {
+                title: "Cambiar el nombre de la etiqueta",
+                confirmation: "¿Está seguro que quiere cambiar el nombre de esta etiqueta? Será cambiada en todos los activos",
+            },
+            delete: {
+                title: "Delete Tag",
+                confirmation: "¿Está seguro que quiere borrar esta etiqueta? Será borrada en todos los activos y en las regiones donde esta etiqueta sea la única, la region también será borrada",
+            }
         },
         canvas: {
             removeAllRegions: {

src/common/mockFactory.ts

@@ -802,6 +802,8 @@ export default class MockFactory {
             save: jest.fn((project: IProject) => Promise.resolve(project)),
             delete: jest.fn((project: IProject) => Promise.resolve()),
             isDuplicate: jest.fn((project: IProject, projectList: IProject[]) => true),
+            renameTag: jest.fn(),
+            deleteTag: jest.fn(),
         };
     }
 

src/common/strings.ts

@@ -255,6 +255,14 @@ export interface IAppStrings {
                 apply: string;
                 lock: string;
             },
+            rename: {
+                title: string;
+                confirmation: string;
+            },
+            delete: {
+                title: string;
+                confirmation: string;
+            }
         }
         canvas: {
             removeAllRegions: {

src/react/components/common/tagInput/tagInput.tsx

@@ -31,9 +31,9 @@ export interface ITagInputProps {
     /** Function to call on clicking individual tag while holding CTRL key */
     onCtrlTagClick?: (tag: ITag) => void;
     /** Function to call when tag is renamed */
-    onTagRenamed?: (oldTag: string, newTag: string) => void;
+    onTagRenamed?: (tagName: string, newTagName: string) => void;
     /** Function to call when tag is deleted */
-    onTagDeleted?: (tag: ITag) => void;
+    onTagDeleted?: (tagName: string) => void;
     /** Always show tag input box */
     showTagInputBox?: boolean;
     /** Always show tag search box */
@@ -219,20 +219,25 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
         }, () => this.props.onChange(tags));
     }
 
-    private updateTag = (oldTag: ITag, newTag: ITag) => {
-        if (oldTag === newTag) {
+    private updateTag = (tag: ITag, newTag: ITag) => {
+        if (tag === newTag) {
             return;
         }
         if (!newTag.name.length) {
             toast.warn(strings.tags.warnings.emptyName);
             return;
         }
-        if (newTag.name !== oldTag.name && this.state.tags.some((t) => t.name === newTag.name)) {
+        const nameChange = tag.name !== newTag.name;
+        if (nameChange && this.state.tags.some((t) => t.name === newTag.name)) {
             toast.warn(strings.tags.warnings.existingName);
             return;
         }
+        if (nameChange && this.props.onTagRenamed) {
+            this.props.onTagRenamed(tag.name, newTag.name);
+            return;
+        }
         const tags = this.state.tags.map((t) => {
-            return (t.name === oldTag.name) ? newTag : t;
+            return (t.name === tag.name) ? newTag : t;
         });
         this.setState({
             tags,
@@ -389,6 +394,10 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
         if (!tag) {
             return;
         }
+        if (this.props.onTagDeleted) {
+            this.props.onTagDeleted(tag.name);
+            return;
+        }
         const index = this.state.tags.indexOf(tag);
         const tags = this.state.tags.filter((t) => t.name !== tag.name);
         this.setState({

src/react/components/pages/editorPage/editorPage.tsx

@@ -28,6 +28,7 @@ import "./editorPage.scss";
 import EditorSideBar from "./editorSideBar";
 import { EditorToolbar } from "./editorToolbar";
 import Alert from "../../common/alert/alert";
+import Confirm from "../../common/confirm/confirm";
 // tslint:disable-next-line:no-var-requires
 const tagColors = require("../../common/tagColors.json");
 
@@ -120,6 +121,8 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
     private loadingProjectAssets: boolean = false;
     private toolbarItems: IToolbarItemRegistration[] = ToolbarItemFactory.getToolbarItems();
     private canvas: RefObject<Canvas> = React.createRef();
+    private renameTagConfirm: React.RefObject<Confirm> = React.createRef();
+    private deleteTagConfirm: React.RefObject<Confirm> = React.createRef();
 
     public async componentDidMount() {
         const projectId = this.props.match.params["projectId"];
@@ -232,8 +235,20 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                                 onLockedTagsChange={this.onLockedTagsChanged}
                                 onTagClick={this.onTagClicked}
                                 onCtrlTagClick={this.onCtrlTagClicked}
+                                onTagRenamed={this.confirmTagRenamed}
+                                onTagDeleted={this.confirmTagDeleted}
                             />
                         </div>
+                        <Confirm title={strings.editorPage.tags.rename.title}
+                            ref={this.renameTagConfirm}
+                            message={strings.editorPage.tags.rename.confirmation}
+                            confirmButtonColor="danger"
+                            onConfirm={this.onTagRenamed}/>
+                        <Confirm title={strings.editorPage.tags.delete.title}
+                            ref={this.deleteTagConfirm}
+                            message={strings.editorPage.tags.delete.confirmation}
+                            confirmButtonColor="danger"
+                            onConfirm={this.onTagDeleted}/>
                     </div>
                 </SplitPane>
                 <Alert show={this.state.showInvalidRegionWarning}
@@ -288,6 +303,22 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
         }, () => this.canvas.current.applyTag(tag.name));
     }
 
+    private confirmTagRenamed = (tagName: string, newTagName: string): void => {
+        this.renameTagConfirm.current.open(tagName, newTagName);
+    }
+
+    private onTagRenamed = (tagName: string, newTagName: string): void => {
+        debugger;
+    }
+
+    private confirmTagDeleted = (tagName: string): void => {
+        this.deleteTagConfirm.current.open(tagName);
+    }
+
+    private onTagDeleted = (tagName: string): void => {
+        debugger;
+    }
+
     private onCtrlTagClicked = (tag: ITag): void => {
         const locked = this.state.lockedTags;
         this.setState({