feat: Allow host app to update title of drawing (#3273)

* Allow updating name on updateScene

* Revert "Allow updating name on updateScene"

This reverts commit 4e07a608d3.

* Make requested changes

* Make requested changes

* Remove customName from state

* Remove redundant if statement

* Add tests, update changelog and minor fixes

* remove eempty lines

* minor fixes

* no border and on hover no background change

* Give preference to name prop when initialData.appState.name is present and update specs

* minor fix

* Fix name input style in dark mode

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/components/App.tsx

@@ -303,6 +303,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       zenModeEnabled = false,
       gridModeEnabled = false,
       theme = defaultAppState.theme,
+      name = defaultAppState.name,
     } = props;
     this.state = {
       ...defaultAppState,
@@ -314,6 +315,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       viewModeEnabled,
       zenModeEnabled,
       gridSize: gridModeEnabled ? GRID_SIZE : null,
+      name,
     };
     if (excalidrawRef) {
       const readyPromise =
@@ -523,6 +525,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
         let gridSize = actionResult?.appState?.gridSize || null;
         let theme = actionResult?.appState?.theme || "light";
+        let name = actionResult?.appState?.name || this.state.name;
 
         if (typeof this.props.viewModeEnabled !== "undefined") {
           viewModeEnabled = this.props.viewModeEnabled;
@@ -540,6 +543,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           theme = this.props.theme;
         }
 
+        if (typeof this.props.name !== "undefined") {
+          name = this.props.name;
+        }
+
         this.setState(
           (state) => {
             // using Object.assign instead of spread to fool TS 4.2.2+ into
@@ -556,6 +563,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
               zenModeEnabled,
               gridSize,
               theme,
+              name,
             });
           },
           () => {
@@ -890,6 +898,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
       });
     }
+
+    if (this.props.name && prevProps.name !== this.props.name) {
+      this.setState({
+        name: this.props.name,
+      });
+    }
+
     document
       .querySelector(".excalidraw")
       ?.classList.toggle("theme--dark", this.state.theme === "dark");

src/components/ExportDialog.scss

@@ -34,6 +34,14 @@
 
     .TextInput {
       height: calc(1rem - 3px);
+
+      &--readonly {
+        background: none;
+        border: none;
+        &:hover {
+          background: none;
+        }
+      }
     }
   }
 

src/components/ExportDialog.tsx

@@ -257,6 +257,7 @@ export const ExportDialog = ({
         onClick={() => {
           setModalIsShown(true);
         }}
+        data-testid="export-button"
         icon={exportFile}
         type="button"
         aria-label={t("buttons.export")}

src/components/ProjectName.tsx

@@ -7,6 +7,7 @@ type Props = {
   value: string;
   onChange: (value: string) => void;
   label: string;
+  isNameEditable: boolean;
 };
 
 export class ProjectName extends Component<Props> {
@@ -43,7 +44,7 @@ export class ProjectName extends Component<Props> {
   };
 
   public render() {
-    return (
+    return this.props.isNameEditable ? (
       <span
         suppressContentEditableWarning
         ref={this.makeEditable}
@@ -57,6 +58,13 @@ export class ProjectName extends Component<Props> {
       >
         {this.props.value}
       </span>
+    ) : (
+      <span
+        className="TextInput TextInput--readonly"
+        aria-label={this.props.label}
+      >
+        {this.props.value}
+      </span>
     );
   }
 }

src/components/ToolButton.tsx

@@ -58,6 +58,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
             "ToolIcon--selected": props.selected,
           },
         )}
+        data-testid={props["data-testid"]}
         hidden={props.hidden}
         title={props.title}
         aria-label={props["aria-label"]}