feat: add back and cancel btns to TOS and Org select pages

src/pages/DefaultOrgSelector/DefaultOrgSelector.jsx

@@ -125,7 +125,7 @@ function DefaultOrgSelector() {
   return (
     <div className="mx-auto w-full max-w-[38rem]">
       <h1 className="pb-3 pt-20 text-2xl font-semibold">
-        Which organization are you using today?
+        Which organization are you working with today?
       </h1>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="my-4 flex flex-col gap-4 border-y border-ds-gray-tertiary py-6">
@@ -164,9 +164,17 @@ function DefaultOrgSelector() {
           />
           <GitHubHelpBanner />
         </div>
-        <div className="flex justify-end">
+        <div className="flex justify-end gap-2">
+          <Button
+            to={{ pageName: 'login' }}
+            variant="plain"
+            disabled={false}
+            hook="org-select-cancel-button"
+          >
+            Cancel
+          </Button>
           <Button hook="user selects org, continues to app" type="submit">
-            Continue
+            Continue to Codecov
           </Button>
         </div>
       </form>

src/pages/DefaultOrgSelector/DefaultOrgSelector.spec.jsx

@@ -219,12 +219,12 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       let selectLabel = screen.queryByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).not.toBeInTheDocument()
 
       selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
     })
@@ -391,6 +391,43 @@ describe('DefaultOrgSelector', () => {
     })
   })
 
+  describe('on cancel', () => {
+    it('sends user back to the login page', async () => {
+      setup({
+        useUserData: mockUserData,
+        myOrganizationsData: {
+          me: {
+            myOrganizations: {
+              edges: [
+                {
+                  node: {
+                    avatarUrl:
+                      'https://avatars0.githubusercontent.com/u/8226205?v=3&s=55',
+                    username: 'criticalRole',
+                    ownerid: 1,
+                  },
+                },
+              ],
+              pageInfo: { hasNextPage: false, endCursor: 'MTI=' },
+            },
+          },
+        },
+      })
+
+      render(<DefaultOrgSelector />, { wrapper: wrapper() })
+
+      const header = await screen.findByText(
+        /Which organization are you working with today?/
+      )
+      expect(header).toBeInTheDocument()
+
+      const cancel = await screen.findByRole('link', { name: /Cancel/ })
+      await userEvent.click(cancel)
+
+      expect(testLocation.pathname).toBe('/login')
+    })
+  })
+
   describe('on submit', () => {
     beforeEach(() => jest.resetAllMocks())
     it('fires update default org mutation', async () => {
@@ -418,7 +455,7 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
 
@@ -431,7 +468,7 @@ describe('DefaultOrgSelector', () => {
       await user.click(orgInList)
 
       const submit = await screen.findByRole('button', {
-        name: /Continue/,
+        name: /Continue to Codecov/,
       })
 
       await user.click(submit)
@@ -474,7 +511,7 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
 
@@ -612,7 +649,7 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
 
@@ -671,7 +708,7 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
 
@@ -887,7 +924,7 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
 
@@ -951,7 +988,7 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
 
@@ -1054,7 +1091,7 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
 
@@ -1168,7 +1205,7 @@ describe('DefaultOrgSelector', () => {
       render(<DefaultOrgSelector />, { wrapper: wrapper() })
 
       const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
+        /Which organization are you working with today?/
       )
       expect(selectLabel).toBeInTheDocument()
 

src/pages/TermsOfService/TermsOfService.spec.tsx

@@ -261,6 +261,20 @@ describe('TermsOfService', () => {
     })
   })
 
+  describe('on back', () => {
+    it('sends user back to the login page', async () => {
+      render(<TermsOfService />, { wrapper })
+
+      const welcome = await screen.findByText(/Welcome to Codecov/i)
+      expect(welcome).toBeInTheDocument()
+
+      const back = await screen.findByRole('link', { name: /Back/ })
+      await userEvent.click(back)
+
+      expect(testLocation.pathname).toBe('/login')
+    })
+  })
+
   /*
    * This is to test the various form validation edge cases case with different data.
    * The describe.each function takes an array of arrays, each array is a test case.

src/pages/TermsOfService/TermsOfService.tsx

@@ -237,7 +237,15 @@ export default function TermsOfService() {
             .
           </p>
         )}
-        <div className="mt-3 flex justify-end">
+        <div className="mt-3 flex justify-end gap-2">
+          <Button
+            to={{ pageName: 'login' }}
+            variant="plain"
+            disabled={false}
+            hook="tos-back-button"
+          >
+            Back
+          </Button>
           <Button
             disabled={isDisabled({
               isValid: formState.isValid,

src/ui/Button/Button.stories.jsx

@@ -44,6 +44,12 @@ PlainButton.args = {
   variant: 'plain',
 }
 
+export const ListboxButton = Template.bind({})
+ListboxButton.args = {
+  children: 'Listbox button',
+  variant: 'listbox',
+}
+
 export const GitHubButton = Template.bind({})
 GitHubButton.args = {
   children: 'GitHub Button',