Integrate with new environments API

What does this MR do?

This is the first of several merge requests to add pagination and a new subview for environments. In order to make it easier to review the work will be divided in 3 different Merge Requests:

• 1. Adapt to new API response - !8954 (merged)
• 2. Add Pagination - !9090 (merged)
• 3. Add the subview to show the content of a folder !9169 (merged)

This is the Merge Request for 1. Adapt to new API response

With the new API response the folders and the counters are now calculated in the backend:

• Removes environments calculations to have the counts of available and stopped environments
• Removes filtered environments function to transform into a folder structure
• Removes recursive table row rendering - the first iteration of new UX does not show an open folder with children environments

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• Changelog entry added
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

#25499 (closed)

assigned to @filipa

added 1 commit

• 075de801 - Enable grouping and pagination in environmnets API

Compare with previous version

@filipa I pushed changes that expose new API in the environments controller. Please check it out! 💯 🌲

unmarked as a Work In Progress

changed title from WIP: Fe paginated environments api to Integrate with new paginated environments API and UX

marked as a Work In Progress

mentioned in issue #27660 (closed)

added ~19173 Deliverable frontend labels

added 1 commit

• ec0a889e - Adjustments to receive new data schema

Compare with previous version

What still needs to be done from the backend side (discussed on Slack):

• count available environments, expose in the API
• count stopped environments, expose in the API
• support scope parameter
• support :available scope
• support :stopped scope
• expose a link to the environments folder

@filipa I just pushed a commit that implements the support for environments scope parameter. Please take a look! The only thing that remains is exposing a link to the environment folder. I will try to implement this soon 😸

added 1 commit

• 8b854877 - Add support for environment scopes in controller

Compare with previous version

Thank you @grzesiek!

@fatihacet in order to make this easier to review I can do what we talked in the FE call, and divide this in several iterations:

• Adapt to new API response - in this MR
• Add Pagination - create a branch from this one and a new MR
• Add the subview to show the content of a folder - create a branch from the pagination one and a new MR

What do you think?

added 1 commit

• 0d60fd00 - Adjustments for the new response with counters

Compare with previous version

unmarked as a Work In Progress

changed title from WIP: Integrate with new paginated environments API and UX to Integrate with new environments API

@filipa That would be the best.

@filipa This LGTM, just added a minor comment. Didn't test it on my local yet.

@filipa other MRs are not open yet, right?

@fatihacet thank you for the quick response! 💚

Other MRs are not yet created, I will keep you posted! 😄

@grzesiek we need to merge master some failings builds were failing in master and are already fix, and with the removal of Turbolinks and addition of webpack we might have some minor conflicts :)

Can you please merge master in your branch so I can merge your branch into this one? 😊 Thank you!

Will add the changelog entry to the last MR :)

changed milestone to %8.17

added 372 commits

• 0d60fd00...50aec8dd - 371 commits from branch feature/gb/paginated-environments-api
• 3d6ef525 - Merge branch 'feature/gb/paginated-environments-api' into fe-paginated-environments-api

Compare with previous version

added 1 commit

• 50dfbe09 - Environments folder should be underlined when on hover and on focus like a regular link

Compare with previous version

added 352 commits

• 50dfbe09...14bf5c10 - 351 commits from branch feature/gb/paginated-environments-api
• 9810dc2e - Merge branch 'feature/gb/paginated-environments-api' into fe-paginated-environments-api

Compare with previous version

added 352 commits

• 50dfbe09...14bf5c10 - 351 commits from branch feature/gb/paginated-environments-api
• 9810dc2e - Merge branch 'feature/gb/paginated-environments-api' into fe-paginated-environments-api

Compare with previous version

resolved all discussions

@grzesiek please ping me when you have expose a link to the environments folder https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/8954#note_22761358 💪

mentioned in merge request !9023 (merged)

@filipa We do not have environments folder page, so not sure what page I should expose a link to 😺 I remember that we discussed that an effort needed to add a new page for folder is similar to implementing environment folder accordion in the main environments index page. Do you think it makes sense to implement this that way, since we decided to move this MR to %9.0?

changed milestone to %9.0

@grzesiek with either implementation, we'll always need an environments folder page.

Even if we implement the expanded folders already, the "Load More" button will redirect to the environments folder page. And in order to render that I need the endpoint.

What I suggest we do is:

1. Create the new route for the environments folder page (I can do this one)
2. When the user clicks on the folder, will open the new environments folder page
3. A request is made to the API to show the children of that folder in the new page. The response needs to be paginated and to keep the scope - this is where I need you eheh. Can I assume the endpoint is the same as the route?

Regarding point 3. and the scope: If I am seeing a folder in the Available tab, when I click on it, I should see only the available environments of that folder. Meaning the new route needs to have the scope as a parameter.

After we do all this, we can think of doing the expandable folder. What do you think @grzesiek ?

@filipa Sounds good! I can handle adding a new route and API. Should we do that in the separate MR, or just push commits to this one?

added 1 commit

• 8d2db2d2 - Add route for environment folder and expose an API

Compare with previous version

@filipa I pushed commit with new route and API, see 8d2db2d2. Let me know if this is fine, and I will push controller specs then.

changed target branch from feature/gb/paginated-environments-api to master

added 185 commits

• 8d2db2d2...b28d66c3 - 184 commits from branch master
• d1415ea7 - Merge branch 'master' into fe-paginated-environments-api

Compare with previous version

added 1 commit

• bac999ee - Fix conflict

Compare with previous version

added 1 commit

• 507dec13 - Removes use of global namespace, makes use of webpack;

Compare with previous version

added 11 commits

• 075de801 - Enable grouping and pagination in environmnets API
• ec0a889e - Adjustments to receive new data schema
• 8b854877 - Add support for environment scopes in controller
• 0d60fd00 - Adjustments for the new response with counters
• 3d6ef525 - Merge branch 'feature/gb/paginated-environments-api' into fe-paginated-environments-api
• 20acc60b - a
• 50dfbe09 - Environments folder should be underlined when on hover and on focus like a regular link
• fbe48e13 - Merge branch 'fe-paginated-environments-api' into fe-paginated-environments-pagination
• 9810dc2e - Merge branch 'feature/gb/paginated-environments-api' into fe-paginated-environments-api
• 21e9660d - Merge branch 'fe-paginated-environments-api' into fe-paginated-environments-pagination
• 2f772e9b - Merge branch 'fe-paginated-environments-pagination' into fe-paginated-environments-api

Compare with previous version

added 45 commits

• 2f772e9b...0fddece7 - 44 commits from branch master
• 9f6bb14a - Merge branch 'master' into fe-paginated-environments-api

Compare with previous version

added 6 commits

• efa05023 - Enable grouping and pagination in environmnets API
• b3309bb2 - Adjustments to receive new data schema
• 2aeb45bd - Add support for environment scopes in controller
• 71899e10 - Adjustments for the new response with counters
• 3c39cea6 - Environments folder should be underlined when on hover and on focus like a regular link
• 72f76c4d - Remove pagination from this MR

Compare with previous version

added 3 commits

• acb68ae6 - Resolve 500 error
• 6077dea7 - Remove store from global namespace, use CSJ instead
• 26a951b7 - Use CJS for tests.

Compare with previous version

added 2 commits

• 8f3678f1 - Use CJS in environments service
• d6ae01da - Use CJS in all environments components

Compare with previous version

@fatihacet You've reviewed the first iteration.

I've removed the use of the global scope in environments code and use CJS, can you please review again?

//cc @iamphill @mikegreiling can you take a look as well? Want to make sure it's in the same direction with the webpack plan :)

Please don't merge this - it needs the second and third parts. Thank you!!

(there's a lot of whitespace changes)

assigned to @fatihacet

mentioned in merge request !9090 (merged)

I dont think we should worry too much about webpack & Vue for now until we have .vue files, I think that is the eventual goal with Vue.

My comment was regarding the global namespace and using CJS :) Is that ok?

@filipa Seems fine to me 👍 I didn't look too in-depth though.

added 1 commit

• 19bac884 - Add route for environment folder and expose an API

Compare with previous version

This LGTM. @filipa added a comment for you and also build failed 💔

assigned to @filipa

added 1 commit

• 482e7ff0 - Fix broken test and linter error

Compare with previous version

@fatihacet test and linter are fixed, build should succeed :)

Will not assign to you because this is just the first part, it should not be merged without the other 2 missing MR :)

@filipa How about changing target branch to some other branch instead of master and merge this when pipeline succeed.

hum.. can be, the second one is already merge to review: !9090 (merged)

My plan was:

1. Create branch to integrate with new API
2. Create MR
3. Create a new branch from 1. to add pagination
4. Create a MR
5. Create a new branch from 3. to create the subfolder view
6. Create a MR
7. Merge 5. into 3.
8. Merge 3. into 1.
9. Merge 1. into Master

Maybe it's better to do:

1. Create branch to integrate with new API
2. Create MR
3. Create a new branch from 1. to add pagination
4. Create a MR
5. Merge 5. into 3.
6. Create a new branch from 1. to create the subfolder view
7. Create a MR
8. Merge 6. into 1.
9. Merge 1. into Master

Or we can create a new branch and merge all of them into that branch and then merge that branch into master.

@fatihacet What do you think it's better?

added 1 commit

• d0d94e4f - Fix pagination headers in grouped environments API

Compare with previous version

@filipa I pushed a commit that fixes pagination headers, see https://gitlab.com/gitlab-org/gitlab-ce/commit/d0d94e4f104c276ee4095a76d1204daae384c708 🎉

Thank you @grzesiek 🎉 !!

Promise I won't delete this one ahah 😂

added 155 commits

• d0d94e4f...edb8ed36 - 154 commits from branch master
• bd01d79f - Merge branch 'master' into fe-paginated-environments-api

Compare with previous version

added 1 commit

• f7d8c29e - Fix broken path

Compare with previous version

added 1 commit

• b8dbebce - Fix typo

Compare with previous version

mentioned in merge request !9169 (merged)

@grzesiek

I need access to folder_namespace_project_environments in the API response in order to open new page for the folders' environments and I also need the endpoint to be provided. Is this possible?

I will mock this in js in order to finish frontend part in !9169 (merged)

EDIT:

This needs to be handled by JS in order for the user to be able to open directly a link environments/folder/{id}. Will use window.location.

marked the task 3. Add the subview to show the content of a folder !9169 (merged) as completed

@filipa Are you sure that we don't need folder path exposed in the API?

@grzesiek yes, because if you open directly this URL in the browser: environments/folder/{id} we won't have the endpoint from the other API response.

With the path exposed in the API we would only be able to open that URL through the main environments page, I handled it this way:

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9169/diffs#0879568345b0bfc2b18921e9e56669065a215f80_410_416

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9169/diffs#112c05cba561c8120e03f1d373bd53e17e134b42_0_20

which is exactly the same path given by folder_namespace_project_environments

💪

added 1 commit

• a254dcf0 - Add count keys to response JSON

Compare with previous version

@zj What do you think about adding corresponding controller specs?

resolved all discussions

marked the task Branch has no merge conflicts with master (if it does - rebase it please) as completed

marked the task Conform by the style guides as completed

marked the task Conform by the merge request performance guides as completed

marked the task Added for this feature/bug as completed

marked the task Changelog entry added as completed

assigned to @fatihacet

changed target branch from master to paginate-environments-bundle

added 23 commits

• 991a7ae8 - Adds pagination component
• fb359808 - Verify latest key is present when needed
• 595afed2 - Integrates pagination component with API
• 27d7ec70 - Remove spec checking for scope 'all' since it's no longer part of component
• c2fe699a - Add pagination tests for environments table
• 6483bc8c - Merge branch 'fe-paginated-environments-api' into fe-paginated-environments-api-add-pagination
• 7af6982e - Extracts table into a reusable component
• 26d18387 - First iteration
• 08234849 - Adds url for folder;
• 17897c37 - Fix underline style
• 73accafe - Use common util to get parameter name
• 1285d629 - Move change page param to utility function
• 9414fc5c - Moves check for latest key to store instead of poluting the view making it reusa…
• 9ac8bf2c - Adds Changelog entry
• 605195c2 - Fix broken tests
• ac710136 - Rename storePagination to setPagination
• 19791b65 - Changes after review
• 8ca90a68 - Merge branch 'fe-paginated-environments-api-add-pagination' into fe-paginated-en…
• ba53ee78 - Changes after review
• 51f03780 - Create util to handle pagination transformation
• ab3c546f - Remove arrow icon from folders
• 25c92938 - Merge branch 'fe-paginated-environments-api-add-subview' into 'fe-paginated-envi…
• 13615ef8 - Merge branch 'fe-paginated-environments-api-add-pagination' into 'fe-paginated-environments-api'

Compare with previous version

mentioned in commit ea7c7769

merged