ui: Reorganize Tabs CSS (#9313)

ui/packages/consul-ui/app/components/tab-nav/index.scss

@@ -1,5 +1,16 @@
 @import './skin';
 @import './layout';
+.tab-nav {
+  @extend %tab-nav;
+}
+%tab-nav.animatable {
+  @extend %with-animated-tab-selection;
+}
+.tab-section {
+  @extend %tab-section;
+  /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */
+  margin-top: 0 !important;
+}
 %with-animated-tab-selection ul::after,
 %tab-button-selected {
   @extend %frame-brand-300;

ui/packages/consul-ui/app/components/tab-nav/layout.scss

@@ -1,5 +1,6 @@
 %tab-nav {
   clear: both;
+  overflow: scroll;
 }
 %tab-nav ul {
   display: inline-flex;

ui/packages/consul-ui/app/components/tab-section/index.hbs

@@ -1,4 +0,0 @@
-<input onchange={{action onchange}} type="radio" name="radiogroup_{{name}}" id="radiogroup_{{name}}_{{slugify id}}" value={{id}} checked={{if selected 'checked'}} />
-<div role="tabpanel" id="radiogroup_{{name}}_{{id}}_panel">
-  {{yield}}
-</div>

ui/packages/consul-ui/app/components/tab-section/index.js

@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-
-export default Component.extend({
-  classNames: ['tab-section'],
-  'data-test-radiobutton': computed('name,id', function() {
-    return `${this.name}_${this.id}`;
-  }),
-  name: 'tab',
-  onchange: function() {},
-});

ui/packages/consul-ui/app/styles/base/components/index.scss

@@ -11,5 +11,4 @@
 @import './radio-group/index';
 @import './sliding-toggle/index';
 @import './table/index';
-@import './tabs/index';
 @import './toggle-button/index';

ui/packages/consul-ui/app/styles/components.scss

@@ -14,7 +14,6 @@
 @import './components/buttons';
 @import './components/composite-row';
 @import './components/secret-button';
-@import './components/tabs';
 @import './components/pill';
 @import './components/table';
 @import './components/tag-list';
@@ -53,6 +52,7 @@
 @import 'consul-ui/components/filter-bar';
 @import 'consul-ui/components/freetext-filter';
 @import 'consul-ui/components/informed-action';
+@import 'consul-ui/components/tab-nav';
 
 @import 'consul-ui/components/consul/tomography/graph';
 @import 'consul-ui/components/consul/discovery-chain';

ui/packages/consul-ui/app/styles/components/tabs.scss

@@ -1,11 +0,0 @@
-.tab-nav {
-  @extend %tab-nav;
-}
-%tab-nav.animatable {
-  @extend %with-animated-tab-selection;
-}
-.tab-section {
-  @extend %tab-section;
-  /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */
-  margin-top: 0 !important;
-}

ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs

@@ -1,4 +1,4 @@
-<div id="tags" class="tab-section">
+<div id="topology" class="tab-section">
   <div role="tabpanel">
   {{#if topology.FilteredByACLs}}
     <TopologyMetrics::Notice::LimitedAccess />

ui/packages/consul-ui/tests/integration/components/tab-section-test.js

@@ -1,26 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | tab section', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.on('myAction', function(val) { ... });
-
-    await render(hbs`{{tab-section}}`);
-
-    assert.dom('*').hasText('');
-
-    // Template block usage:
-    await render(hbs`
-      {{#tab-section}}
-        template block text
-      {{/tab-section}}
-    `);
-
-    assert.dom('*').hasText('template block text');
-  });
-});