feat: create from React component UI

packages/app/src/paths.ts

@@ -18,3 +18,7 @@ export function getPathForPlatform (posixPath?: string) {
 
   return posixPath
 }
+
+export function posixify (path: string): string {
+  return path.replace(/\\/g, '/')
+}

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

@@ -20,6 +20,7 @@ describe('<CreateSpecModal />', () => {
               __typename: 'CodeGenGlobs',
               component: '**.vue',
             },
+            codeGenFramework: 'vue',
             currentTestingType: 'component',
             configFile: 'cypress.config.js',
             configFileAbsolutePath: '/path/to/cypress.config.js',
@@ -115,6 +116,7 @@ describe('Modal Text Input', () => {
               __typename: 'CodeGenGlobs',
               component: '**.vue',
             },
+            codeGenFramework: 'vue',
             currentTestingType: 'component',
             configFile: 'cypress.config.js',
             configFileAbsolutePath: '/path/to/cypress.config.js',
@@ -163,6 +165,7 @@ describe('Modal Text Input', () => {
               __typename: 'CodeGenGlobs',
               component: '**.vue',
             },
+            codeGenFramework: 'vue',
             currentTestingType: 'component',
             configFile: 'cypress.config.js',
             configFileAbsolutePath: '/path/to/cypress.config.js',
@@ -215,6 +218,7 @@ describe('playground', () => {
               __typename: 'CodeGenGlobs',
               component: '**.vue',
             },
+            codeGenFramework: 'vue',
             currentTestingType: 'component',
             configFile: 'cypress.config.js',
             configFileAbsolutePath: '/path/to/cypress.config.js',

packages/app/src/specs/CreateSpecModal.vue

@@ -42,7 +42,7 @@
   </StandardModal>
 </template>
 
-<script lang  ="ts" setup>
+<script lang="ts" setup>
 import { generators, getFilteredGeneratorList } from './generators'
 import type { GeneratorId } from './generators'
 import { DialogOverlay } from '@headlessui/vue'
@@ -71,6 +71,17 @@ const emits = defineEmits<{
 // to have a different key for the generator
 const iteration = ref(0)
 
+gql`
+fragment ComponentGeneratorStepOne_codeGenGlob on CurrentProject {
+  id
+  codeGenGlobs {
+    id
+    component
+  }
+  codeGenFramework
+}
+`
+
 gql`
 fragment CreateSpecModal on Query {
   ...CreateSpecCards

packages/app/src/specs/InlineSpecListTree.vue

@@ -30,7 +30,7 @@
             'before:border-r-indigo-300': isCurrentSpec(row.data),
             'before:focus:border-r-indigo-300 before:focus-visible:border-r-transparent before:hover:border-r-indigo-300': !isCurrentSpec(row.data)
           }"
-          :to="{ path: '/specs/runner', query: { file: row.data.data?.relative?.replace(/\\/g, '/') } }"
+          :to="{ path: '/specs/runner', query: { file: posixify(row.data.data?.relative) } }"
           @focus="resetFocusIfNecessary(row, row.index)"
           @click.capture.prevent="submit(row.data, row.index)"
           @keydown.enter.space.prevent.stop="submit(row.data, row.index)"
@@ -81,6 +81,7 @@ import { useVirtualListNavigation } from './tree/useVirtualListNavigation'
 import { useStudioStore } from '../store/studio-store'
 import InlineRunAllSpecs from './InlineRunAllSpecs.vue'
 import { useRunAllSpecsStore } from '../store/run-all-specs-store'
+import { posixify } from '../paths'
 
 const props = defineProps<{
   specs: FuzzyFoundSpec[]
@@ -137,7 +138,7 @@ const submit = (row: UseCollapsibleTreeNode<SpecTreeNode<FuzzyFoundSpec>>, idx:
       return
     }
 
-    router.push({ path: '/specs/runner', query: { file: row.data.relative.replace(/\\/g, '/') } })
+    router.push({ path: '/specs/runner', query: { file: posixify(row.data.relative) } })
   } else {
     row.toggle()
   }

packages/app/src/specs/SpecsList.vue

@@ -93,7 +93,7 @@
           :is-leaf="row.data.isLeaf"
           :is-project-connected="projectConnectionStatus === 'CONNECTED'"
           :grid-columns="row.data.isLeaf ? tableGridColumns : 'grid-cols-[1fr]'"
-          :route="{ path: '/specs/runner', query: { file: row.data.data?.relative?.replace(/\\/g, '/') } }"
+          :route="{ path: '/specs/runner', query: { file: posixify(row.data.data?.relative || '') } }"
           @toggleRow="row.data.toggle"
         >
           <template #file>
@@ -216,6 +216,7 @@ import { useRequestAccess } from '../composables/useRequestAccess'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 import SpecsRunAllSpecs from './SpecsRunAllSpecs.vue'
 import { useRunAllSpecsStore } from '../store/run-all-specs-store'
+import { posixify } from '../paths'
 
 const { openLoginConnectModal } = useLoginConnectStore()
 

packages/app/src/specs/generators/EmptyGenerator.vue

@@ -94,7 +94,7 @@
           :to="{
             name: 'SpecRunner',
             query: {
-              file: result.file.relative?.replace(/\\/g, '/')
+              file: posixify(result.file.relative)
             },
             params: props.type === 'component' || props.type === 'componentEmpty'
               ? {
@@ -140,6 +140,7 @@ import StandardModalFooter from '@packages/frontend-shared/src/components/Standa
 import GeneratorSuccess from './GeneratorSuccess.vue'
 import TestResultsIcon from '~icons/cy/test-results_x24.svg'
 import PlusButtonIcon from '~icons/cy/add-large_x16.svg'
+import { posixify } from '../../paths'
 
 const props = defineProps<{
   title: string

packages/app/src/specs/generators/ExpandableFileChooser.vue

@@ -0,0 +1,172 @@
+<!--
+/**==============================================
+ * *          ExpandableFileChooser.vue
+ * Filter a list of files by a mix of glob pattern
+ * and a search string that includes a file's relative
+ * path.
+ *
+ * When clicked, the files will expand to display the
+ * #expanded-content slot.
+ *
+ * Features to note: debouncing + loading + row expanding
+ * ==============================================
+ * *                Debouncing
+ *
+ * ? To prevent calling update too frequently we debounce
+ * ? both the "No Results" UI and the update event
+ *
+ * ============================================**/
+-->
+
+<template>
+  <CreateSpecModalBody
+    variant="bare"
+    class="bg-white flex flex-col px-24px
+  relative"
+  >
+    <FileMatch
+      ref="fileMatchRef"
+      v-model:pattern="filePathSearch"
+      v-model:extensionPattern="localExtensionPattern"
+      class="bg-white pt-24px pb-12px top-0px z-10 sticky"
+      :matches="matches"
+    >
+      <template
+        v-if="loading"
+        #matches
+      >
+        <i-cy-loading_x16 class="h-24px mr-10px animate-spin w-24px" />
+      </template>
+    </FileMatch>
+
+    <div
+      v-show="loading"
+      data-testid="loading"
+    >
+      <!-- TODO(ryan) UNIFY-865: Get mocks for a loading state here -->
+      Loading
+    </div>
+    <ExpandableFileList
+      v-show="!loading"
+      :style="{ paddingTop: `${fileMatchHeight + 36}px` }"
+      class="right-24px left-24px absolute"
+      :files="filteredFiles"
+      :search="filePathSearch"
+    >
+      <template #expanded-content="{file}">
+        <ReactComponentList
+          :file="file"
+          @selectItem="selectItem"
+        />
+      </template>
+      <template #no-results>
+        <NoResults
+          empty-search
+          :search-term="noResults.search"
+          :message="noResults.message"
+          @clear="noResults.clear"
+        />
+      </template>
+    </ExpandableFileList>
+  </CreateSpecModalBody>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { debouncedWatch, useDebounce, useElementSize } from '@vueuse/core'
+import { useI18n } from '@cy/i18n'
+
+import NoResults from '@cy/components/NoResults.vue'
+import CreateSpecModalBody from './CreateSpecModalBody.vue'
+import ExpandableFileList from './ExpandableFileList.vue'
+import FileMatch from '../../components/FileMatch.vue'
+import ReactComponentList from './component/ReactComponentList.vue'
+import { gql } from '@urql/core'
+import type { FileParts } from '@packages/data-context/src/gen/graphcache-config.gen'
+import type { FileListItemFragment } from '../../generated/graphql'
+
+const props = withDefaults(defineProps<{
+  files: FileParts[]
+  extensionPattern: string
+  loading?: boolean
+}>(), {
+
+  loading: false,
+})
+
+const { t } = useI18n()
+
+gql`
+fragment FileChooser on FileParts {
+  relative
+  id
+  ...FileListItem
+}
+`
+
+const emits = defineEmits<{
+  (eventName: 'selectItem', value: {file: FileListItemFragment, item: any})
+  (eventName: 'update:extensionPattern', value: string)
+}>()
+
+// eslint-disable-next-line
+const initialExtensionPattern = props.extensionPattern
+const localExtensionPattern = ref(props.extensionPattern)
+const filePathSearch = ref('')
+
+const selectItem = ({ file, item }) => {
+  emits('selectItem', { file, item })
+}
+
+///*------- Styling -------*/
+
+// For the FileList to be searchable without jumping to the top of the
+// FileMatcher's top when focused, we need to use some manual layout.
+// If we concede on position: sticky for the FileMatcher or on making the
+// FileList accessible, we could position the FileList relatively.
+const fileMatchRef = ref(null)
+const { height: fileMatchHeight } = useElementSize(fileMatchRef)
+
+///*------- Debounce -------*/
+
+const debounce = 200
+const debouncedExtensionPattern = useDebounce(localExtensionPattern, debounce)
+
+debouncedWatch(localExtensionPattern, (value) => {
+  emits('update:extensionPattern', value)
+}, { debounce })
+
+///*------- Searching files -------*/
+
+const filteredFiles = computed(() => {
+  return props.files?.filter((file) => {
+    return file.relative.toLowerCase().includes(filePathSearch.value.toLowerCase())
+  })
+})
+
+///*------- Matches Indicator -------*/
+
+const matches = computed(() => {
+  return {
+    total: props.files.length,
+    found: filteredFiles.value.length,
+  }
+})
+
+///*------- No Results Options -------*/
+
+const noResults = computed(() => {
+  return {
+    search: filePathSearch.value || debouncedExtensionPattern.value,
+    message: filePathSearch.value ? t('noResults.defaultMessage') : t('components.fileSearch.noMatchesForExtension'),
+    clear: () => {
+      if (filePathSearch.value) {
+        filePathSearch.value = ''
+      } else {
+        localExtensionPattern.value = initialExtensionPattern
+      }
+    },
+  }
+})
+
+</script>

packages/app/src/specs/generators/ExpandableFileList.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="h-full">
+    <div
+      v-if="files.length"
+      class="h-full relative"
+      tabindex="0"
+    >
+      <ul class="h-full">
+        <!-- TODO: UNIFY-864 - up arrow and down arrow navigation -->
+        <li
+          v-for="file in files"
+          :key="file.id"
+        >
+          <div
+            class="cursor-pointer flex border-b-1 border-b-gray-50 leading-normal text-16px gap-8px
+    group items-center last last:py-0 last:items-start children:h-40px children:py-8px"
+            data-cy="file-list-row"
+            @click="() => toggleExpandRow(file.id)"
+          >
+            <i-cy-chevron-down-small_x16
+              class="
+          mr-8px text-sm icon-dark-gray-300
+          group-hocus:(icon-dark-gray-700)
+        "
+              :class="{'transform rotate-270': !isRowExpanded(file.id)}"
+            />
+            <i-cy-document-blank_x16 class="min-w-16px min-h-16px icon-light-gray-50 icon-dark-gray-300" />
+            <div class="h-full inline-flex whitespace-nowrap items-center overflow-hidden">
+              <span
+                class="font-medium text-indigo-500
+          group-hocus:text-indigo-500"
+              >{{
+                name(file) }}</span>
+              <span class="font-light text-gray-400">{{ file.fileExtension }}</span>
+              <span class="font-light ml-20px opacity-0 text-gray-600 duration-200 truncate group-hocus:opacity-60">{{ file.relative }}</span>
+            </div>
+          </div>
+          <div v-if="isRowExpanded(file.id)">
+            <slot
+              :file="file"
+              name="expanded-content"
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-else
+      class="flex h-full items-center justify-center"
+    >
+      <slot name="no-results" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { gql } from '@urql/vue'
+import { ref } from 'vue'
+import type { FileListItemFragment } from '../../generated/graphql'
+
+gql`
+fragment FileListItem on FileParts {
+  id
+  relative
+  fileName
+  fileExtension
+  baseName
+}
+`
+
+defineProps<{
+  files: FileListItemFragment[]
+}>()
+
+defineEmits<{
+  (eventName: 'selectItem', value: {file: FileListItemFragment, item: any})
+}>()
+
+const expandedRowId = ref<string>('')
+
+function isRowExpanded (id: string) {
+  return (expandedRowId.value === id)
+}
+
+function toggleExpandRow (id: string) {
+  if (expandedRowId.value === id) {
+    expandedRowId.value = ''
+  } else {
+    expandedRowId.value = id
+  }
+}
+
+// [...all].vue returns as [ when using the normal fileName
+const name = (file) => {
+  return file.baseName.replace(file.fileExtension, '')
+}
+</script>