Merge branch 'cleanup-geo_node-nodes-css' into 'master'

Cleanup styles for Geo Node Items

See merge request gitlab-org/gitlab!21269

ee/spec/javascripts/geo_nodes/components/geo_node_item_spec.js

@@ -148,11 +148,9 @@ describe('GeoNodeItemComponent', () => {
       vm.isNodeDetailsFailed = true;
       vm.errorMessage = err;
       Vue.nextTick(() => {
-        expect(vm.$el.querySelectorAll('p.node-health-message').length).not.toBe(0);
-        expect(vm.$el.querySelector('p.node-health-message').innerText.trim()).toContain(err);
-        expect(vm.$el.querySelector('p.node-health-message a').getAttribute('href')).toBe(
-          '/foo/bar',
-        );
+        expect(vm.$el.querySelectorAll('p.bg-danger-100').length).not.toBe(0);
+        expect(vm.$el.querySelector('p.bg-danger-100').innerText.trim()).toContain(err);
+        expect(vm.$el.querySelector('p.bg-danger-100 a').getAttribute('href')).toBe('/foo/bar');
         done();
       });
     });

ee/spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_other_spec.js

@@ -89,18 +89,20 @@ describe('NodeDetailsSectionOther', () => {
     });
     describe('storageShardsCssClass', () => {
-      it('returns CSS class `node-detail-value-bold` when `nodeDetails.storageShardsMatch` is true', done => {
+      it('returns CSS class `font-weight-bold` when `nodeDetails.storageShardsMatch` is true', done => {
         vm.nodeDetails.storageShardsMatch = true;
         Vue.nextTick()
           .then(() => {
-            expect(vm.storageShardsCssClass).toBe('node-detail-value-bold');
+            expect(vm.storageShardsCssClass[0]).toBe('font-weight-bold');
+            expect(vm.storageShardsCssClass[1]['text-danger-500']).toBeFalsy();
           })
           .then(done)
           .catch(done.fail);
       });
-      it('returns CSS class `node-detail-value-bold node-detail-value-error` when `nodeDetails.storageShardsMatch` is false', () => {
-        expect(vm.storageShardsCssClass).toBe('node-detail-value-bold node-detail-value-error');
+      it('returns CSS class `font-weight-bold text-danger-500` when `nodeDetails.storageShardsMatch` is false', () => {
+        expect(vm.storageShardsCssClass[0]).toBe('font-weight-bold');
+        expect(vm.storageShardsCssClass[1]['text-danger-500']).toBeTruthy();
       });
     });
   });
@@ -111,14 +113,16 @@ describe('NodeDetailsSectionOther', () => {
     });
     it('renders show section button element', () => {
-      expect(vm.$el.querySelector('.btn-show-section')).not.toBeNull();
-      expect(vm.$el.querySelector('.btn-show-section > span').innerText.trim()).toBe(
-        'Other information',
-      );
+      expect(vm.$el.querySelector('.btn-link')).not.toBeNull();
+      expect(vm.$el.querySelector('.btn-link > span').innerText.trim()).toBe('Other information');
     });
-    it('renders section items container element', () => {
-      expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
+    it('renders section items container element', done => {
+      vm.showSectionItems = true;
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
+        done();
+      });
     });
   });
 });

ee/spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_sync_spec.js

@@ -89,14 +89,16 @@ describe('NodeDetailsSectionSync', () => {
     });
     it('renders show section button element', () => {
-      expect(vm.$el.querySelector('.btn-show-section')).not.toBeNull();
-      expect(vm.$el.querySelector('.btn-show-section > span').innerText.trim()).toBe(
-        'Sync information',
-      );
+      expect(vm.$el.querySelector('.btn-link')).not.toBeNull();
+      expect(vm.$el.querySelector('.btn-link > span').innerText.trim()).toBe('Sync information');
     });
-    it('renders section items container element', () => {
-      expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
+    it('renders section items container element', done => {
+      vm.showSectionItems = true;
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
+        done();
+      });
     });
   });
 });

ee/spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification_spec.js

@@ -83,6 +83,13 @@ describe('NodeDetailsSectionVerification', () => {
       expect(vm.$el.classList.contains('verification-section')).toBe(true);
     });
+    it('renders show section button element', () => {
+      expect(vm.$el.querySelector('.btn-link')).not.toBeNull();
+      expect(vm.$el.querySelector('.btn-link > span').innerText.trim()).toBe(
+        'Verification information',
+      );
+    });
+
     it('renders section items container element', done => {
       vm.showSectionItems = true;
       Vue.nextTick(() => {

ee/spec/javascripts/geo_nodes/components/node_detail_sections/section_reveal_button_spec.js

@@ -62,7 +62,7 @@ describe('SectionRevealButton', () => {
   describe('template', () => {
     it('renders button element', () => {
-      expect(vm.$el.classList.contains('btn-show-section')).toBe(true);
+      expect(vm.$el.classList.contains('btn-link')).toBe(true);
       expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('#angle-down');
       expect(vm.$el.querySelector('span').innerText.trim()).toBe('Foo button');
     });