Merge branch '229351-geo-node-actions-gitlab-classes' into 'master'

Geo - Clean up old node css

Closes #229351

See merge request gitlab-org/gitlab!37115

ee/app/assets/javascripts/geo_nodes/components/geo_node_actions.vue

@@ -88,12 +88,12 @@ export default {
 <template>
   <div
     data-testid="nodeActions"
-    class="geo-node-actions gl-display-flex gl-align-items-center gl-justify-content-end gl-flex-direction-column gl-sm-flex-direction-row"
+    class="gl-display-flex gl-align-items-center gl-justify-content-end gl-flex-direction-column gl-sm-flex-direction-row gl-mx-5 gl-sm-mx-0"
   >
     <gl-button
       v-if="isSecondaryNode"
       :href="node.geoProjectsUrl"
-      class="gl-mx-2 gl-mt-5 gl-sm-mt-0"
+      class="gl-mx-2 gl-mt-5 gl-sm-mt-0 gl-w-full gl-sm-w-auto"
       target="_blank"
     >
       <span class="gl-display-flex gl-align-items-center">
@@ -102,17 +102,25 @@ export default {
       </span>
     </gl-button>
     <template v-if="nodeActionsAllowed">
-      <gl-button v-if="nodeMissingOauth" class="gl-mx-2 gl-mt-5 gl-sm-mt-0" @click="onRepairNode">
+      <gl-button
+        v-if="nodeMissingOauth"
+        class="gl-mx-2 gl-mt-5 gl-sm-mt-0 gl-w-full gl-sm-w-auto"
+        @click="onRepairNode"
+      >
         {{ s__('Repair authentication') }}
       </gl-button>
-      <gl-button v-if="nodeEditAllowed" :href="node.editPath" class="gl-mx-2 gl-mt-5 gl-sm-mt-0">
+      <gl-button
+        v-if="nodeEditAllowed"
+        :href="node.editPath"
+        class="gl-mx-2 gl-mt-5 gl-sm-mt-0 gl-w-full gl-sm-w-auto"
+      >
         {{ __('Edit') }}
       </gl-button>
       <gl-button
         v-if="isSecondaryNode"
         data-testid="removeButton"
         variant="danger"
-        class="gl-mx-2 gl-mt-5 gl-sm-mt-0"
+        class="gl-mx-2 gl-mt-5 gl-sm-mt-0 gl-w-full gl-sm-w-auto"
         :disabled="!nodeRemovalAllowed"
         @click="onRemoveSecondaryNode"
       >
@@ -121,7 +129,7 @@ export default {
       <div
         v-gl-tooltip.hover
         name="disabledRemovalTooltip"
-        class="gl-mx-2 gl-mt-5 gl-sm-mt-0"
+        class="gl-mx-2 gl-mt-5 gl-sm-mt-0 gl-w-full gl-sm-w-auto"
         :title="disabledRemovalTooltip"
       >
         <gl-button

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

-@media (max-width: $breakpoint-sm) {
-  .geo-node-actions {
-    margin: 0 1rem;
-
-    > * {
-      width: 100%;
-    }
-  }
-}
-
 .project-card-errors {
   .btn-card-header {
     &.collapsed {

ee/spec/features/admin/geo/admin_geo_nodes_spec.rb

@@ -157,7 +157,7 @@ RSpec.describe 'admin Geo Nodes', :js, :geo do
     end
 
     it 'removes an existing Geo Node' do
-      page.within(find('.geo-node-actions', match: :first)) do
+      page.within(find('[data-testid="nodeActions"]', match: :first)) do
         page.click_button('Remove')
       end
       page.within('.modal') do

ee/spec/features/geo_node_spec.rb

@@ -51,7 +51,7 @@ RSpec.describe 'GEO Nodes', :geo do
 
         wait_for_requests
 
-        geo_node_actions = all('div.geo-node-actions')
+        geo_node_actions = all('[data-testid="nodeActions"]')
         expected_url = File.join(geo_secondary.url, '/admin/geo/projects')
 
         expect(geo_node_actions.last).to have_link('Open projects', href: expected_url)