Set up entry point for new environments table

app/assets/javascripts/environments/components/new_environments_app.vue

+<script>
+export default {};
+</script>
+<template>
+  <div></div>
+</template>

app/assets/javascripts/environments/graphql/client.js

+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import environmentApp from './queries/environmentApp.query.graphql';
+import { resolvers } from './resolvers';
+import typedefs from './typedefs.graphql';
+
+export const apolloProvider = (endpoint) => {
+  const defaultClient = createDefaultClient(
+    resolvers(endpoint),
+    {
+      assumeImmutableResults: true,
+    },
+    typedefs,
+  );
+  const { cache } = defaultClient;
+
+  cache.writeQuery({
+    query: environmentApp,
+    data: {
+      availableCount: 0,
+      environments: [],
+      reviewApp: {},
+      stoppedCount: 0,
+    },
+  });
+  return new VueApollo({
+    defaultClient,
+  });
+};

app/assets/javascripts/environments/graphql/mutations/cancel_auto_stop.mutation.graphql

+mutation($environment: Environment) {
+  cancelAutoStop(environment: $environment) @client {
+    errors
+  }
+}

app/assets/javascripts/environments/graphql/mutations/delete_environment.mutation.graphql

+mutation($environment: Environment) {
+  deleteEnvironment(environment: $environment) @client {
+    errors
+  }
+}

app/assets/javascripts/environments/graphql/mutations/rollback_environment.mutation.graphql

+mutation($environment: Environment) {
+  rollbackEnvironment(environment: $environment) @client {
+    errors
+  }
+}

app/assets/javascripts/environments/graphql/mutations/stop_environment.mutation.graphql

+mutation($environment: Environment) {
+  stopEnvironment(environment: $environment) @client {
+    errors
+  }
+}

app/assets/javascripts/environments/graphql/queries/environmentApp.query.graphql

+query getEnvironmentApp {
+  environmentApp @client {
+    availableCount
+    environments
+    reviewApp
+    stoppedCount
+  }
+}

app/assets/javascripts/environments/graphql/queries/folder.query.graphql

+query getEnvironmentFolder($environment: NestedEnvironment) {
+  folder(environment: $environment) @client {
+    availableCount
+    environments
+    stoppedCount
+  }
+}

app/assets/javascripts/environments/graphql/resolvers.js

+import axios from '~/lib/utils/axios_utils';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+const mapNestedEnvironment = (env) => ({
+  ...convertObjectPropsToCamelCase(env, { deep: true }),
+  __typename: 'NestedEnvironment',
+});
+const mapEnvironment = (env) => ({
+  ...convertObjectPropsToCamelCase(env),
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  __typename: 'Environment',
+});
+
+export const resolvers = (endpoint) => ({
+  Query: {
+    environmentApp() {
+      return axios.get(endpoint, { params: { nested: true } }).then((res) => ({
+        availableCount: res.data.available_count,
+        environments: res.data.environments.map(mapNestedEnvironment),
+        reviewApp: {
+          ...convertObjectPropsToCamelCase(res.data.review_app),
+          __typename: 'ReviewApp',
+        },
+        stoppedCount: res.data.stopped_count,
+        __typename: 'EnvironmentApp',
+      }));
+    },
+    folder(_, { environment: { folderPath } }) {
+      return axios.get(folderPath, { params: { per_page: 3 } }).then((res) => ({
+        availableCount: res.data.available_count,
+        environments: res.data.environments.map(mapEnvironment),
+        stoppedCount: res.data.stopped_count,
+        __typename: 'EnvironmentFolder',
+      }));
+    },
+  },
+  Mutations: {
+    stopEnvironment(_, { environment: { stopPath } }) {
+      return axios.post(stopPath);
+    },
+    deleteEnvironment(_, { environment: { deletePath } }) {
+      return axios.delete(deletePath);
+    },
+    rollbackEnvironment(_, { environment: { retryUrl } }) {
+      return axios.post(retryUrl);
+    },
+    cancelAutoStop(_, { environment: { autoStopPath } }) {
+      return axios.post(autoStopPath);
+    },
+  },
+});

app/assets/javascripts/environments/graphql/typedefs.graphql

+type Environment {
+  id: Int!
+  globalId: ID!
+  name: String!
+  folderPath: String
+  stopPath: String
+  deletePath: String
+  retryUrl: String
+  autoStopPath: String
+}
+
+type NestedEnvironment {
+  name: String!
+  size: Int!
+  latest: Environment!
+}
+
+type EnvironmentFolder {
+  environments: [Environment!]!
+  availableCount: Int!
+  stoppedCount: Int!
+}
+
+type ReviewApp {
+  canSetupReviewApp: Boolean!
+  allClustersEmpty: Boolean!
+  reviewSnippet: String
+}
+
+type EnvironmentApp {
+  stoppedCount: Int!
+  availableCount: Int!
+  environments: [NestedEnvironment!]!
+  reviewApp: ReviewApp!
+}

app/assets/javascripts/environments/index.js

@@ -12,37 +12,40 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
 });
 
-export default () => {
-  const el = document.getElementById('environments-list-view');
-  return new Vue({
-    el,
-    components: {
-      environmentsComponent,
-    },
-    apolloProvider,
-    provide: {
-      projectPath: el.dataset.projectPath,
-      defaultBranchName: el.dataset.defaultBranchName,
-    },
-    data() {
-      const environmentsData = el.dataset;
+export default (el) => {
+  if (el) {
+    return new Vue({
+      el,
+      components: {
+        environmentsComponent,
+      },
+      apolloProvider,
+      provide: {
+        projectPath: el.dataset.projectPath,
+        defaultBranchName: el.dataset.defaultBranchName,
+      },
+      data() {
+        const environmentsData = el.dataset;
 
-      return {
-        endpoint: environmentsData.environmentsDataEndpoint,
-        newEnvironmentPath: environmentsData.newEnvironmentPath,
-        helpPagePath: environmentsData.helpPagePath,
-        canCreateEnvironment: parseBoolean(environmentsData.canCreateEnvironment),
-      };
-    },
-    render(createElement) {
-      return createElement('environments-component', {
-        props: {
-          endpoint: this.endpoint,
-          newEnvironmentPath: this.newEnvironmentPath,
-          helpPagePath: this.helpPagePath,
-          canCreateEnvironment: this.canCreateEnvironment,
-        },
-      });
-    },
-  });
+        return {
+          endpoint: environmentsData.environmentsDataEndpoint,
+          newEnvironmentPath: environmentsData.newEnvironmentPath,
+          helpPagePath: environmentsData.helpPagePath,
+          canCreateEnvironment: parseBoolean(environmentsData.canCreateEnvironment),
+        };
+      },
+      render(createElement) {
+        return createElement('environments-component', {
+          props: {
+            endpoint: this.endpoint,
+            newEnvironmentPath: this.newEnvironmentPath,
+            helpPagePath: this.helpPagePath,
+            canCreateEnvironment: this.canCreateEnvironment,
+          },
+        });
+      },
+    });
+  }
+
+  return null;
 };

app/assets/javascripts/environments/new_index.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { parseBoolean } from '../lib/utils/common_utils';
+import { apolloProvider } from './graphql/client';
+import EnvironmentsApp from './components/new_environments_app.vue';
+
+Vue.use(VueApollo);
+
+export default (el) => {
+  if (el) {
+    const {
+      canCreateEnvironment,
+      endpoint,
+      newEnvironmentPath,
+      helpPagePath,
+      projectPath,
+      defaultBranchName,
+    } = el.dataset;
+
+    return new Vue({
+      el,
+      apolloProvider: apolloProvider(endpoint),
+      provide: {
+        projectPath,
+        defaultBranchName,
+        endpoint,
+        newEnvironmentPath,
+        helpPagePath,
+        canCreateEnvironment: parseBoolean(canCreateEnvironment),
+      },
+      render(h) {
+        return h(EnvironmentsApp);
+      },
+    });
+  }
+
+  return null;
+};

app/assets/javascripts/pages/projects/environments/index/index.js

 import initEnvironments from '~/environments/';
+import initNewEnvironments from '~/environments/new_index';
 
-initEnvironments();
+let el = document.getElementById('environments-list-view');
+
+if (el) {
+  initEnvironments(el);
+} else {
+  el = document.getElementById('environments-table');
+  initNewEnvironments(el);
+}

app/views/projects/environments/index.html.haml

 - page_title _("Environments")
-- add_page_specific_style 'page_bundles/environments'
 
-#environments-list-view{ data: { environments_data: environments_list_data,
-  "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
-  "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
-  "new-environment-path" => new_project_environment_path(@project),
-  "help-page-path" => help_page_path("ci/environments/index.md"),
-  "project-path" => @project.full_path,
-  "default-branch-name" => @project.default_branch_or_main } }
+- if Feature.enabled?(:new_environments_table)
+  #environments-table{ data: { endpoint: project_environments_path(@project, format: :json),
+    "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
+    "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
+    "new-environment-path" => new_project_environment_path(@project),
+    "help-page-path" => help_page_path("ci/environments/index.md"),
+    "project-path" => @project.full_path,
+    "default-branch-name" => @project.default_branch_or_main } }
+- else
+  - add_page_specific_style 'page_bundles/environments'
+  #environments-list-view{ data: { environments_data: environments_list_data,
+    "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
+    "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
+    "new-environment-path" => new_project_environment_path(@project),
+    "help-page-path" => help_page_path("ci/environments/index.md"),
+    "project-path" => @project.full_path,
+    "default-branch-name" => @project.default_branch_or_main } }

config/feature_flags/development/new_environments_table.yml

+---
+name: new_environments_table
+introduced_by_url:
+rollout_issue_url:
+milestone: '14.4'
+type: development
+group: group::release
+default_enabled: false

ee/spec/features/projects/environments/environments_spec.rb

@@ -8,6 +8,7 @@ RSpec.describe 'Environments page', :js do
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(new_environments_table: false)
     allow(License).to receive(:feature_available?).and_call_original
     allow(License).to receive(:feature_available?).with(:protected_environments).and_return(true)
     project.add_maintainer(user)

spec/features/projects/environments/environments_spec.rb

@@ -8,6 +8,7 @@ RSpec.describe 'Environments page', :js do
   let(:role) { :developer }
 
   before do
+    stub_feature_flags(new_environments_table: false)
     project.add_role(user, role)
     sign_in(user)
   end

spec/frontend/environments/graphql/resolvers_spec.js

+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { resolvers } from '~/environments/graphql/resolvers';
+import { TEST_HOST } from 'helpers/test_constants';
+import { environmentsApp, resolvedEnvironmentsApp, folder, resolvedFolder } from './mock_data';
+
+const ENDPOINT = `${TEST_HOST}/environments`;
+
+describe('~/frontend/environments/graphql/resolvers', () => {
+  let mockResolvers;
+  let mock;
+
+  beforeEach(() => {
+    mockResolvers = resolvers(ENDPOINT);
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.reset();
+  });
+
+  describe('environmentApp', () => {
+    it('should fetch environments and map them to frontend data', async () => {
+      mock.onGet(ENDPOINT, { params: { nested: true } }).reply(200, environmentsApp);
+
+      const app = await mockResolvers.Query.environmentApp();
+      expect(app).toEqual(resolvedEnvironmentsApp);
+    });
+  });
+  describe('folder', () => {
+    it('should fetch the folder url passed to it', async () => {
+      mock.onGet(ENDPOINT, { params: { per_page: 3 } }).reply(200, folder);
+
+      const environmentFolder = await mockResolvers.Query.folder(null, {
+        environment: { folderPath: ENDPOINT },
+      });
+
+      expect(environmentFolder).toEqual(resolvedFolder);
+    });
+  });
+  describe('stopEnvironment', () => {
+    it('should post to the stop environment path', async () => {
+      mock.onPost(ENDPOINT).reply(200);
+
+      await mockResolvers.Mutations.stopEnvironment(null, { environment: { stopPath: ENDPOINT } });
+
+      expect(mock.history.post).toContainEqual(
+        expect.objectContaining({ url: ENDPOINT, method: 'post' }),
+      );
+    });
+  });
+  describe('rollbackEnvironment', () => {
+    it('should post to the retry environment path', async () => {
+      mock.onPost(ENDPOINT).reply(200);
+
+      await mockResolvers.Mutations.rollbackEnvironment(null, {
+        environment: { retryUrl: ENDPOINT },
+      });
+
+      expect(mock.history.post).toContainEqual(
+        expect.objectContaining({ url: ENDPOINT, method: 'post' }),
+      );
+    });
+  });
+  describe('deleteEnvironment', () => {
+    it('should DELETE to the delete environment path', async () => {
+      mock.onDelete(ENDPOINT).reply(200);
+
+      await mockResolvers.Mutations.deleteEnvironment(null, {
+        environment: { deletePath: ENDPOINT },
+      });
+
+      expect(mock.history.delete).toContainEqual(
+        expect.objectContaining({ url: ENDPOINT, method: 'delete' }),
+      );
+    });
+  });
+  describe('cancelAutoStop', () => {
+    it('should post to the auto stop path', async () => {
+      mock.onPost(ENDPOINT).reply(200);
+
+      await mockResolvers.Mutations.cancelAutoStop(null, {
+        environment: { autoStopPath: ENDPOINT },
+      });
+
+      expect(mock.history.post).toContainEqual(
+        expect.objectContaining({ url: ENDPOINT, method: 'post' }),
+      );
+    });
+  });
+});