From 009813cbc40bfd186037ccb7f327225357ef34e9 Mon Sep 17 00:00:00 2001
From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>
Date: Mon, 21 Nov 2022 20:31:49 +0530
Subject: Fix for  services self hosted url / Team Id / Include pre-releases
 not updating  (#785)

* fix: self hosted team/url options not working properly in edit service form
* fix: Include pre-releases toggle not working
---
 src/components/ui/Tabs/TabItem.tsx | 20 +++++++++-
 src/components/ui/Tabs/Tabs.js     | 71 ------------------------------------
 src/components/ui/Tabs/Tabs.tsx    | 75 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 94 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/ui/Tabs/Tabs.js
 create mode 100644 src/components/ui/Tabs/Tabs.tsx

(limited to 'src/components/ui')

diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
index 631586d62..815dced8c 100644
--- a/src/components/ui/Tabs/TabItem.tsx
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -1 +1,19 @@
-export default ({ children }) => <>{children}</>;
+import { Fragment, ReactElement } from 'react';
+
+export interface IProps {
+  children:
+    | string
+    | ReactElement<HTMLInputElement>
+    | (
+        | boolean
+        | ReactElement<HTMLInputElement>
+        | ReactElement<HTMLParagraphElement>
+      )[];
+  title?: string; // it is used on Tabs.tsx
+}
+
+function TabItem({ children, title = '' }: IProps): ReactElement {
+  return <Fragment key={title}>{children}</Fragment>;
+}
+
+export default TabItem;
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
deleted file mode 100644
index 5d2da6293..000000000
--- a/src/components/ui/Tabs/Tabs.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Children, Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-
-import { oneOrManyChildElements } from '../../../prop-types';
-
-class Tab extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { active: this.props.active };
-  }
-
-  static propTypes = {
-    children: oneOrManyChildElements.isRequired,
-    active: PropTypes.number,
-  };
-
-  static defaultProps = {
-    active: 0,
-  };
-
-  switchTab(index) {
-    this.setState({ active: index });
-  }
-
-  render() {
-    const { children: childElements } = this.props;
-    const children = childElements.filter(c => !!c);
-
-    if (children.length === 1) {
-      return <div>{children}</div>;
-    }
-
-    return (
-      <div className="content-tabs">
-        <div className="content-tabs__tabs">
-          {Children.map(children, (child, i) => (
-            <button
-              key="{i}"
-              className={classnames({
-                'content-tabs__item': true,
-                'is-active': this.state.active === i,
-              })}
-              onClick={() => this.switchTab(i)}
-              type="button"
-            >
-              {child.props.title}
-            </button>
-          ))}
-        </div>
-        <div className="content-tabs__content">
-          {Children.map(children, (child, i) => (
-            <div
-              key="{i}"
-              className={classnames({
-                'content-tabs__item': true,
-                'is-active': this.state.active === i,
-              })}
-              type="button"
-            >
-              {child}
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default observer(Tab);
diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx
new file mode 100644
index 000000000..2c34d7e24
--- /dev/null
+++ b/src/components/ui/Tabs/Tabs.tsx
@@ -0,0 +1,75 @@
+import { Children, Component, ReactElement, ReactPortal } from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { IProps as TabItemProps } from './TabItem';
+
+interface IProps {
+  children:
+    | ReactElement<TabItemProps>
+    | (boolean | ReactElement<TabItemProps>)[];
+  active?: number;
+}
+
+interface IState {
+  active: number;
+}
+
+@observer
+class Tab extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      active: this.props.active || 0,
+    };
+  }
+
+  switchTab(index: number): void {
+    this.setState({ active: index });
+  }
+
+  render(): ReactElement {
+    const { children: childElements } = this.props;
+    const children = Children.toArray(childElements); // removes all null values
+
+    if (children.length === 1) {
+      return <div>{children}</div>;
+    }
+
+    return (
+      <div className="content-tabs">
+        <div className="content-tabs__tabs">
+          {Children.map(children, (child, i) => (
+            <button
+              key={i}
+              className={classnames({
+                'content-tabs__item': true,
+                'is-active': this.state.active === i,
+              })}
+              onClick={() => this.switchTab(i)}
+              type="button"
+            >
+              {(child as ReactPortal).props.title}
+            </button>
+          ))}
+        </div>
+        <div className="content-tabs__content">
+          {Children.map(children, (child, i) => (
+            <div
+              key={i}
+              className={classnames({
+                'content-tabs__item': true,
+                'is-active': this.state.active === i,
+              })}
+              // type="button"
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Tab;
-- 
cgit v1.2.3-54-g00ecf