grafana/ui: Create Tabs component (#21328)

* create tabs component

* replace tabs in pageheader

* splitting two different types of tabitems

* fix index and conditionals in tabs

* redo tabs to not render anchor links

* rename to className and use cx to combine classes

* reverting back to a simpler use case

* moving type to types file

* fix import

* redoing Tabs to simpler composition components

* pr feedback

* update snapshot

* use icon component, added knob for storybook

public/app/core/components/PageHeader/PageHeader.tsx

@@ -1,5 +1,5 @@
 import React, { FormEvent } from 'react';
-import classNames from 'classnames';
+import { Tab, TabsBar } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { NavModel, NavModelItem, NavModelBreadcrumb } from '@grafana/data';
 import { CoreEvents } from 'app/types';
@@ -45,37 +45,30 @@ const SelectNav = ({ main, customCss }: { main: NavModelItem; customCss: string
   );
 };
 
-const Tabs = ({ main, customCss }: { main: NavModelItem; customCss: string }) => {
-  return (
-    <ul className={`gf-tabs ${customCss}`}>
-      {main.children.map((tab, idx) => {
-        if (tab.hideFromTabs) {
-          return null;
-        }
-
-        const tabClasses = classNames({
-          'gf-tabs-link': true,
-          active: tab.active,
-        });
-
-        return (
-          <li className="gf-tabs-item" key={tab.url}>
-            <a className={tabClasses} target={tab.target} href={tab.url}>
-              <i className={tab.icon} />
-              {tab.text}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
 const Navigation = ({ main }: { main: NavModelItem }) => {
+  const goToUrl = (index: number) => {
+    main.children.forEach((child, i) => {
+      if (i === index) {
+        appEvents.emit(CoreEvents.locationChange, { href: child.url });
+      }
+    });
+  };
+
   return (
     <nav>
       <SelectNav customCss="page-header__select-nav" main={main} />
-      <Tabs customCss="page-header__tabs" main={main} />
+      <TabsBar>
+        {main.children.map((child, index) => {
+          return (
+            <Tab
+              label={child.text}
+              active={child.active}
+              key={`${child.url}-${index}`}
+              onChangeTab={() => goToUrl(index)}
+            />
+          );
+        })}
+      </TabsBar>
     </nav>
   );
 };