Remove Geo Project/Upload css

This removes the container classes
Instead adding utility classes

https://gitlab.com/gitlab-org/gitlab/merge_requests/21284

ee/app/assets/stylesheets/pages/geo_nodes.scss

@@ -10,74 +10,16 @@
   }
 }
 
-.geo-admin-projects,
-.geo-admin-uploads,
-.admin-projects {
-  .card-header {
-    .header-text-primary {
-      line-height: 28px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-  }
-
+.project-card-errors {
   .btn-card-header {
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-
     &.collapsed {
       .card-collapse-icon {
         display: none;
       }
-    }
 
-    &:not(.collapsed) {
       .card-expand-icon {
-        display: none;
-      }
-    }
-  }
-
-  .card-body {
-    .project-container,
-    .upload-container {
-      margin-left: 0;
-      padding-left: 0;
-    }
-
-    .geo-status-content {
-      &.status-type-success {
-        color: $green-600;
+        display: block;
       }
-
-      &.status-type-failure {
-        color: $red-500;
-      }
-    }
-
-    @include media-breakpoint-down(xs) {
-      .project-status-container + .project-status-container,
-      .upload-status-container + .upload-status-container {
-        margin-top: 15px;
-      }
-    }
-  }
-
-  .errors-list {
-    li + li {
-      margin-top: 5px;
-    }
-
-    .error-icon,
-    .error-text {
-      color: $red-500;
-    }
-
-    .error-text {
-      line-height: 18px;
     }
   }
 }

ee/app/helpers/ee/geo_helper.rb

@@ -95,12 +95,12 @@ module EE
     def geo_registry_status(registry)
       status_type = case registry.synchronization_state
                     when :failed then
-                      'status-type-failure'
+                      'text-danger-500'
                     when :synced then
-                      'status-type-success'
+                      'text-success-600'
                     end
 
-      content_tag(:div, class: "geo-status-content #{status_type}") do
+      content_tag(:div, class: "#{status_type}") do
         icon = geo_registry_status_icon(registry)
         text = geo_registry_status_text(registry)
 

ee/app/views/admin/geo/projects/_all.html.haml

 - @registries.each do |project_registry|
   .card.project-card.prepend-top-15
     .card-header{ id: "project-#{project_registry.project_id}-header" }
-      .d-flex
+      .d-flex.align-items-center
         - if project_registry.project.nil?
           = render partial: 'removed', locals: { project_registry: project_registry }
         - else
-          %strong.header-text-primary.flex-fill
+          %strong.text-truncate.flex-fill
             = link_to project_registry.project.full_name, admin_namespace_project_path(project_registry.project.namespace, project_registry.project)
           - unless project_registry.pending_verification?
             = link_to(reverify_admin_geo_project_path(project_registry), method: :post, class: 'btn btn-default btn-sm mr-2') do

ee/app/views/admin/geo/projects/_failed.html.haml

 - @registries.each do |project_registry|
   .card.project-card.prepend-top-15
     .card-header{ id: "project-#{project_registry.project_id}-header" }
-      .d-flex
+      .d-flex.align-items-center
         - if project_registry.project.nil?
           = render partial: 'removed', locals: { project_registry: project_registry }
         - else
-          %strong.header-text-primary.flex-fill
+          %strong.text-truncate.flex-fill
             = link_to project_registry.project.full_name, admin_namespace_project_path(project_registry.project.namespace, project_registry.project)
           - if project_registry.candidate_for_redownload?
             = link_to(force_redownload_admin_geo_project_path(project_registry), method: :post, class: 'btn btn-default btn-sm mr-2') do

ee/app/views/admin/geo/projects/_never.html.haml

 - @registries.each do |project_registry|
   .card.project-card.prepend-top-15
     .card-header{ id: "project-#{project_registry.project_id}-header" }
-      .d-flex
+      .d-flex.align-items-center
         - if project_registry.project.nil?
           = render partial: 'removed', locals: { project_registry: project_registry }
         - else
-          %strong.header-text-primary.flex-fill
+          %strong.text-truncate.flex-fill
             = link_to project_registry.project.full_name, admin_namespace_project_path(project_registry.project.namespace, project_registry.project)
 
     = render partial: 'registry_never', locals: { project_registry: project_registry }

ee/app/views/admin/geo/projects/_pending.html.haml

 - @registries.each do |project_registry|
   .card.project-card.prepend-top-15
     .card-header{ id: "project-#{project_registry.project_id}-header" }
-      .d-flex
+      .d-flex.align-items-center
         - if project_registry.project.nil?
           = render partial: 'removed', locals: { project_registry: project_registry }
         - else
-          %strong.header-text-primary.flex-fill
+          %strong.text-truncate.flex-fill
             = link_to project_registry.project.full_name, admin_namespace_project_path(project_registry.project.namespace, project_registry.project)
           - unless project_registry.pending_verification?
             = link_to(reverify_admin_geo_project_path(project_registry), method: :post, class: 'btn btn-default btn-sm mr-2') do

ee/app/views/admin/geo/projects/_registry_failed.html.haml

 .card-body
-  .container.project-container
+  .container.m-0.p-0
     .row
-      .col-sm.project-status-container
+      .col-sm
         .project-status-title.text-muted
           = s_('Geo|Status')
         = geo_registry_status(project_registry)
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Next sync scheduled at')
         .project-status-content
@@ -13,7 +13,7 @@
             = distance_of_time_in_words(Time.now, project_registry.repository_retry_at)
           - else
             = s_('Geo|Waiting for scheduler')
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Last sync attempt')
         .project-status-content
@@ -28,28 +28,28 @@
         data: { toggle: 'collapse', target: "#project-errors-#{project_registry.project_id}" },
         'aria-expanded' => 'false',
         'aria-controls' => "project-errors-#{project_registry.project_id}" }
-      = sprite_icon('chevron-down', size: 18, css_class: 'append-right-5 card-expand-icon')
-      = sprite_icon('chevron-up', size: 18, css_class: 'append-right-5 card-collapse-icon')
+      = sprite_icon('chevron-down', size: 18, css_class: 'mr-2 card-expand-icon hide')
+      = sprite_icon('chevron-up', size: 18, css_class: 'mr-2 card-collapse-icon')
       .header-text-secondary
         More
   .collapse{ id: "project-errors-#{project_registry.project_id}",
       'aria-labelledby' => "project-#{project_registry.project_id}-header" }
     .card-body
-      .container.project-container
+      .container.m-0.p-0
         .row
-          .col-sm-8.project-status-container
-            %ul.unstyled-list.errors-list
+          .col-sm-8
+            %ul.unstyled-list
               - if project_registry.last_repository_sync_failure
-                %li.p-0.d-flex
-                  = sprite_icon('warning', size: 18, css_class: 'error-icon')
-                  %span.error-text.prepend-left-5
+                %li.d-flex.text-danger-500
+                  = sprite_icon('warning', size: 18)
+                  %span.prepend-left-5
                     = s_('Geo|Synchronization failed - %{error}') % { error: project_registry.last_repository_sync_failure }
               - if project_registry.last_repository_verification_failure
-                %li.p-0.d-flex
-                  = sprite_icon('warning', size: 18, css_class: 'error-icon')
-                  %span.error-text.prepend-left-5
+                %li.d-flex.text-danger-500
+                  = sprite_icon('warning', size: 18)
+                  %span.prepend-left-5
                     = s_('Geo|Verification failed - %{error}') % { error: project_registry.last_repository_verification_failure }
-          .col-sm-4.project-status-container
+          .col-sm-4.mt-3.mt-sm-0
             .project-status-title.text-muted
               = s_('Geo|Retry count')
             .project-status-content

ee/app/views/admin/geo/projects/_registry_never.html.haml

 .card-body
-  .container.project-container
+  .container.m-0.p-0
     .row
-      .col-sm.project-status-container
+      .col-sm
         .project-status-title.text-muted
           = s_('Geo|Status')
         = geo_registry_status(project_registry)
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Next sync scheduled at')
         .project-status-content
@@ -13,7 +13,7 @@
             = distance_of_time_in_words(Time.now, project_registry.repository_retry_at)
           - else
             = s_('Geo|Waiting for scheduler')
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Last sync attempt')
         .project-status-content
@@ -29,28 +29,28 @@
           data: { toggle: 'collapse', target: "#project-errors-#{project_registry.project_id}" },
           'aria-expanded' => 'false',
           'aria-controls' => "project-errors-#{project_registry.project_id}" }
-        = sprite_icon('chevron-down', size: 18, css_class: 'append-right-5 card-expand-icon')
-        = sprite_icon('chevron-up', size: 18, css_class: 'append-right-5 card-collapse-icon')
+        = sprite_icon('chevron-down', size: 18, css_class: 'mr-2 card-expand-icon hide')
+        = sprite_icon('chevron-up', size: 18, css_class: 'mr-2 card-collapse-icon')
         .header-text-secondary
           More
     .collapse{ id: "project-errors-#{project_registry.project_id}",
         'aria-labelledby' => "project-#{project_registry.project_id}-header" }
       .card-body
-        .container.project-container
+        .container.m-0.p-0
           .row
-            .col-sm-8.project-status-container
-              %ul.unstyled-list.errors-list
+            .col-sm-8
+              %ul.unstyled-list
                 - if project_registry.last_repository_sync_failure
-                  %li.p-0.d-flex
-                    = sprite_icon('warning', size: 18, css_class: 'error-icon')
-                    %span.error-text.prepend-left-5
+                  %li.d-flex.text-danger-500
+                    = sprite_icon('warning', size: 18)
+                    %span.prepend-left-5
                       = s_('Geo|Synchronization failed - %{error}') % { error: project_registry.last_repository_sync_failure }
                 - if project_registry.last_repository_verification_failure
-                  %li.p-0.d-flex
-                    = sprite_icon('warning', size: 18, css_class: 'error-icon')
-                    %span.error-text.prepend-left-5
+                  %li.d-flex.text-danger-500
+                    = sprite_icon('warning', size: 18)
+                    %span.prepend-left-5
                       = s_('Geo|Verification failed - %{error}') % { error: project_registry.last_repository_verification_failure }
-            .col-sm-4.project-status-container
+            .col-sm-4.mt-3.mt-sm-0
               .project-status-title.text-muted
                 = s_('Geo|Retry count')
               .project-status-content

ee/app/views/admin/geo/projects/_registry_pending.html.haml

 .card-body
-  .container.project-container
+  .container.m-0.p-0
     .row
-      .col-sm.project-status-container
+      .col-sm
         .project-status-title.text-muted
           = s_('Geo|Status')
         = geo_registry_status(project_registry)
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Next sync scheduled at')
         .project-status-content
@@ -13,7 +13,7 @@
             = distance_of_time_in_words(Time.now, project_registry.repository_retry_at)
           - else
             = s_('Geo|Waiting for scheduler')
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Last sync attempt')
         .project-status-content

ee/app/views/admin/geo/projects/_registry_synced.html.haml

 .card-body
-  .container.project-container
+  .container.m-0.p-0
     .row
-      .col-sm.project-status-container
+      .col-sm
         .project-status-title.text-muted
           = s_('Geo|Status')
         = geo_registry_status(project_registry)
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Last successful sync')
         .project-status-content
@@ -13,7 +13,7 @@
             = time_ago_with_tooltip(project_registry.last_repository_successful_sync_at, placement: 'bottom')
           - else
             = s_('Geo|Never')
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Last time verified')
         .project-status-content
@@ -21,7 +21,7 @@
             = time_ago_with_tooltip(project_registry.last_repository_verification_ran_at, placement: 'bottom')
           - else
             = s_('Geo|Never')
-      .col-sm.project-status-container
+      .col-sm.mt-3.mt-sm-0
         .project-status-title.text-muted
           = s_('Geo|Last repository check run')
         .project-status-content

ee/app/views/admin/geo/projects/_removed.html.haml

-%strong.header-text-primary.flex-fill
+%strong.text-truncate.flex-fill
   = s_('Geo|Project (ID: %{project_id}) no longer exists on the primary. It is safe to remove this entry, as this will not remove any data on disk.') % { project_id: project_registry.project_id }
 = link_to(admin_geo_project_path(project_registry), data: { confirm: s_('Geo|Tracking entry will be removed. Are you sure?')}, method: :delete, class: 'btn btn-inverted btn-remove btn-sm') do
   = s_('Geo|Remove')

ee/app/views/admin/geo/projects/_synced.html.haml

 - @registries.each do |project_registry|
   .card.project-card.prepend-top-15
     .card-header{ id: "project-#{project_registry.project_id}-header" }
-      .d-flex
+      .d-flex.align-items-center
         - if project_registry.project.nil?
           = render partial: 'removed', locals: { project_registry: project_registry }
         - else
-          %strong.header-text-primary.flex-fill
+          %strong.text-truncate.flex-fill
             = link_to project_registry.project.full_name, admin_namespace_project_path(project_registry.project.namespace, project_registry.project)
           = link_to(reverify_admin_geo_project_path(project_registry), method: :post, class: 'btn btn-default btn-sm mr-2') do
             = s_('Geo|Reverify')

ee/app/views/admin/geo/projects/index.html.haml

 - page_title 'Geo Projects'
-- @content_class = "geo-admin-projects"
 - params[:sync_status] ||= []
 
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs

ee/app/views/admin/geo/uploads/_registry.html.haml

 .card.upload-card.prepend-top-15
   .card-header{ id: "upload-#{upload_registry.id}-header" }
     .d-flex
-      %strong.header-text-primary.flex-fill
+      %strong.text-truncate.flex-fill
         = upload_registry.file
       - unless upload_registry.success?
         = link_to('sync_admin_geo_upload_path(upload_registry)', method: :post, class: 'btn btn-default btn-sm mr-2') do
@@ -10,13 +10,13 @@
         = link_to(admin_geo_upload_path(upload_registry), data: { confirm: s_('Geo|Tracking entry will be removed. Are you sure?')}, method: :delete, class: 'btn btn-inverted btn-remove btn-sm') do
           = s_('Geo|Remove')
   .card-body
-    .container.upload-container
+    .container.m-0.p-0
       .row
-        .col-sm.upload-status-container
+        .col-sm
           .upload-status-title.text-muted
             = s_('Geo|Status')
           = geo_registry_status(upload_registry)
-        .col-sm.upload-status-container
+        .col-sm.mt-3.mt-sm-0
           .upload-status-title.text-muted
             = s_('Geo|Synced at')
           .upload-status-content
@@ -25,7 +25,7 @@
             - else
               = s_('Geo|Never')
         - if upload_registry.project
-          .col-sm.upload-status-container
+          .col-sm.mt-3.mt-sm-0
             .upload-status-title.text-muted
               = s_('Geo|Project')
             .upload-status-content

ee/app/views/admin/geo/uploads/index.html.haml

 - page_title 'Geo Uploads'
-- @content_class = "geo-admin-uploads"
 - params[:sync_status] ||= []
 
-%div{ class: container_class }
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-    %ul.nav-links.nav.nav-tabs
-      - opts = params[:sync_status].present? ? {} : { page: admin_geo_uploads_path }
-      = nav_link(opts) do
-        = link_to admin_geo_uploads_path do
-          = s_('Geo|All')
-      = nav_link(html_options: { class: active_when(params[:sync_status] == 'synced') }) do
-        = link_to admin_geo_uploads_path(sync_status: 'synced') do
-          = s_('Geo|Synced')
-      = nav_link(html_options: { class: active_when(params[:sync_status] == 'failed') }) do
-        = link_to admin_geo_uploads_path(sync_status: 'failed') do
-          = s_('Geo|Failed')
-      = nav_link(html_options: { class: active_when(params[:sync_status] == 'never') }) do
-        = link_to admin_geo_uploads_path(sync_status: 'never') do
-          = s_('Geo|Never')
-    .nav-controls
-      = render(partial: 'shared/projects/search_form', autofocus: true)
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  %ul.nav-links.nav.nav-tabs
+    - opts = params[:sync_status].present? ? {} : { page: admin_geo_uploads_path }
+    = nav_link(opts) do
+      = link_to admin_geo_uploads_path do
+        = s_('Geo|All')
+    = nav_link(html_options: { class: active_when(params[:sync_status] == 'synced') }) do
+      = link_to admin_geo_uploads_path(sync_status: 'synced') do
+        = s_('Geo|Synced')
+    = nav_link(html_options: { class: active_when(params[:sync_status] == 'failed') }) do
+      = link_to admin_geo_uploads_path(sync_status: 'failed') do
+        = s_('Geo|Failed')
+    = nav_link(html_options: { class: active_when(params[:sync_status] == 'never') }) do
+      = link_to admin_geo_uploads_path(sync_status: 'never') do
+        = s_('Geo|Never')
+  .nav-controls
+    = render(partial: 'shared/projects/search_form', autofocus: true)
 
-  - @registries.each do |upload_registry|
-    = render partial: 'registry', locals: { upload_registry: upload_registry }
+- @registries.each do |upload_registry|
+  = render partial: 'registry', locals: { upload_registry: upload_registry }
 
-  = paginate @registries, theme: 'gitlab'
+= paginate @registries, theme: 'gitlab'