How to remove a Github Environment

Question

My question is about cleaning up the "Environments" tab on a Github repository.

I previously deployed via Heroku, using automatic deployment from two separate Github branches (one for staging, one for production).

This created a tab "Environments" on the repository, in which both Heroku environments were shown - exactly as intended.

Once I started to dive into Heroku pipelines, I have now configured the app to be promoted to production from staging, so the production environment no longer auto-deploys from a branch.

The Environments tab on my Github repo has no way to remove the environment that I no longer use. I can't seem to find any place on Github or Heroku to make Github "forget" this deployment environment.

I hope my question is clear enough; if I can elaborate on anything, please let me know.

Answer 1

I made a little webpage/script too, to automate the process (I don't have Python installed, and I didn't see that someone else had already made a script), and this is online and putting your info will do the process automatically.

Stackblitz - Github Deployments deleter

Edit 18/07/2020: I copied the script from Stackblitz to a local snippet code in here too, just in case Stackblitz disappears:

// RECOMMENDED: Disconnect HEROKU from Github before doing this (though not strictly necessary, I think).
//See https://stackoverflow.com/a/61272173/6569950 for more info.

// PARAMETERS
const TOKEN = ""; // MUST BE `repo_deployments` authorized
const REPO = "your-repo"; // e.g. "monorepo"
const USER_OR_ORG = "your-name"; // e.g. "your-name"

// GLOBAL VARS
const URL = `https://api.github.com/repos/${USER_OR_ORG}/${REPO}/deployments`;
const AUTH_HEADER = `token ${TOKEN}`;

// UTILITY FUNCTIONS
const getAllDeployments = () =>
  fetch(`${URL}`, {
    headers: {
      authorization: AUTH_HEADER
    }
  }).then(val => val.json());

const makeDeploymentInactive = id =>
  fetch(`${URL}/${id}/statuses`, {
    method: "POST",
    body: JSON.stringify({
      state: "inactive"
    }),
    headers: {
      "Content-Type": "application/json",
      Accept: "application/vnd.github.ant-man-preview+json",
      authorization: AUTH_HEADER
    }
  }).then(() => id);

const deleteDeployment = id =>
  fetch(`${URL}/${id}`, {
    method: "DELETE",
    headers: {
      authorization: AUTH_HEADER
    }
  }).then(() => id);

// MAIN
getAllDeployments()
  .catch(console.error)
  .then(res => {
    console.log(`${res.length} deployments found`);
    return res;
  })
  .then(val => val.map(({
    id
  }) => id))
  .then(ids => Promise.all(ids.map(id => makeDeploymentInactive(id))))
  .then(res => {
    console.log(`${res.length} deployments marked as "inactive"`);
    return res;
  })
  .then(ids => Promise.all(ids.map(id => deleteDeployment(id))))
  .then(res => {
    console.log(`${res.length} deployments deleted`);
    return res;
  })
  .then(finalResult => {
    const appDiv = document.getElementById("app");
    appDiv.innerHTML = `
<h1>CLEANUP RESULT</h1>
<br>
Removed Deployments: ${finalResult.length}
<br>
<br>Ids:<br>
${JSON.stringify(finalResult)}
<br><br><br><br><br><br>
  <p>(Open up the console)</p>
`;
  });

h1,
h2 {
  font-family: Lato;
}

<div id="app">
  <h1>Github Deployment's Cleaner</h1>
  <p> You need to put the parameters in!</p>
</div>