cypress-io · elevatebart · Dec 21, 2021 · Dec 17, 2021 · Dec 17, 2021 · Dec 17, 2021
diff --git a/packages/app/src/runs/RunsEmpty.vue b/packages/app/src/runs/RunsEmpty.vue
@@ -10,7 +10,10 @@
     <ol class="list-decimal ml-16px w-full text-gray-600">
       <li>
         <p class="mb-8px">
-          <i18n-t keypath="runs.empty.step1">
+          <i18n-t
+            scope="global"
+            keypath="runs.empty.step1"
+          >
             <span class="text-indigo-500">{{ configFilePath }}</span>
           </i18n-t>
         </p>
@@ -23,7 +26,10 @@
       </li>
       <li class="mt-24px">
         <p class="mb-8px">
-          <i18n-t keypath="runs.empty.step2">
+          <i18n-t
+            scope="global"
+            keypath="runs.empty.step2"
+          >
             <span class="text-indigo-400">{{ configFilePath }}</span>
           </i18n-t>
         </p>

diff --git a/packages/app/src/settings/project/Config.vue b/packages/app/src/settings/project/Config.vue
@@ -4,7 +4,10 @@
       {{ t('settingsPage.config.title') }}
     </template>
     <template #description>
-      <i18n-t keypath="settingsPage.config.description">
+      <i18n-t
+        scope="global"
+        keypath="settingsPage.config.description"
+      >
         <OpenConfigFileInIDE :gql="props.gql" />
       </i18n-t>
     </template>

diff --git a/packages/app/src/settings/project/ConfigLegend.vue b/packages/app/src/settings/project/ConfigLegend.vue
@@ -11,7 +11,10 @@
       :class="CONFIG_LEGEND_COLOR_MAP.config"
       :label="legendText.config.label"
     >
-      <i18n-t :keypath="legendText.config.descriptionKey">
+      <i18n-t
+        scope="global"
+        :keypath="legendText.config.descriptionKey"
+      >
         <OpenConfigFileInIDE :gql="props.gql" />
       </i18n-t>
     </ConfigBadge>
@@ -34,7 +37,10 @@
       :class="CONFIG_LEGEND_COLOR_MAP.plugin"
       :label="legendText.dynamic.label"
     >
-      <i18n-t :keypath="legendText.dynamic.descriptionKey">
+      <i18n-t
+        scope="global"
+        :keypath="legendText.dynamic.descriptionKey"
+      >
         <ExternalLink
           href="https://on.cypress.io"
           class="text-purple-500"

diff --git a/packages/app/src/settings/project/Experiments.vue b/packages/app/src/settings/project/Experiments.vue
@@ -4,7 +4,10 @@
       {{ t('settingsPage.experiments.title') }}
     </template>
     <template #description>
-      <i18n-t keypath="settingsPage.experiments.description">
+      <i18n-t
+        scope="global"
+        keypath="settingsPage.experiments.description"
+      >
         <ExternalLink
           href="https://on.cypress.io/experiments"
         >

diff --git a/packages/app/src/settings/project/ProjectId.vue b/packages/app/src/settings/project/ProjectId.vue
@@ -7,15 +7,18 @@
       {{ t('settingsPage.projectId.title') }}
     </template>
     <template #description>
-      <i18n-t keypath="settingsPage.projectId.description">
+      <i18n-t
+        scope="global"
+        keypath="settingsPage.projectId.description"
+      >
         <ExternalLink
           href="https://on.cypress.io/what-is-a-project-id"
         >
           {{ t('links.learnMore') }}
         </ExternalLink>
       </i18n-t>
     </template>
-    <div class="flex items-center gap-10px">
+    <div class="flex gap-10px items-center">
       <CodeBox
         :code="props.gql?.projectId || ''"
         :prefix-icon="IconOctothorpe"
@@ -39,6 +42,8 @@ import ExternalLink from '@cy/gql-components/ExternalLink.vue'
 import CodeBox from './CodeBox.vue'
 import type { ProjectIdFragment } from '../../generated/graphql'
 
+const { t } = useI18n()
+
 gql`
 fragment ProjectId on CurrentProject {
   id
@@ -50,5 +55,4 @@ const props = defineProps<{
   gql?: ProjectIdFragment | null
 }>()
 
-const { t } = useI18n()
 </script>
diff --git a/packages/app/src/settings/project/RecordKey.vue b/packages/app/src/settings/project/RecordKey.vue
@@ -4,7 +4,10 @@
       {{ t('settingsPage.recordKey.title') }}
     </template>
     <template #description>
-      <i18n-t keypath="settingsPage.recordKey.description">
+      <i18n-t
+        scope="global"
+        keypath="settingsPage.recordKey.description"
+      >
         <ExternalLink
           href="https://on.cypress.io/what-is-a-record-key"
         >

diff --git a/packages/app/src/settings/project/SpecPatterns.vue b/packages/app/src/settings/project/SpecPatterns.vue
@@ -7,7 +7,10 @@
       {{ t('settingsPage.specPattern.title') }}
     </template>
     <template #description>
-      <i18n-t keypath="settingsPage.specPattern.description">
+      <i18n-t
+        scope="global"
+        keypath="settingsPage.specPattern.description"
+      >
         <ExternalLink
           href="https://on.cypress.io"
         >
@@ -23,7 +26,10 @@
           <span class="font-medium text-gray-700">{{ t('settingsPage.specPattern.defaultIndicator') }}</span>
         </StatusIndicator>
         <span class="rounded bg-jade-100 py-4px px-8px text-jade-600 text-size-14px leading-16px">
-          <i18n-t keypath="settingsPage.specPattern.matches">
+          <i18n-t
+            scope="global"
+            keypath="settingsPage.specPattern.matches"
+          >
             {{ matches }}
           </i18n-t>
         </span>

diff --git a/packages/app/src/specs/NoSpecsPage.vue b/packages/app/src/specs/NoSpecsPage.vue
@@ -23,7 +23,10 @@
         data-testid="create-spec-page-description"
         class="leading-normal mb-32px text-gray-600 text-18px"
       >
-        <i18n-t :keypath="descriptionKeyPath">
+        <i18n-t
+          scope="global"
+          :keypath="descriptionKeyPath"
+        >
           <button
             class="text-purple-500 hocus-link-default"
           >

diff --git a/packages/frontend-shared/src/components/CopyButton.vue b/packages/frontend-shared/src/components/CopyButton.vue
@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-if="isSupported"
     :size="size"
     :variant="variant"
     @click="copyToClipboard"
@@ -9,7 +10,7 @@
       #prefix
     >
       <i-cy-copy-clipboard_x16
-        class="w-16px h-16px"
+        class="h-16px w-16px"
         :class="{
           'icon-dark-indigo-500': variant === 'tertiary',
           'icon-dark-gray-500': variant === 'outline'
@@ -40,7 +41,7 @@ const props = withDefaults(defineProps<{
   size: 'md',
 })
 
-const { copy, copied } = useClipboard({ copiedDuring: 2000 })
+const { copy, copied, isSupported } = useClipboard({ copiedDuring: 2000 })
 const copyToClipboard = () => {
   if (props.text) {
     copy(props.text)

diff --git a/packages/frontend-shared/src/components/ShikiHighlight.vue b/packages/frontend-shared/src/components/ShikiHighlight.vue
@@ -18,7 +18,7 @@ shikiWrapperClasses computed property.
 -->
 
 <template>
-  <div class="relative text-left cursor-text">
+  <div class="cursor-text text-left relative">
     <div
       v-if="highlighterInitialized"
       ref="codeEl"
@@ -51,19 +51,19 @@ shikiWrapperClasses computed property.
 
         props.class,
       ]"
-      @click="copyOnClick ? () => copyCode() : () => {}"
+      @click="copyOnClick && isSupported ? () => copyCode() : () => {}"
       v-html="highlightedCode"
     />
     <pre
       v-else
-      class="overflow-scroll border rounded border-gray-100 text-14px leading-24px font-light py-8px"
+      class="border rounded font-light border-gray-100 py-8px text-14px leading-24px overflow-scroll"
       :class="[props.class, lineNumbers ? 'pl-56px' : 'pl-8px' ]"
     >{{ code }}</pre>
     <CopyButton
       v-if="copyButton"
       variant="outline"
       tabindex="-1"
-      class="absolute bottom-8px right-8px"
+      class="right-8px bottom-8px absolute"
       :text="code"
       no-icon
     />
@@ -146,7 +146,7 @@ const highlightedCode = computed(() => {
 
 const codeEl: Ref<HTMLElement | null> = ref(null)
 
-const { copy, copied } = useClipboard()
+const { copy, isSupported } = useClipboard()
 
 const copyCode = () => {
   if (codeEl.value) {
@@ -171,12 +171,12 @@ avoid colliding with styles elsewhere in the document.
 $offset: 1.1em;
 
 .inline:deep(.shiki) {
-  @apply py-1 px-2 bg-gray-50 text-gray-500 inline-block;
+  @apply bg-gray-50 py-1 px-2 text-gray-500 inline-block;
 }
 
 .shiki-wrapper {
   &:deep(.shiki) {
-    @apply min-w-max border-r-10px border-r-transparent;
+    @apply border-r-transparent min-w-max border-r-10px;
   }
 
   &.wrap:deep(.line) {
@@ -191,7 +191,7 @@ $offset: 1.1em;
 
       // Keep bg-gray-50 synced with the box-shadows.
       .line::before, .line:first-child::before {
-        @apply bg-gray-50 text-gray-500 min-w-40px inline-block text-right px-8px mr-16px sticky;
+        @apply bg-gray-50 text-right mr-16px min-w-40px px-8px text-gray-500 inline-block sticky;
         left: 0px !important;
         content: counter(step);
         counter-increment: step;

diff --git a/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue b/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
@@ -24,6 +24,7 @@
         <DialogDescription class="p-24px text-gray-700 font-normal">
           <i18n-t
             v-if="!viewer"
+            scope="global"
             keypath="topNav.login.bodyInitial"
           >
             <ExternalLink
@@ -34,6 +35,7 @@
           </i18n-t>
           <i18n-t
             v-else-if="viewer"
+            scope="global"
             keypath="topNav.login.bodySuccess"
           >
             <ExternalLink

diff --git a/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue b/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue
@@ -9,11 +9,15 @@
     <div class="p-24px text-gray-700">
       <p class="mb-16px">
         <i18n-t
+          scope="global"
           keypath="topNav.updateCypress.currentlyRunning"
         >
           {{ installedVersion }}
         </i18n-t>
-        <i18n-t :keypath="props.projectName ? 'topNav.updateCypress.pasteToUpgradeProject' : 'topNav.updateCypress.pasteToUpgradeGlobal'">
+        <i18n-t
+          scope="global"
+          :keypath="props.projectName ? 'topNav.updateCypress.pasteToUpgradeProject' : 'topNav.updateCypress.pasteToUpgradeGlobal'"
+        >
           <span class="font-bold">{{ t('topNav.updateCypress.rememberToCloseInsert') }}</span>
         </i18n-t>
       </p>

diff --git a/packages/launchpad/src/components/code/FileRow.vue b/packages/launchpad/src/components/code/FileRow.vue
@@ -34,7 +34,10 @@
     >
       <p class="flex-grow ml-1 text-left">
         <span class="font-semibold">{{ t('setupPage.configFile.changesRequiredLabel') }}: </span>
-        <i18n-t keypath="setupPage.configFile.changesRequiredDescription">
+        <i18n-t
+          scope="global"
+          keypath="setupPage.configFile.changesRequiredDescription"
+        >
           <span class="inline-block px-1 rounded bg-warning-200 text-warning-600">{{ filePath }}</span>
         </i18n-t>
       </p>

diff --git a/packages/launchpad/src/error/BaseError.vue b/packages/launchpad/src/error/BaseError.vue
@@ -21,6 +21,7 @@
         </p>
         <i18n-t
           v-else
+          scope="global"
           keypath="launchpadErrors.generic.message"
           tag="p"
           class="font-light"

diff --git a/packages/launchpad/src/global/FileDropzone.vue b/packages/launchpad/src/global/FileDropzone.vue
@@ -18,7 +18,10 @@
             class="mx-auto -mb-4px w-80px h-80px icon-dark-indigo-500 icon-light-indigo-200"
           />
           <span class="font-light text-body-gray-700 text-18px">
-            <i18n-t keypath="globalPage.empty.dropText">
+            <i18n-t
+              scope="global"
+              keypath="globalPage.empty.dropText"
+            >
               <button class="font-medium text-indigo-500 hocus-link-default">
                 <!--
               This button allows keyboard users to fire a click event with the Enter or Space keys,
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ @@
             </p>
             <i18n-t
               v-else
+              scope="global"
               keypath="launchpadErrors.generic.message"
               tag="p"
               class="font-light"
@@ Expand Down @@