Merge branch '349959-fix-ci-minutes-quota-chart-ordering' into 'master'

Expose new monthIso8601 GraphQL option to fix CI minutes usage sorting

See merge request gitlab-org/gitlab!78006

doc/api/graphql/reference/index.md

@@ -8955,6 +8955,7 @@ Represents the total number of issues and their weights for a particular day.
 | ---- | ---- | ----------- |
 | <a id="ciminutesnamespacemonthlyusageminutes"></a>`minutes` | [`Int`](#int) | Total number of minutes used by all projects in the namespace. |
 | <a id="ciminutesnamespacemonthlyusagemonth"></a>`month` | [`String`](#string) | Month related to the usage data. |
+| <a id="ciminutesnamespacemonthlyusagemonthiso8601"></a>`monthIso8601` | [`ISO8601Date`](#iso8601date) | Month related to the usage data in ISO 8601 date format. |
 | <a id="ciminutesnamespacemonthlyusageprojects"></a>`projects` | [`CiMinutesProjectMonthlyUsageConnection`](#ciminutesprojectmonthlyusageconnection) | CI minutes usage data for projects in the namespace. (see [Connections](#connections)) |
 | <a id="ciminutesnamespacemonthlyusagesharedrunnersduration"></a>`sharedRunnersDuration` | [`Int`](#int) | Total numbers of minutes used by the shared runners in the namespace. |
 

ee/app/assets/javascripts/ci_minutes_usage/components/app.vue

 <script>
-import { MONTHS } from '../constants';
+import { formatDate } from '~/lib/utils/datetime_utility';
 import getCiMinutesUsage from '../graphql/queries/ci_minutes.graphql';
 import MinutesUsageMonthChart from './minutes_usage_month_chart.vue';
 import MinutesUsageProjectChart from './minutes_usage_project_chart.vue';
@@ -24,21 +24,12 @@ export default {
   },
   computed: {
     minutesUsageDataByMonth() {
-      function monthIndex([name]) {
-        return Object.keys(MONTHS).indexOf(name.toLowerCase());
-      }
-
       return this.ciMinutesUsage
-        .map((cur) => [cur.month, cur.minutes])
+        .slice()
         .sort((a, b) => {
-          if (monthIndex(a) > monthIndex(b)) {
-            return 1;
-          }
-          if (monthIndex(a) < monthIndex(b)) {
-            return -1;
-          }
-          return 0;
-        });
+          return new Date(a.monthIso8601) - new Date(b.monthIso8601);
+        })
+        .map((cur) => [formatDate(cur.monthIso8601, 'mmm yyyy'), cur.minutes]);
     },
   },
 };

ee/app/assets/javascripts/ci_minutes_usage/graphql/queries/ci_minutes.graphql

@@ -2,6 +2,7 @@ query getCiMinutesUsage {
   ciMinutesUsage {
     nodes {
       month
+      monthIso8601
       minutes
       projects {
         nodes {

ee/app/graphql/types/ci/minutes/namespace_monthly_usage_type.rb

@@ -12,6 +12,9 @@ module Types
         field :month, ::GraphQL::Types::String, null: true,
               description: 'Month related to the usage data.'
 
+        field :month_iso8601, ::GraphQL::Types::ISO8601Date, method: :date, null: true,
+              description: 'Month related to the usage data in ISO 8601 date format.'
+
         field :minutes, ::GraphQL::Types::Int, null: true,
               method: :amount_used,
               description: 'Total number of minutes used by all projects in the namespace.'

ee/spec/frontend/ci_minutes_usage/mock_data.js

@@ -4,6 +4,7 @@ export const ciMinutesUsageMockData = {
       nodes: [
         {
           month: 'June',
+          monthIso8601: '2021-06-01',
           minutes: 5,
           projects: {
             nodes: [

ee/spec/graphql/types/ci/minutes/namespace_monthly_usage_type_spec.rb

@@ -4,6 +4,6 @@ require 'spec_helper'
 
 RSpec.describe GitlabSchema.types['CiMinutesNamespaceMonthlyUsage'] do
   it do
-    expect(described_class).to have_graphql_fields(:minutes, :month, :projects, :shared_runners_duration)
+    expect(described_class).to have_graphql_fields(:minutes, :month, :month_iso8601, :projects, :shared_runners_duration)
   end
 end