Should exit sketchMode when creating new file in the file tree pane (#3993)

* fix new file sketch mode issue

* initial extron app fixture

* Add tests for exiting sketch mode on file tree actions

* organise files

* before all after all clean up

* tweak after each

* makes typedKeys as unsafe

* update mask for draft line snapshots

* fix mask

* add fix again

src/components/ProjectCard/ProjectCard.tsx

@@ -104,20 +104,33 @@ function ProjectCard({
               ref={inputRef}
             />
           ) : (
-            <h3 className="font-sans relative z-0 p-2">
+            <h3
+              className="font-sans relative z-0 p-2"
+              data-testid="project-title"
+            >
               {project.name?.replace(FILE_EXT, '')}
             </h3>
           )}
           <span className="px-2 text-chalkboard-60 text-xs">
-            {numberOfFiles} file{numberOfFiles === 1 ? '' : 's'}{' '}
-            {numberOfFolders > 0 &&
-              `/ ${numberOfFolders} folder${numberOfFolders === 1 ? '' : 's'}`}
+            <span data-testid="project-file-count">{numberOfFiles}</span> file
+            {numberOfFiles === 1 ? '' : 's'}{' '}
+            {numberOfFolders > 0 && (
+              <>
+                {'/ '}
+                <span data-testid="project-folder-count">
+                  {numberOfFolders}
+                </span>{' '}
+                folder{numberOfFolders === 1 ? '' : 's'}
+              </>
+            )}
           </span>
           <span className="px-2 text-chalkboard-60 text-xs">
             Edited{' '}
-            {project.metadata && project.metadata.modified
-              ? getDisplayedTime(parseInt(project.metadata.modified))
-              : 'never'}
+            <span data-testid="project-edit-date">
+              {project.metadata && project.metadata.modified
+                ? getDisplayedTime(parseInt(project.metadata.modified))
+                : 'never'}
+            </span>
           </span>
         </div>
       </Link>