Merge pull request #253 from ynput/OP-7391_New-folders-separate-name-and-label

Editor: New Entity Independent Label and Name Editing

Author: martastain

src/components/Details/EntityDetailsHeader.jsx

@@ -42,13 +42,20 @@ const EntityDetailsHeader = ({
 
   const isMultiple = values.length > 1
 
-  let subTitle = ''
+  let subTitle = '',
+    breadcrumbs = []
   if (isMultiple) {
-    subTitle = values.map((v) => v?.name).join(', ')
+    subTitle = values
+      .map((v) => v?.name)
+      .slice(0, 5)
+      .join(', ')
+
+    if (values.length > 5) subTitle += ' +' + (values.length - 5)
   } else if (uri) {
     const [path, qs] = uri.split('://')[1].split('?')
     //eslint-disable-next-line
-    const [_, ...breadcrumbs] = path.split('/').filter((p) => p)
+    const [_, ...bc] = path.split('/').filter((p) => p)
+    breadcrumbs = bc
     const qp = qs
       ? qs.split('&').reduce((acc, curr) => {
           if (!curr) return acc
@@ -110,7 +117,7 @@ const EntityDetailsHeader = ({
             value={subTitle}
             style={{ left: -3 }}
             align="left"
-            onClick={copyToClipboard}
+            onClick={() => copyToClipboard(breadcrumbs.join('/'), true)}
           />
         </div>
       )}

src/helpers/copyToClipboard.js

@@ -10,7 +10,7 @@ const copyToClipboard = (message, toastMessage = false) => {
         .then(() => {
           let toastText = 'Copied To Clipboard'
           if (toastMessage) {
-            toastText += `: "${message}"`
+            toastText += `: ${message}`
           }
           toast.success(toastText)
         })

src/hooks/Tooltip/Tooltip.styled.js

@@ -16,7 +16,7 @@ export const TooltipWidget = styled.div`
   box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
   user-select: none;
   pointer-events: none;
-  z-index: 1000;
+  z-index: 1200;
 
   /* tooltip triangle pointer using ::after */
   &::after {

src/pages/EditorPage/EditorPage.jsx

@@ -833,7 +833,10 @@ const EditorPage = () => {
         if (op.type === 'delete') {
           deleted.push(op.id)
         } else {
-          updated.push(op.patch)
+          const patch = { ...op.patch }
+          // delete: __isNew
+          delete patch.data.__isNew
+          updated.push(patch)
         }
       }
 
@@ -1261,17 +1264,55 @@ const EditorPage = () => {
   }
 
   const onRowClick = (event) => {
-    let node = event.node.data
+    const node = event.node.data
+    //
+    let endFolder
     if (node.__entityType === 'folder') {
-      node = event.node.data
+      endFolder = node
     } else if (node.__entityType === 'task') {
       // find the parent folder
-      node = searchableFoldersSet.get(node.__parentId)
+      endFolder = searchableFoldersSet.get(node.__parentId)
+
+      if (!endFolder) {
+        // the parent could be a new node, so look in newNodes
+        endFolder = newNodes[node.__parentId]
+      }
+    }
+
+    const parents = endFolder?.parents || []
+
+    if (!parents?.length && endFolder?.parentId) {
+      // get any parents of that parent and add
+      let parentNode = searchableFoldersSet.get(endFolder.parentId)
+
+      // parent node could be a new node
+      if (!parentNode) parentNode = newNodes[endFolder.parentId]
+      if (parentNode) parents.push(parentNode.name)
+      if (parentNode?.parents?.length) {
+        parents.push(...parentNode.parents)
+      } else if (parentNode.__isNew) {
+        // we need to recursively find parents until we find a parent that is not new
+        const getParents = (node) => {
+          const parent = newNodes[node.parentId] || searchableFoldersSet.get(node.parentId)
+          if (parent) {
+            if (parent.__isNew) {
+              parents.unshift(parent.name)
+              getParents(parent)
+            } else {
+              parents.unshift(parent.name)
+            }
+          }
+        }
+
+        getParents(parentNode)
+      }
     }
 
-    if (node?.parents) {
+    const pathNames = [...parents, endFolder.name]
+
+    if (pathNames.length) {
       let uri = `ayon+entity://${projectName}`
-      uri += `/${node.parents.join('/')}/${node.name}`
+      uri += `/${pathNames.join('/')}`
       if (event.node.data.__entityType === 'task') {
         uri += `?task=${event.node?.data?.name}`
       }

src/pages/EditorPage/EditorPanel.jsx

@@ -66,6 +66,7 @@ const EditorPanel = ({
   const [localChange, setLocalChange] = useState(false)
   const [nodeIds, setNodeIds] = useState([])
   const [nodes, setNodes] = useState({})
+  const [isNew, setIsNew] = useState(false)
   const [form, setForm] = useState({})
   // used to rebuild fields for when the type changes
   const [type, setType] = useState(null)
@@ -78,14 +79,16 @@ const EditorPanel = ({
 
     for (const id of selected) {
       if (id in editorNodes) {
+        setIsNew(false)
         formNodes[id] = editorNodes[id]
       } else if (id in newNodes) {
         formNodes[id] = { leaf: newNodes[id]?.__entityType !== 'folder', data: newNodes[id] }
+        setIsNew(true)
       }
     }
 
     setNodes(formNodes)
-  }, [selected, editorNodes])
+  }, [selected, editorNodes, newNodes])
 
   const noSelection = !nodeIds.length
   let singleSelect = null
@@ -356,25 +359,6 @@ const EditorPanel = ({
         isMultiple: oldValue?.isMultiple && !isChanged,
       }
 
-      // if the label is changed and the entity is new, change the name as well
-      // first check if all nodes are newNodes
-      const allNewNodes = nodeIds.every((id) => nodes[id]?.data?.__isNew)
-      if (allNewNodes && changeKey === '_label') {
-        // replace space with underscore, set to lowercase and remove special characters and any non alphanumeric characters from the start
-        const name = newValue
-          .replace(/\s/g, '_')
-          .toLowerCase()
-          .replace(/[^a-z0-9_]/g, '')
-          .replace(/^[^a-z]+/g, '')
-        newForm._name = {
-          ...newForm._name,
-          value: name,
-          isChanged: true,
-          isOwn: true,
-          isMultiple: false,
-        }
-      }
-
       setLocalChange(true)
 
       if (setFormNew) return setFormNew(newForm)
@@ -542,7 +526,7 @@ const EditorPanel = ({
                 // pick a react input
                 let input
 
-                if (field === 'name') {
+                if (field === 'name' && !isNew) {
                   input = <InputText value={value} disabled readOnly />
                 } else if (field.includes('Type')) {
                   input = (

src/pages/EditorPage/NewEntity.jsx

@@ -226,13 +226,14 @@ const NewEntity = ({
             variant="text"
             onClick={() => handleSubmit(false)}
             disabled={addDisabled}
-            title={'Shift + Enter'}
+            data-shortcut="Shift+Enter"
           />
           <SaveButton
             label={`Add and Close`}
             onClick={() => handleSubmit(true)}
             active={!addDisabled}
             title="Ctrl/Cmd + Enter"
+            data-shortcut="Ctrl/Cmd+Enter"
           />
         </Toolbar>
       }

src/pages/EditorPage/NewSequence.jsx

@@ -125,13 +125,13 @@ const NewSequence = ({
             label="Add"
             disabled={addDisabled}
             onClick={() => handleSeqSubmit(false)}
-            title={'Shift + Enter'}
+            data-shortcut="Shift+Enter"
           />
           <SaveButton
             label={'Add and Close'}
             onClick={() => handleSeqSubmit(true)}
             active={!addDisabled}
-            title="Ctrl/Cmd + Enter"
+            data-shortcut="Ctrl/Cmd+Enter"
           />
         </Toolbar>
       }

src/styles/index.scss

@@ -139,7 +139,7 @@ input:-webkit-autofill:focus {
 
 .p-treetable .p-treetable-tbody > tr.new {
   border-left: 4px solid var(--color-changed);
-  span {
+  span:not(.changed) {
     color: var(--color-changed) !important;
   }