Remove duplicate "Operations Dashboard" header

This commit cleans up the Operations Dashboard page by removing the
duplicate header and converting the breadcrumb into a proper page title.
In addition, this commit moves the search bar into the same line as the
"Operations Dashboard" header.

Relevant issue:
https://gitlab.com/gitlab-org/gitlab-ee/issues/9129

ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue

@@ -54,13 +54,13 @@ export default {
 
 <template>
   <div class="operations-dashboard">
-    <nav class="breadcrumbs container-fluid container-limited">
-      <div class="breadcrumbs-container">
-        <h2 class="js-dashboard-title breadcrumbs-sub-title">{{ __('Operations Dashboard') }}</h2>
+    <div
+      class="page-title-holder flex-fill d-flex flex-column flex-md-row align-items-md-end align-items-stretch"
+    >
+      <div class="flex-fill append-right-20">
+        <h1 class="js-dashboard-title page-title text-nowrap">{{ __('Operations Dashboard') }}</h1>
       </div>
-    </nav>
-    <div class="container-fluid container-limited prepend-top-default">
-      <div class="d-flex align-items-center">
+      <div class="d-flex flex-fill align-items-end append-bottom-default">
         <project-search class="flex-grow-1" />
         <button
           :class="{ disabled: addIsDisabled }"
@@ -71,6 +71,8 @@ export default {
           {{ __('Add projects') }}
         </button>
       </div>
+    </div>
+    <div class="prepend-top-default">
       <div v-if="projects.length" class="row m-0 prepend-top-default">
         <div
           v-for="project in projects"

ee/app/views/operations/index.html.haml

-- page_title _('Operations')
+- page_title _('Operations Dashboard')
+- @hide_breadcrumbs = true
 
 #js-operations{ data: operations_data }

ee/changelogs/unreleased/9129-flatten-or-remove-header-in-operations-dashboard.yml

+---
+title: Remove duplicate "Operations Dashboard" header/breadcrumb
+merge_request: 9152
+author: Nathan Friend
+type: fixed