ShareModal: able to extend tabs (#22537)

* ShareModal: use generic tab type

* ShareModal: able to extend with custom tabs

* ShareModal: able to extend dash/panel tabs separately

* grafana-ui: ModalTabContent component

packages/grafana-ui/src/components/Modal/ModalTabContent.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { IconType } from '../Icon/types';
+import { Icon } from '../Icon/Icon';
+
+interface Props {
+  icon?: IconType;
+  iconClass?: string;
+}
+
+export const ModalTabContent: React.FC<Props> = ({ icon, iconClass, children }) => {
+  let iconElem;
+  const showIcon = icon || iconClass;
+  if (iconClass) {
+    iconElem = <i className={iconClass}></i>;
+  }
+  if (icon) {
+    iconElem = <Icon name={icon} />;
+  }
+
+  return (
+    <div className="share-modal-body">
+      <div className="share-modal-header">
+        {showIcon && <div className="share-modal-big-icon">{iconElem}</div>}
+        <div className="share-modal-content">{children}</div>
+      </div>
+    </div>
+  );
+};

packages/grafana-ui/src/components/index.ts

@@ -48,6 +48,7 @@ export { QueryField } from './QueryField/QueryField';
 export { Modal } from './Modal/Modal';
 export { ModalHeader } from './Modal/ModalHeader';
 export { ModalTabsHeader } from './Modal/ModalTabsHeader';
+export { ModalTabContent } from './Modal/ModalTabContent';
 export { ModalsProvider, ModalRoot, ModalsController } from './Modal/ModalsContext';
 
 // Renderless