chore: move deploy steps to separate workflow

.changeset/late-frogs-marry.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Fixes [#817](https://github.com/apollographql/apollo-client-devtools/issues/817): icon for Apollo Client Devtools is missing in Firefox.

.github/workflows/deploy.yml

@@ -0,0 +1,67 @@
+name: Deploy
+
+on:
+  push:
+    tags:
+      - "v*.*.*"
+
+jobs:
+  deploy-chrome:
+    name: Deploy Chrome extension
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build production extension
+        run: npm run build
+
+      - name: Create zip file
+        run: npm run dist chrome
+
+      - name: Upload & release Chrome extension
+        uses: mnao305/chrome-extension-upload@v4.0.1
+        with:
+          file-path: apollo-client-devtools-chrome.zip
+          extension-id: ${{ secrets.CHROME_EXTENSION_ID }}
+          client-id: ${{ secrets.CHROME_CLIENT_ID }}
+          client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}
+          refresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}
+
+  deploy-firefox:
+    name: Deploy Firefox extension
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build production extension
+        run: npm run build
+
+      - name: Create zip file
+        run: npm run dist firefox
+
+      - name: Publish the extension for Firefox
+        uses: yayuyokitano/firefox-addon@v0.0.6-alpha
+        with:
+          api_key: ${{ secrets.FIREFOX_API_KEY }}
+          api_secret: ${{ secrets.FIREFOX_API_SECRET }}
+          guid: ${{ secrets.FIREFOX_ADDON_UUID }}
+          xpi_path: apollo-client-devtools-firefox.zip
+          src_path: apollo-client-devtools-src.zip

.github/workflows/release.yml

@@ -47,8 +47,8 @@ jobs:
         with:
           node-version: 18.x
 
-      - name: Install dependencies (with cache)
-        uses: bahmutov/npm-install@v1
+      - name: Install dependencies
+        run: npm ci
 
       - name: Create release PR or publish to npm + GitHub
         id: changesets
@@ -61,16 +61,6 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - name: Upload & release Chrome extension
-        if: steps.changesets.outcome == 'success' && steps.changesets.outputs.published == 'true'
-        uses: mnao305/chrome-extension-upload@v4.0.1
-        with:
-          file-path: dist/chrome.zip
-          extension-id: ${{ secrets.CHROME_EXTENSION_ID }}
-          client-id: ${{ secrets.CHROME_CLIENT_ID }}
-          client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}
-          refresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}
-
       - name: Send a Slack notification on publish
         if: steps.changesets.outcome == 'success' && steps.changesets.outputs.published == 'true'
         id: slack
@@ -88,29 +78,8 @@ jobs:
                   "type": "section",
                   "text": {
                     "type": "mrkdwn",
-                    "text": "A new version of `apollo-client-devtools` was released :rocket:"
+                    "text": "A new version of `apollo-client-devtools` was released: <https://github.com/apollographql/apollo-client-devtools/releases/tag/v${{ fromJson(steps.changesets.outputs.publishedPackages)[0].version }}|v${{ fromJson(steps.changesets.outputs.publishedPackages)[0].version }}> :rocket:"
                   }
-                },
-                {
-                  "type": "section",
-                  "fields": [
-                    {
-                      "type": "mrkdwn",
-                      "text": "*Version:*\n`${{ fromJson(steps.changesets.outputs.publishedPackages)[0].version }}`"
-                    },
-                    {
-                      "type": "mrkdwn",
-                      "text": "*Tag:*\n`latest`"
-                    },
-                    {
-                      "type": "mrkdwn",
-                      "text": "*GitHub release:*\n<https://github.com/apollographql/apollo-client-devtools/releases/tag/v${{ fromJson(steps.changesets.outputs.publishedPackages)[0].version }}|link>"
-                    },
-                    {
-                      "type": "mrkdwn",
-                      "text": "*npm releases:*\n<https://www.npmjs.com/package/apollo-client-devtools/v/${{ fromJson(steps.changesets.outputs.publishedPackages)[0].version }}|link>"
-                    }
-                  ]
                 }
               ]
             }

README.md

@@ -1,15 +1,33 @@
-<a href="https://www.apollographql.com/"><img src="https://user-images.githubusercontent.com/841294/53402609-b97a2180-39ba-11e9-8100-812bab86357c.png" height="100" alt="Apollo Client"></a>
+<div align="center">
 
-# Apollo Client Browser Devtools
+<p>
+	<a href="https://www.apollographql.com/"><img src="./assets/apollo-wordmark.svg" height="100" alt="Apollo Client"></a>
+</p>
+<h1>Apollo Client Devtools</h1>
 
-[![npm version](https://badge.fury.io/js/apollo-client-devtools.svg)](https://badge.fury.io/js/apollo-client-devtools)
-[![Build Status](https://circleci.com/gh/apollographql/apollo-client-devtools.svg?style=svg)](https://circleci.com/gh/apollographql/apollo-client-devtools)
-[![Join our Discord server](https://img.shields.io/discord/1022972389463687228.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square)](https://discord.gg/graphos)
+[![Chrome Web Store][ChromeWebStoreBadge]][WebStore] [![Addons.mozilla.org][FirefoxAddonBadge]][Amo]
+[![Discord][DiscordBadge]][Discord] [![Build Status](https://circleci.com/gh/apollographql/apollo-client-devtools.svg?style=svg)](https://circleci.com/gh/apollographql/apollo-client-devtools)
 
-[Download for Firefox](https://addons.mozilla.org/firefox/addon/apollo-developer-tools/) | [Download for Chrome](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm)
+</div>
 
 This repository contains the Apollo Client Browser Devtools extension for Chrome & Firefox.
 
+## Installation
+
+### Chrome Web Store
+
+Chrome users can install the extension by visiting the [Chrome Web Store](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm).
+
+Opera users can install the extension from Chrome Web Store using the [Download Chrome Extension](https://addons.opera.com/extensions/details/app_id/kipjbhgniklcnglfaldilecjomjaddfi) addon for Opera.
+
+### Firefox
+
+Firefox users can install the addon via [Firefox Browser Add-ons](https://addons.mozilla.org/firefox/addon/apollo-developer-tools/).
+
+### Install local version
+
+If you want to install a local version of the extension instead, skip ahead to the [Developing](#Developing) section.
+
 ## Features
 
 The Apollo Client Browser Devtools appear as an "Apollo" tab in your web browser inspector, alongside other tabs like "Elements" and "Console". The devtools currently have four main features:
@@ -19,18 +37,7 @@ The Apollo Client Browser Devtools appear as an "Apollo" tab in your web browser
 - **Mutation inspector:** View fired mutations, variables, and re-run individual mutations.
 - **Cache inspector:** Visualize the Apollo Client cache and search through it by field names and/or values.
 
-![Apollo Client Browser Devtools](./assets/ac-browser-devtools-3.png)
-
-## Maintainers
-
-| Name               | Username                                       |
-| ------------------ | ---------------------------------------------- |
-| Ben Newman         | [@benjamn](https://github.com/benjamn)         |
-| Alessia Bellisario | [@alessbell](https://github.com/alessbell)     |
-| Jeff Auriemma      | [@bignimbus](https://github.com/bignimbus)     |
-| Hugh Willson       | [@hwillson](https://github.com/hwillson)       |
-| Jerel Miller       | [@jerelmiller](https://github.com/jerelmiller) |
-| Lenz Weber-Tronic  | [@phryneas](https://github.com/phryneas)       |
+![Apollo Client Browser Devtools](./assets/devtools-screenshot.jpg)
 
 ## Apollo Client version support
 
@@ -40,10 +47,6 @@ The Apollo Client Browser Devtools appear as an "Apollo" tab in your web browser
 - We do our best to support older `3.x` versions of [Apollo Client](https://github.com/apollographql/apollo-client/releases) for use with our Client Browser DevTools.
 - We do not offer support of `2.x` versions of [Apollo Client](https://github.com/apollographql/apollo-client/releases) for use with our Client Browser DevTools.
 
-## Installation
-
-You can install the extension via [Firefox Browser Add-ons](https://addons.mozilla.org/firefox/addon/apollo-developer-tools/) or the [Chrome Webstore](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm). If you want to install a local version of the extension instead, skip ahead to the [Developing](#Developing) section.
-
 ### Configuration
 
 While your application is in dev mode, the devtools will appear as an "Apollo" tab in your web browser inspector. To enable the devtools for your application in production, pass `connectToDevTools: true` to the ApolloClient constructor in your application. Pass `connectToDevTools: false` if want to manually disable this functionality.
@@ -54,13 +57,21 @@ If you are seeing the "Apollo" tab but are still having issues, skip ahead to th
 
 ## Developing
 
-### Installation
+### Build the extension
 
-After cloning this repo, install the required packages:
+Before building the extension you should install dependencies:
 
-```bash
-cd apollo-client-devtools
-npm install
+```sh
+# Install dependencies
+> npm install
+
+# Build the extension
+> npm run build
+
+# Generate zipped distributables
+> npm run dist chrome
+# or
+> npm run dist firefox
 ```
 
 ### Running the sample application
@@ -81,7 +92,7 @@ Navigate to `localhost:3000` to view the application. To view the API schema, na
 
 ### Development with web-ext & WebExtWebpackPlugin
 
-For cross-browser development, we rely on the [web-ext](https://github.com/mozilla/web-ext) command line tool and a modified version of the [WebExtWebpackPlugin](https://github.com/hiikezoe/web-ext-webpack-plugin) that hooks into the build process.
+For cross-browser development, we rely a modified version of the [WebExtWebpackPlugin](https://github.com/hiikezoe/web-ext-webpack-plugin) that hooks into the build process.
 
 To develop with Firefox, run the following command:
 
@@ -111,7 +122,7 @@ Defaults can be found and modified in the WebExtPlugin. You might want to do so
 
 ### Tests
 
-We use [Jest](https://jestjs.io/) and the [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to write and run our tests.
+We use [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to write and run our tests.
 
 To run tests for both `src` and `development`, run the following command:
 
@@ -131,7 +142,7 @@ There are two main pieces of the Apollo Client Browser Devtools: the extension i
 
 The devtools folder structure mirrors this architecture. The source code for the extension can be found in `src/extension`. The React application code can be found in `src/application`.
 
-For builds, we use the `build` folder. After a build, all of the files needed to run the devtools can be found here. If these files are bundled for development, source maps are provided. When these files are bundled for production, source maps are not provided and the code is minified. We use the `dist` folder for distributable zip files.
+For builds, we use the `build` folder. After a build, all of the files needed to run the devtools can be found here. If these files are bundled for development, source maps are provided. When these files are bundled for production, source maps are not provided and the code is minified. Distributable zip files are generated in the root of the project.
 
 ### Application Structure
 
@@ -169,17 +180,6 @@ If you are using Apollo Client 3.0, make sure you are using at least version 2.3
 
 If you're seeing an error that's being caused by the devtools, please open an issue on this repository with a detailed explanation of the problem and steps that we can take to replicate the error.
 
-## Publishing
-
-Release process, for those with permission:
-
-1. Verify that your changes work as expected by loading the extension as an "unpacked extension" locally for each browser.
-2. Update the `./package.json` and `./src/extension/manifest.json` version numbers.
-3. Commit changes and tag your version as a github release.
-4. Publish a new version to npm using `npm publish` in the root of the project. We're publishing to npm to allow other projects to have a dependency on devtools.
-5. Run `npm run zip` to pack all of the builds for submission.
-6. Create a new release in the Chrome/Firefox web stores (following the instructions for each browser in the sections below), uploading the zip bundle.
-
 ### Chrome
 
 #### Testing locally
@@ -194,7 +194,7 @@ Release process, for those with permission:
 1. Login to the [Chrome webstore](https://chrome.google.com/webstore/user/purchases?authuser=1) and access the Developer Dashboard.
 2. Select the `Apollo Client Devtools` extension to update.
 3. Click on `Package` then `Upload new package`.
-4. Select the `./dist/chrome.zip` file for upload.
+4. Select the `apollo-client-devtools-chrome.zip` file for upload.
 5. Click on "Submit for review".
 
 ### Firefox
@@ -203,7 +203,7 @@ Release process, for those with permission:
 
 1. In your Firefox URL bar, go to: `about:debugging#/runtime/this-firefox`
 2. Click on `Load Temporary Add-on`.
-3. Add the `apollo-client-devtools/dist/apollo_client_developer_tools-X.X.X.zip` file.
+3. Add the `apollo-client-devtools-firefox.zip` file.
 4. The add-on should now be installed.
 
 #### Submit for review
@@ -213,7 +213,7 @@ Release process, for those with permission:
 3. Click on the "Upload New Version" link in the top left side menu.
 4. Agree to any new Firefox distribution agreements or policies that might show up.
 5. When the "Submit a New Version" page shows, click on the file upload button in the "Upload Version" section (keeping "Firefox" as the only option checked in the compatible application section).
-6. Choose the `apollo-client-devtools/dist/apollo_client_developer_tools-X.X.X.zip` for upload and submit. **NOTE: when uploading to Firefox, you also must include the source code. A zipped version of the `apollo-client-devtools` repo with the built files, node_modules, tests & development folder deleted will do**
+6. Choose the `apollo-client-devtools/apollo-client-devtools-firefox.zip` for upload and submit. **NOTE: when uploading to Firefox, you also must include the source code. Select the file `apollo-client-devtools/apollo-client-devtools-src.zip` for upload.**
 7. After the file has been validated, continue with the submission.
 
 ## Code of Conduct
@@ -232,3 +232,29 @@ This project is governed by the [Apollo Code of Conduct](https://www.apollograph
 ## Learn how to build with Apollo
 
 Check out the [Odyssey](https://odyssey.apollographql.com/) learning platform, the perfect place to start your GraphQL journey with videos and interactive code challenges. Join the [Apollo Community](https://community.apollographql.com/) to interact with and get technical help from the GraphQL community.
+
+## Maintainers
+
+| Name               | Username                                       |
+| ------------------ | ---------------------------------------------- |
+| Ben Newman         | [@benjamn](https://github.com/benjamn)         |
+| Alessia Bellisario | [@alessbell](https://github.com/alessbell)     |
+| Jeff Auriemma      | [@bignimbus](https://github.com/bignimbus)     |
+| Hugh Willson       | [@hwillson](https://github.com/hwillson)       |
+| Jerel Miller       | [@jerelmiller](https://github.com/jerelmiller) |
+| Lenz Weber-Tronic  | [@phryneas](https://github.com/phryneas)       |
+
+<!-- Badges -->
+
+[FirefoxAddonBadge]: https://img.shields.io/amo/v/apollo-developer-tools.svg?label=firefox&logo=firefox-browser&logoColor=white
+[DiscordBadge]: https://img.shields.io/discord/1022972389463687228.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff
+[ChromeWebStoreBadge]: https://img.shields.io/chrome-web-store/v/jdkknkkbebbapilgoeccciglkfbmbnfm.svg?label=chrome&logo=google-chrome&logoColor=white
+
+<!-- Download -->
+
+[Amo]: https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/
+[WebStore]: https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm
+
+<!-- Related pages -->
+
+[Discord]: https://discord.gg/graphos