Adding

LCU.WebApps.Collections.RepoClient/src/components/tab-view/TabView.css

@@ -0,0 +1,7 @@
+.nav-link {
+    cursor: pointer;
+}
+
+.nav-item p {
+    margin-bottom: 0;
+}

LCU.WebApps.Collections.RepoClient/src/components/tab-view/TabView.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ShallowWrapper, shallow } from "enzyme";
+import TabView, { ITabViewPage as ITabViewPage } from "./TabView";
+
+describe('TabView component', () => {
+    let wrapper: ShallowWrapper;
+
+    const pages: ITabViewPage[] = [
+        {
+            header: 'Page 1',
+            element: <div data-test="page-0-element"></div>,
+        },
+        {
+            header: 'Page 1',
+            element: <div data-test="page-1-element"></div>,
+        },
+    ]
+
+    beforeEach(() => {
+        wrapper = shallow(<TabView pages={pages}/>);
+    })
+
+    it ('Renders initial page only', () => {
+        const pageZeroComponent = wrapper.find(`[data-test='page-0-element']`);
+        expect(pageZeroComponent.length).toBe(1);
+        const pageOneComponent = wrapper.find(`[data-test='page-1-element']`);
+        expect(pageOneComponent.length).toBe(0);
+    })
+
+    it ('Renders secondary page only on click', () => {
+        const navLinkComponent = wrapper.find(`[data-test='nav-link-1']`);
+        navLinkComponent.simulate('click');
+        const pageOneComponent = wrapper.find(`[data-test='page-1-element']`);
+        expect(pageOneComponent.length).toBe(1);
+        const pageZeroComponent = wrapper.find(`[data-test='page-0-element']`);
+        expect(pageZeroComponent.length).toBe(0);
+    })
+
+    it ('Calls Tab Callback on Tab Change', () => {
+        let tabOneValue = 0;
+        let tabTwoValue = 5;
+
+        const tabViewPages: ITabViewPage[] = [
+            {
+                header: 'Page 1',
+                element: <div data-test="page-0-element"></div>,
+                tabOpenCallback: () => {tabOneValue = 42},
+            },
+            {
+                header: 'Page 1',
+                element: <div data-test="page-1-element"></div>,
+                tabOpenCallback: () => {tabTwoValue = 1945}
+            },
+        ];
+        wrapper = shallow(<TabView pages={tabViewPages} />);
+        expect(tabOneValue).toBe(42);
+        const navLinkComponent = wrapper.find(`[data-test='nav-link-1']`);
+        navLinkComponent.simulate('click');
+        expect(tabTwoValue).toBe(1945);
+    })
+});

LCU.WebApps.Collections.RepoClient/src/components/tab-view/TabView.tsx

@@ -0,0 +1,76 @@
+import React, { ReactElement } from "react";
+import "./TabView.css";
+
+export interface ITabViewPage {
+    header: string;
+    element: ReactElement;
+    tabOpenCallback?: () => any;
+}
+
+export interface TabViewProps {
+    pages: ITabViewPage[];
+}
+
+interface TabViewState {
+    currentPageIndex: number;
+}
+
+class TabView extends React.Component<TabViewProps, TabViewState> {
+
+    constructor(props: TabViewProps) {
+        super(props);
+        this.state = {
+            currentPageIndex: 0,
+        };
+        this.callPageCallback(0);
+    }
+
+    private getClassStyle(index: number): string {
+        return index === this.state.currentPageIndex ? "active ": "text-primary ";
+    }
+
+    private setCurrentPage(index: number): void {
+        const newState: TabViewState = Object.assign({}, this.state);
+        newState.currentPageIndex = index;
+        this.setState(newState);
+        this.callPageCallback(index);
+    }
+
+    private getCurrentPageElement(): ReactElement {
+        const currentPage = this.props.pages[this.state.currentPageIndex];
+        if (currentPage) {
+            return currentPage.element;
+        }
+        return (<h3>Missing</h3>);
+    }
+
+    private callPageCallback(index: number) {
+        if (index < this.props.pages.length) {
+            const tabPageCallback = this.props.pages[index].tabOpenCallback;
+            if (tabPageCallback !== undefined) {
+                tabPageCallback();
+            }
+        }
+    }
+
+    public render() {
+        return (
+            <div>
+                <ul className="nav nav-tabs">
+                    {
+                        this.props.pages.map((page, index) => {
+                            return (
+                                <li key={index} className="nav-item">
+                                    <p className={"nav-link " + this.getClassStyle(index)} onClick={() => this.setCurrentPage(index)} data-test={"nav-link-" + index}>{page.header}</p>
+                                </li>
+                            );
+                        })
+                    }
+                </ul>
+                {this.getCurrentPageElement()}
+            </div>
+        );    
+    }
+}
+
+export default TabView;