Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue

@@ -2,6 +2,7 @@
 import {
   GlFormGroup,
   GlFormInput,
+  GlFormInputGroup,
   GlModal,
   GlTooltipDirective,
   GlLoadingIcon,
@@ -17,6 +18,7 @@ export default {
   components: {
     GlFormGroup,
     GlFormInput,
+    GlFormInputGroup,
     GlModal,
     ModalCopyButton,
     GlIcon,
@@ -167,63 +169,47 @@ export default {
         </template>
       </gl-sprintf>
     </callout>
-    <div class="form-group">
-      <label for="api_url" class="label-bold">{{ $options.translations.apiUrlLabelText }}</label>
-      <div class="input-group">
-        <input
-          id="api_url"
-          :value="unleashApiUrl"
-          readonly
-          class="form-control"
-          type="text"
-          name="api_url"
-        />
-        <span class="input-group-append">
+    <gl-form-group :label="$options.translations.apiUrlLabelText" label-for="api-url">
+      <gl-form-input-group id="api-url" :value="unleashApiUrl" readonly type="text" name="api-url">
+        <template #append>
           <modal-copy-button
             :text="unleashApiUrl"
             :title="$options.translations.apiUrlCopyText"
             :modal-id="modalId"
-            class="input-group-text"
           />
-        </span>
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="instance_id" class="label-bold">{{
-        $options.translations.instanceIdLabelText
-      }}</label>
-      <div class="input-group">
-        <input
+        </template>
+      </gl-form-input-group>
+    </gl-form-group>
+    <gl-form-group :label="$options.translations.instanceIdLabelText" label-for="instance_id">
+      <gl-form-input-group>
+        <gl-form-input
           id="instance_id"
           :value="instanceId"
-          class="form-control"
           type="text"
           name="instance_id"
           readonly
           :disabled="isRotating"
         />
-
         <gl-loading-icon
           v-if="isRotating"
-          class="position-absolute align-self-center instance-id-loading-icon"
+          class="gl-absolute gl-align-self-center gl-right-5 gl-mr-7"
         />
 
-        <div class="input-group-append">
+        <template #append>
           <modal-copy-button
             :text="instanceId"
             :title="$options.translations.instanceIdCopyText"
             :modal-id="modalId"
             :disabled="isRotating"
-            class="input-group-text"
           />
-        </div>
-      </div>
-    </div>
+        </template>
+      </gl-form-input-group>
+    </gl-form-group>
     <div
       v-if="hasRotateError"
-      class="text-danger d-flex align-items-center font-weight-normal mb-2"
+      class="gl-text-red-500 gl-display-flex gl-align-items-center gl-font-weight-normal gl-mb-3"
     >
-      <gl-icon name="warning" class="mr-1" />
+      <gl-icon name="warning" class="gl-mr-2" />
       <span>{{ $options.translations.instanceIdRegenerateError }}</span>
     </div>
     <callout

app/assets/javascripts/pipeline_editor/components/text_editor.vue

+<script>
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
+
+export default {
+  components: {
+    EditorLite,
+  },
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-border-solid gl-border-gray-100 gl-border-1">
+    <editor-lite v-model="value" file-name="*.yml" :editor-options="{ readOnly: true }" />
+  </div>
+</template>

app/assets/javascripts/pipeline_editor/graphql/queries/blob_content.graphql

+query getBlobContent($projectPath: ID!, $path: String, $ref: String!) {
+  blobContent(projectPath: $projectPath, path: $path, ref: $ref) @client {
+    rawData
+  }
+}

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

+import Api from '~/api';
+
+export const resolvers = {
+  Query: {
+    blobContent(_, { projectPath, path, ref }) {
+      return {
+        __typename: 'BlobContent',
+        rawData: Api.getRawFile(projectPath, path, { ref }).then(({ data }) => {
+          return data;
+        }),
+      };
+    },
+  },
+};
+
+export default resolvers;

app/assets/javascripts/pipeline_editor/graphql/typedefs.graphql

+type BlobContent {
+  rawData: String!
+}
+
+extend type Query {
+  blobContent: BlobContent
+}

app/assets/javascripts/pipeline_editor/index.js

 import Vue from 'vue';
+
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import typeDefs from './graphql/typedefs.graphql';
+import { resolvers } from './graphql/resolvers';
+
 import PipelineEditorApp from './pipeline_editor_app.vue';
 
 export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
   const el = document.querySelector(selector);
 
+  const { projectPath, defaultBranch, ciConfigPath } = el?.dataset;
+
+  Vue.use(VueApollo);
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(resolvers, { typeDefs }),
+  });
+
   return new Vue({
     el,
+    apolloProvider,
     render(h) {
-      return h(PipelineEditorApp);
+      return h(PipelineEditorApp, {
+        props: {
+          projectPath,
+          defaultBranch,
+          ciConfigPath,
+        },
+      });
     },
   });
 };

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

 <script>
-import { GlEmptyState } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
+import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import { __, s__, sprintf } from '~/locale';
+
+import TextEditor from './components/text_editor.vue';
+
+import getBlobContent from './graphql/queries/blob_content.graphql';
 
 export default {
   components: {
-    GlEmptyState,
+    GlLoadingIcon,
+    GlAlert,
+    TextEditor,
+  },
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    defaultBranch: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    ciConfigPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      error: null,
+      content: '',
+    };
+  },
+  apollo: {
+    content: {
+      query: getBlobContent,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+          path: this.ciConfigPath,
+          ref: this.defaultBranch,
+        };
+      },
+      update(data) {
+        return data?.blobContent?.rawData;
+      },
+      error(error) {
+        this.error = error;
+      },
+    },
+  },
+  computed: {
+    loading() {
+      return this.$apollo.queries.content.loading;
+    },
+    errorMessage() {
+      const { message: generalReason, networkError } = this.error ?? {};
+
+      const { data } = networkError?.response ?? {};
+      // 404 for missing file uses `message`
+      // 400 for a missing ref uses `error`
+      const networkReason = data?.message ?? data?.error;
+
+      const reason = networkReason ?? generalReason ?? this.$options.i18n.unknownError;
+      return sprintf(this.$options.i18n.errorMessageWithReason, { reason });
+    },
   },
   i18n: {
-    title: s__('Pipelines|Pipeline Editor'),
-    description: s__(
-      'Pipelines|We are beginning our work around building the foundation for our dedicated pipeline editor.',
-    ),
-    primaryButtonText: __('Learn more'),
+    unknownError: __('Unknown Error'),
+    errorMessageWithReason: s__('Pipelines|CI file could not be loaded: %{reason}'),
   },
 };
 </script>
 
 <template>
-  <gl-empty-state
-    :title="$options.i18n.title"
-    :description="$options.i18n.description"
-    :primary-button-text="$options.i18n.primaryButtonText"
-    primary-button-link="https://about.gitlab.com/direction/verify/pipeline_authoring/"
-  />
+  <div class="gl-mt-4">
+    <gl-alert v-if="error" :dismissible="false" variant="danger">{{ errorMessage }}</gl-alert>
+    <div class="gl-mt-4">
+      <gl-loading-icon v-if="loading" size="lg" />
+      <text-editor v-else v-model="content" />
+    </div>
+  </div>
 </template>

app/assets/stylesheets/_page_specific_files.scss

 @import './pages/admin';
 @import './pages/branches';
-@import './pages/builds';
 @import './pages/ci_projects';
 @import './pages/clusters';
 @import './pages/commits';

app/assets/stylesheets/framework/mixins.scss

@@ -3,6 +3,38 @@
  * Mixins with fixed values
  */
 
+@keyframes blinking-dot {
+  0% {
+    opacity: 1;
+  }
+
+  25% {
+    opacity: 0.4;
+  }
+
+  75% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blinking-scroll-button {
+  0% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.2;
+  }
+}
+
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
   overflow: hidden;

app/assets/stylesheets/pages/builds.scss → app/assets/stylesheets/page_bundles/build.scss

-@keyframes fade-out-status {
-  0%,
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes blinking-dot {
-  0% {
-    opacity: 1;
-  }
-
-  25% {
-    opacity: 0.4;
-  }
-
-  75% {
-    opacity: 0.4;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes blinking-scroll-button {
-  0% {
-    opacity: 0.2;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.2;
-  }
-}
+@import 'mixins_and_variables_and_functions';
 
 .build-page {
   .build-trace {
@@ -325,29 +284,6 @@
   }
 }
 
-.build-light-text {
-  color: $gl-text-color-secondary;
-  word-wrap: break-word;
-}
-
-.build-gutter-toggle {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  margin-top: -17px;
-}
-
-@include media-breakpoint-down(sm) {
-  .top-bar {
-    .truncated-info {
-      white-space: nowrap;
-      overflow: hidden;
-      max-width: 220px;
-      text-overflow: ellipsis;
-    }
-  }
-}
-
 @include media-breakpoint-down(md) {
   .content-list {
     &.builds-content-list {
@@ -356,11 +292,3 @@
     }
   }
 }
-
-[data-page='admin:jobs:index'] {
-  .admin-builds-table {
-    td:last-child {
-      min-width: 120px;
-    }
-  }
-}

app/assets/stylesheets/pages/admin.scss

@@ -8,3 +8,11 @@
 .usage-data {
   max-height: 400px;
 }
+
+[data-page='admin:jobs:index'] {
+  .admin-builds-table {
+    td:last-child {
+      min-width: 120px;
+    }
+  }
+}

app/assets/stylesheets/pages/pipelines.scss

@@ -86,3 +86,14 @@
     color: $gl-text-color;
   }
 }
+
+@include media-breakpoint-down(sm) {
+  .top-bar {
+    .truncated-info {
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 220px;
+      text-overflow: ellipsis;
+    }
+  }
+}

app/views/ide/_show.html.haml

 - @body_class = 'ide-layout'
 - page_title _('IDE')
 
+- add_page_specific_style 'page_bundles/build'
 - add_page_specific_style 'page_bundles/ide'
 
 #ide.ide-loading{ data: ide_data }

app/views/projects/ci/pipeline_editor/show.html.haml

 - page_title s_('Pipelines|Pipeline Editor')
 
-#js-pipeline-editor
+#js-pipeline-editor{ data: { "ci-config-path": @project.ci_config_path_or_default,
+  "project-path" => @project.full_path,
+  "default-branch" => @project.default_branch,
+} }

app/views/projects/jobs/show.html.haml

 - add_to_breadcrumbs _("Jobs"), project_jobs_path(@project)
 - breadcrumb_title "##{@build.id}"
 - page_title "#{@build.name} (##{@build.id})", _("Jobs")
+- add_page_specific_style 'page_bundles/build'
 - add_page_specific_style 'page_bundles/xterm'
 - add_page_specific_style 'page_bundles/ci_status'
 

changelogs/unreleased/migrate-feature-flags-config-to-gitlab-ui.yml

+---
+title: Migrate Configure Feature Flags Modal to GitLab UI
+merge_request: 46055
+author:
+type: added

config/application.rb

@@ -176,6 +176,7 @@ class Application < Rails::Application
     config.assets.precompile << "page_bundles/_mixins_and_variables_and_functions.css"
     config.assets.precompile << "page_bundles/alert_management_details.css"
     config.assets.precompile << "page_bundles/boards.css"
+    config.assets.precompile << "page_bundles/build.css"
     config.assets.precompile << "page_bundles/ci_status.css"
     config.assets.precompile << "page_bundles/cycle_analytics.css"
     config.assets.precompile << "page_bundles/dev_ops_report.css"

db/migrate/20201022094845_add_historical_data_recorded_at.rb

+# frozen_string_literal: true
+
+class AddHistoricalDataRecordedAt < ActiveRecord::Migration[6.0]
+  DOWNTIME = false
+
+  def up
+    add_column(:historical_data, :recorded_at, :timestamptz)
+  end
+
+  def down
+    remove_column(:historical_data, :recorded_at)
+  end
+end

db/migrate/20201022094846_update_historical_data_recorded_at.rb

+# frozen_string_literal: true
+
+class UpdateHistoricalDataRecordedAt < ActiveRecord::Migration[6.0]
+  include Gitlab::Database::MigrationHelpers
+
+  DOWNTIME = false
+
+  disable_ddl_transaction!
+
+  def up
+    update_value = Arel.sql("COALESCE(created_at, date + '12:00'::time AT TIME ZONE '#{Time.zone&.tzinfo&.name || "Etc/UTC"}')")
+
+    update_column_in_batches(:historical_data, :recorded_at, update_value) do |table, query|
+      query.where(table[:recorded_at].eq(nil))
+    end
+
+    add_not_null_constraint :historical_data, :recorded_at
+
+    change_column_null :historical_data, :date, true
+  end
+
+  def down
+    change_column_null :historical_data, :date, false
+
+    remove_not_null_constraint :historical_data, :recorded_at
+
+    update_column_in_batches(:historical_data, :recorded_at, nil) do |table, query|
+      query.where(table[:recorded_at].not_eq(nil))
+    end
+  end
+end

db/schema_migrations/20201022094845

+16b402740c6b1dd21908265085e516f63f8858424724ba97f46658e7bd5f7bf2
\ No newline at end of file

db/schema_migrations/20201022094846

+588c5f99d34652bbd5bde86351cbdb8c0455af0c31a440bfb63df02f12fd588f
\ No newline at end of file

db/structure.sql

@@ -12713,10 +12713,12 @@ CREATE TABLE group_wiki_repositories (
 
 CREATE TABLE historical_data (
     id integer NOT NULL,
-    date date NOT NULL,
     active_user_count integer,
     created_at timestamp without time zone,
-    updated_at timestamp without time zone
+    updated_at timestamp without time zone,
+    date date,
+    recorded_at timestamp with time zone,
+    CONSTRAINT check_640e8cf66c CHECK ((recorded_at IS NOT NULL))
 );
 
 CREATE SEQUENCE historical_data_id_seq