feat(app): show previous versions (#18838)

* add gql endpoint and format

* types

* update schema and endpoint

* unused code

* lint

* types

* improve tests

* move static strings to i18n

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>

Author: lmiller1990

packages/data-context/src/DataContext.ts

@@ -29,6 +29,7 @@ import type { Server } from 'http'
 import type { AddressInfo } from 'net'
 import EventEmitter from 'events'
 import type { App as ElectronApp } from 'electron'
+import { VersionsDataSource } from './sources/VersionsDataSource'
 
 const IS_DEV_ENV = process.env.CYPRESS_INTERNAL_ENV !== 'production'
 
@@ -166,6 +167,10 @@ export class DataContext {
     return new GitDataSource(this)
   }
 
+  async versions () {
+    return new VersionsDataSource().versions()
+  }
+
   @cached
   get browser () {
     return new BrowserDataSource(this)

packages/data-context/src/sources/VersionsDataSource.ts

@@ -0,0 +1,58 @@
+import execa from 'execa'
+
+interface Version {
+  id: string
+  released: string
+  version: string
+}
+
+interface VersionData {
+  current: Version
+  latest: Version
+}
+
+export class VersionsDataSource {
+  /**
+   * Returns most recent and current version of Cypress
+   * {
+   *   current: {
+   *     version: '8.7.0',
+   *     released: '2021-10-15T21:38:59.983Z'
+   *   },
+   *   latest: {
+   *     version: '8.8.0',
+   *     released: '2021-10-25T21:38:59.983Z'
+   *   }
+   * }
+   */
+  async versions (): Promise<VersionData> {
+    const currentCypressVersion = require('cypress/package.json')
+    const result = await execa(`npm`, [`view`, `cypress`, `time`, `--json`])
+
+    const json = JSON.parse(result.stdout)
+
+    delete json['modified']
+    delete json['created']
+
+    const latest = Object.keys(json).sort().reverse()?.[0]
+
+    if (!latest) {
+      throw Error('Could not get npm info for Cypress')
+    }
+
+    const latestVersion: Version = {
+      id: latest,
+      version: latest,
+      released: json[latest],
+    }
+
+    return {
+      latest: latestVersion,
+      current: {
+        version: currentCypressVersion.version,
+        released: currentCypressVersion.version === '0.0.0-development' ? new Date().toISOString() : json[currentCypressVersion.version],
+        id: currentCypressVersion.version,
+      },
+    }
+  }
+}

packages/data-context/src/sources/index.ts

@@ -13,4 +13,5 @@ export * from './ProjectDataSource'
 export * from './SettingsDataSource'
 export * from './StorybookDataSource'
 export * from './UtilDataSource'
+export * from './VersionsDataSource'
 export * from './WizardDataSource'

packages/data-context/src/util/urqlCacheKeys.ts

@@ -16,5 +16,6 @@ export const urqlCacheKeys: Partial<CacheExchangeOpts> = {
     GitInfo: () => null,
     BaseError: () => null,
     ProjectPreferences: (data) => data.__typename,
+    VersionData: () => null,
   },
 }

packages/frontend-shared/cypress/support/mock-graphql/clientTestContext.ts

@@ -1,5 +1,14 @@
 import type { CloudUser } from '../generated/test-cloud-graphql-types.gen'
-import type { WizardStep, CurrentProject, Browser, WizardBundler, WizardFrontendFramework, TestingTypeEnum, GlobalProject } from '../generated/test-graphql-types.gen'
+import type {
+  WizardStep,
+  CurrentProject,
+  Browser,
+  WizardBundler,
+  WizardFrontendFramework,
+  TestingTypeEnum,
+  GlobalProject,
+  VersionData,
+} from '../generated/test-graphql-types.gen'
 import { resetTestNodeIdx } from './clientTestUtils'
 import { stubBrowsers } from './stubgql-Browser'
 import * as cloudTypes from './stubgql-CloudTypes'
@@ -13,6 +22,7 @@ export interface ClientTestContext {
     currentBrowser: Browser | null
     browsers: Browser[] | null
   }
+  versions: VersionData
   isAuthBrowserOpened: boolean
   wizard: {
     step: WizardStep
@@ -48,6 +58,21 @@ export function makeClientTestContext (): ClientTestContext {
       browsers: stubBrowsers,
       currentBrowser: stubBrowsers[0],
     },
+    versions: {
+      __typename: 'VersionData',
+      current: {
+        __typename: 'Version',
+        id: '8.7.0',
+        version: '8.7.0',
+        released: '2021-10-25T21:38:59.983Z',
+      },
+      latest: {
+        __typename: 'Version',
+        id: '8.6.0',
+        version: '8.6.0',
+        released: '2021-10-11T19:40:49.036Z',
+      },
+    },
     isAuthBrowserOpened: false,
     wizard: {
       step: 'configFiles',

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts

@@ -12,9 +12,12 @@ export const stubQuery: MaybeResolver<Query> = {
   currentProject (source, args, ctx) {
     return ctx.currentProject
   },
-  projects (soruce, args, ctx) {
+  projects (source, args, ctx) {
     return ctx.projects
   },
+  versions (source, args, ctx) {
+    return ctx.versions
+  },
   isAuthBrowserOpened (source, args, ctx) {
     return ctx.isAuthBrowserOpened
   },

packages/frontend-shared/src/gql-components/HeaderBarContent.spec.tsx

@@ -20,7 +20,11 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
 
   it('renders without browser menu by default and other items work', () => {
     cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
-      render: (gqlVal) => <div class="resize overflow-auto border-current border-1 h-700px"><HeaderBarContent gql={gqlVal} /></div>,
+      render: (gqlVal) => (
+        <div class="resize overflow-auto border-current border-1 h-700px">
+          <HeaderBarContent gql={gqlVal} />
+        </div>
+      ),
     })
 
     cy.contains('Projects').should('be.visible')
@@ -32,6 +36,69 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     cy.contains('a', text.seeAllReleases).should('be.visible')
   })
 
+  it('does not show hint when on latest version of Cypress', () => {
+    cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
+      onResult: (result) => {
+        result.versions = {
+          __typename: 'VersionData',
+          latest: {
+            __typename: 'Version',
+            id: '8.7.0',
+            version: '8.7.0',
+            released: '2021-10-25T21:00:00.000Z',
+          },
+          current: {
+            __typename: 'Version',
+            id: '8.7.0',
+            version: '8.7.0',
+            released: '2021-10-25T21:00:00.000Z',
+          },
+        }
+      },
+      render: (gqlVal) => (
+        <div class="resize overflow-auto border-current border-1 h-700px">
+          <HeaderBarContent gql={gqlVal} />
+        </div>
+      ),
+    })
+
+    cy.get('[data-cy="topnav-version-list"]').click()
+    cy.get('[data-cy="latest-version"]').contains('8.7.0')
+    cy.get('[data-cy="update-hint"]').should('not.exist')
+  })
+
+  it('shows hint to upgrade to latest version of cypress', () => {
+    cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
+      onResult: (result) => {
+        result.versions = {
+          __typename: 'VersionData',
+          current: {
+            __typename: 'Version',
+            id: '8.6.0',
+            version: '8.6.0',
+            released: '2021-06-25T21:00:00.000Z',
+          },
+          latest: {
+            __typename: 'Version',
+            id: '8.7.0',
+            version: '8.7.0',
+            released: '2021-10-25T21:00:00.000Z',
+          },
+        }
+      },
+      render: (gqlVal) => (
+        <div class="resize overflow-auto border-current border-1 h-700px">
+          <HeaderBarContent gql={gqlVal} />
+        </div>
+      ),
+    })
+
+    cy.contains('8.6.0').click()
+    cy.get('[data-cy="latest-version"]').contains('8.7.0')
+    cy.get('[data-cy="current-version"]').contains('8.6.0')
+    cy.get('[data-cy="update-hint"]').should('exist')
+  })
+
   it('displays the active project name', () => {
     cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
       render: (gqlVal) => <div class="resize overflow-auto border-current border-1 h-700px"><HeaderBarContent gql={gqlVal} /></div>,