Merge branch 'develop' into mikep/23064-spec-name-display

packages/app/src/specs/DirectoryItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :title="props.name"
+    :title="name"
     class="flex text-sm py-4px items-center"
   >
     <i-cy-chevron-down-small_x16
@@ -9,8 +9,8 @@
     />
     <i-cy-folder_x16 class="h-16px mr-8px w-16px group-hocus:icon-light-indigo-300 group-hocus:icon-dark-indigo-400" />
     <HighlightedText
-      :text="props.name"
-      :indexes="props.indexes"
+      :text="name"
+      :indexes="indexes"
       class="text-gray-400 group-focus:text-indigo-300"
       highlight-classes="font-bold text-white"
     />
@@ -20,7 +20,7 @@
 <script lang="ts" setup>
 import HighlightedText from './HighlightedText.vue'
 
-const props = withDefaults(defineProps<{ name: string, expanded: boolean, indexes: number[] }>(), {
+withDefaults(defineProps<{ name: string, expanded: boolean, indexes: number[] }>(), {
   name: '',
   expanded: false,
   indexes: () => [],

packages/app/src/specs/InlineSpecList.cy.tsx

@@ -49,11 +49,16 @@ describe('InlineSpecList', () => {
 
     it('should support fuzzy sort', () => {
       mountInlineSpecList()
-      cy.get('input').type('scome', { force: true })
+      cy.get('input').type('compspec')
 
       cy.get('li').should('have.length', 4)
       .should('contain', 'src/components')
       .and('contain', 'Spec-A.spec.tsx')
+
+      // Don't want the search to be too fuzzy
+      // sr => src, co => components, se => spec
+      cy.get('input').clear().type('srcose')
+      cy.get('li').should('have.length', 0)
     })
 
     it('should open CreateSpec modal', () => {

packages/app/src/specs/InlineSpecListTree.vue

@@ -41,7 +41,7 @@
             :file-name="row.data.data?.fileName || row.data.name"
             :extension="row.data.data?.specFileExtension || ''"
             :selected="isCurrentSpec(row.data)"
-            :indexes="row.data?.data?.fileIndexes"
+            :indexes="row.data.highlightIndexes"
             class="pl-22px"
             data-cy="spec-file-item"
           />
@@ -50,7 +50,7 @@
             class="children:truncate"
             :name="row.data.name"
             :expanded="treeSpecList[row.index].expanded.value"
-            :indexes="getDirIndexes(row.data)"
+            :indexes="row.data.highlightIndexes"
             data-cy="directory-item"
           />
         </RouterLink>
@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import { useCollapsibleTree } from '@packages/frontend-shared/src/composables/useCollapsibleTree'
 import type { UseCollapsibleTreeNode } from '@packages/frontend-shared/src/composables/useCollapsibleTree'
-import { buildSpecTree, getDirIndexes } from './spec-utils'
+import { buildSpecTree } from './spec-utils'
 import type { SpecTreeNode, FuzzyFoundSpec } from './spec-utils'
 import SpecFileItem from './SpecFileItem.vue'
 import { computed, watch, onMounted } from 'vue'

packages/app/src/specs/RowDirectory.vue

@@ -16,12 +16,12 @@
       class="icon-dark-white icon-light-gray-200"
     />
     <div
-      :title="props.name"
+      :title="name"
       class="text-gray-600 truncate"
     >
       <HighlightedText
-        :text="props.name"
-        :indexes="props.indexes"
+        :text="name"
+        :indexes="indexes"
         class="font-medium"
         highlight-classes="text-gray-1000"
       />
@@ -34,7 +34,7 @@
 import IconFolder from '~icons/cy/folder_x16.svg'
 import HighlightedText from './HighlightedText.vue'
 
-const props = withDefaults(defineProps<{ name: string, expanded: boolean, indexes: number[], depth: number }>(), {
+withDefaults(defineProps<{ name: string, expanded: boolean, indexes: number[], depth: number }>(), {
   name: '',
   expanded: false,
   indexes: () => [],

packages/app/src/specs/SpecFileItem.vue

@@ -15,27 +15,33 @@
     >
       <HighlightedText
         :text="fileName"
-        :indexes="indexes.filter((idx) => idx < fileName.length)"
+        :indexes="split.fileNameIndexes"
         class="font-medium pl-8px whitespace-nowrap"
         :class="selected ? 'text-white' : 'group-focus:text-indigo-300 text-gray-400 group-hover:text-indigo-300'"
       />
       <HighlightedText
         :text="extension"
-        :indexes="indexes.filter((idx) => idx >= fileName.length).map(idx => idx - fileName.length)"
+        :indexes="split.extensionIndexes"
         class="text-gray-700"
       />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { computed } from 'vue'
 import DocumentIconBlank from '~icons/cy/document-blank_x16'
 import HighlightedText from './HighlightedText.vue'
+import { deriveIndexes } from './spec-utils'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   fileName: string
   extension: string
   selected?: boolean
   indexes: number[]
 }>(), { indexes: () => [], selected: false })
 
+const split = computed(() => {
+  return deriveIndexes(props.fileName, props.indexes)
+})
+
 </script>

packages/app/src/specs/SpecItem.vue

@@ -13,13 +13,13 @@
     >
       <HighlightedText
         :text="fileName"
-        :indexes="indexes.filter((idx) => idx < fileName.length)"
+        :indexes="split.fileNameIndexes"
         class="font-medium text-indigo-500 group-hocus:text-indigo-700"
         highlight-classes="text-gray-1000"
       />
       <HighlightedText
         :text="extension"
-        :indexes="indexes.filter((idx) => idx >= fileName.length).map(idx => idx - fileName.length)"
+        :indexes="split.extensionIndexes"
         class="font-light group-hocus:text-gray-400"
         highlight-classes="text-gray-1000"
       />
@@ -29,11 +29,17 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import HighlightedText from './HighlightedText.vue'
+import { deriveIndexes } from './spec-utils'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   fileName: string
   extension: string
   indexes?: number[]
 }>(), { indexes: () => [] })
+
+const split = computed(() => {
+  return deriveIndexes(props.fileName, props.indexes)
+})
 </script>

packages/app/src/specs/SpecsList.cy.tsx

@@ -31,7 +31,7 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
         return ctx
       },
       render: (gqlVal) => {
-        return <SpecsList gql={gqlVal} onShowCreateSpecModal={showCreateSpecModalSpy} />
+        return <SpecsList gql={gqlVal} onShowCreateSpecModal={showCreateSpecModalSpy} mostRecentUpdate={null} />
       },
     })
   }
@@ -78,7 +78,7 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
 
         cy.get('@specsListInput').type(longestSpec.fileName)
         cy.get('[data-cy="spec-list-directory"]').first()
-        .should('contain', longestSpec.relative.replace(`/${longestSpec.fileName}${longestSpec.specFileExtension}`, ''))
+        .should('contain', longestSpec.relative.replace(`/${longestSpec.baseName}`, ''))
 
         cy.get('[data-cy="spec-list-file"]').last().within(() => {
           cy.contains('a', longestSpec.baseName)
@@ -92,6 +92,11 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
         cy.get('[data-cy="spec-list-directory"]').first().should('contain', directory)
         cy.percySnapshot('matching directory search')
 
+        // Support full relative path search
+        cy.get('@specsListInput').clear().type(longestSpec.relative)
+        cy.get('[data-cy="spec-list-directory"]').first().should('contain', directory)
+        cy.get('[data-cy="spec-list-file"]').should('contain', longestSpec.baseName)
+
         // test interactions
 
         const directories: string[] = Array.from(new Set(specs.map((spec) => spec.relative.split('/')[0]))).sort()

packages/app/src/specs/SpecsList.vue

@@ -92,7 +92,7 @@
               v-if="row.data.isLeaf"
               :file-name="row.data.data?.fileName || row.data.name"
               :extension="row.data.data?.specFileExtension || ''"
-              :indexes="row.data.data?.fileIndexes"
+              :indexes="row.data.highlightIndexes"
               :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 22}px` }"
             >
               <span class="ml-2 inline-block">
@@ -110,7 +110,7 @@
               :expanded="treeSpecList[row.index].expanded.value"
               :depth="row.data.depth - 2"
               :style="{ paddingLeft: `${(row.data.depth - 2) * 10}px` }"
-              :indexes="getDirIndexes(row.data)"
+              :indexes="row.data.highlightIndexes"
               :aria-controls="getIdIfDirectory(row)"
               @click.stop="row.data.toggle"
             />
@@ -188,7 +188,7 @@ import { gql, useSubscription } from '@urql/vue'
 import { computed, ref, toRef, watch } from 'vue'
 import { Specs_SpecsListFragment, SpecsList_GitInfoUpdatedDocument, SpecsListFragment } from '../generated/graphql'
 import { useI18n } from '@cy/i18n'
-import { buildSpecTree, fuzzySortSpecs, getDirIndexes, makeFuzzyFoundSpec, useCachedSpecs } from './spec-utils'
+import { buildSpecTree, fuzzySortSpecs, makeFuzzyFoundSpec, useCachedSpecs } from './spec-utils'
 import type { FuzzyFoundSpec } from './spec-utils'
 import { useCollapsibleTree } from '@packages/frontend-shared/src/composables/useCollapsibleTree'
 import RowDirectory from './RowDirectory.vue'