Rc/0.6.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rdpc-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/submission/components/ProgramList.tsx → src/app/(post-login)/submission/components/ProgramList.tsx

@@ -18,27 +18,14 @@
  */
 'use client';
 
-import { useTheme } from '@/lib/emotion';
-import { Table, Typography, css } from '@icgc-argo/uikit';
-import { columns } from '../tableConfig';
-
-export type ProgramsData = {
-	shortName: string;
-	name: string | null;
-	cancerTypes: Array<string>;
-	countries: Array<string> | null;
-	membershipType: ArgoMembershipKey;
-	genomicDonors: number | null;
-	submittedDonors: number;
-	commitmentDonors: number;
-	administrators: { firstName: string; lastName: string; email: string }[];
-	donorPercentage: number;
-};
+import { css } from '@/lib/emotion';
+import { Table, Typography } from '@icgc-argo/uikit';
+import { columns } from '../program-table/config';
 
+export type ProgramData = any;
 export type ArgoMembershipKey = 'FULL' | 'ASSOCIATE';
 
-export default function ProgramList({ programs }: { programs: ProgramsData[] }) {
-	const theme = useTheme();
+export default function ProgramList({ programs }: { programs: ProgramData[] }) {
 	const programsArraySize = programs.length;
 
 	return (
@@ -49,8 +36,9 @@ export default function ProgramList({ programs }: { programs: ProgramsData[] })
 		>
 			<Typography
 				variant="label"
+				color="grey"
+				component="div"
 				css={css`
-					color: ${theme.colors.grey};
 					min-height: 32px;
 					display: flex;
 					align-items: center;
@@ -62,6 +50,7 @@ export default function ProgramList({ programs }: { programs: ProgramsData[] })
 			<Table
 				data={programs}
 				columns={columns}
+				pageCount={20}
 				withSideBorders
 				withRowBorder
 				withStripes

src/app/(post-login)/submission/components/ProgramMenu.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2023 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ * This program and the accompanying materials are made available under the terms of
+ * the GNU Affero General Public License v3.0. You should have received a copy of the
+ * GNU Affero General Public License along with this program.
+ *  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+'use client';
+
+import { css } from '@/lib/emotion';
+import { MenuItem } from '@icgc-argo/uikit';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { MouseEventHandler, useState } from 'react';
+
+export default function ProgramMenu({
+	programs,
+	searchQuery,
+}: {
+	programs: { shortName: string }[];
+	searchQuery: string;
+}) {
+	const pathname = usePathname();
+	const [activeProgramIndex, setActiveProgramIndex] = useState(-1);
+
+	const filteredPrograms = !searchQuery.length
+		? programs
+		: programs.filter(({ shortName }) => shortName.search(new RegExp(searchQuery, 'i')) > -1);
+
+	const setActiveProgram =
+		(index: number): MouseEventHandler =>
+		() =>
+			setActiveProgramIndex(index);
+
+	return (
+		<>
+			<Link
+				href="/submission"
+				css={css`
+					text-decoration: none !important;
+				`}
+			>
+				<MenuItem
+					level={2}
+					content="All Programs"
+					onClick={setActiveProgram(-1)}
+					selected={pathname === '/submission'}
+				/>
+			</Link>
+
+			{filteredPrograms.map((program, programIndex) => (
+				<MenuItem
+					level={2}
+					key={program.shortName}
+					content={program.shortName}
+					onClick={setActiveProgram(programIndex)}
+					selected={programIndex === activeProgramIndex}
+				>
+					<MenuItem level={3}>{program.shortName}</MenuItem>
+				</MenuItem>
+			))}
+		</>
+	);
+}

src/app/(post-login)/submission/components/Search.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2023 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ * This program and the accompanying materials are made available under the terms of
+ * the GNU Affero General Public License v3.0. You should have received a copy of the
+ * GNU Affero General Public License along with this program.
+ *  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+'use client';
+
+import { Input, MenuItem, css } from '@icgc-argo/uikit';
+
+export default function Search({
+	query,
+	onChange,
+}: {
+	query: string;
+	onChange: (s: string) => void;
+}) {
+	return (
+		<MenuItem
+			level={1}
+			selected
+			contentAs="div"
+			content={
+				<Input
+					aria-label="programs search"
+					onChange={(event) => {
+						onChange(event.target.value);
+					}}
+					value={query}
+					css={css`
+						flex: 1;
+					`}
+					preset="search"
+				/>
+			}
+		/>
+	);
+}

src/app/(post-login)/submission/components/SideMenu/Content.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2023 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ * This program and the accompanying materials are made available under the terms of
+ * the GNU Affero General Public License v3.0. You should have received a copy of the
+ * GNU Affero General Public License along with this program.
+ *  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+'use client';
+
+import { Icon, MenuItem, SubMenu } from '@icgc-argo/uikit';
+import { useState } from 'react';
+import ProgramMenu from '../ProgramMenu';
+import Search from '../Search';
+
+const SideMenuContent = ({ content }: { content: any[] }) => {
+	const [programNameSearch, setProgramNameSearch] = useState('');
+
+	return (
+		<SubMenu>
+			<MenuItem icon={<Icon name="programs" />} content={'My Programs'} selected>
+				<Search query={programNameSearch} onChange={setProgramNameSearch} />
+				<ProgramMenu programs={content.slice(0, -1)} searchQuery={programNameSearch} />
+			</MenuItem>
+		</SubMenu>
+	);
+};
+
+export default SideMenuContent;

src/app/submission/layout.tsx → src/app/(post-login)/submission/components/SideMenu/Menu.tsx

@@ -19,38 +19,35 @@
 'use client';
 
 import { css, useTheme } from '@/lib/emotion';
-import { ReactNode } from 'react';
-import SideMenu from './components/Sidemenu';
-import TitleBar from './components/TitleBar';
+import SideMenuContent from './Content';
+import SideMenuToggle, { TOGGLE_HEIGHT_PX } from './Toggle';
+import { SideMenuProps } from './types';
 
-export default function SubmissionLayout({ children }: { children: ReactNode }) {
+const SideMenu = ({ content, onToggle, isActive }: SideMenuProps) => {
 	const theme = useTheme();
 
 	return (
 		<div
 			css={css`
-				display: grid;
-				grid-template-columns: 248px 1fr;
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				background-color: ${theme.colors.white};
 			`}
 		>
-			<SideMenu />
-			<div>
-				<TitleBar />
-				<div
-					id="content"
-					css={css`
-						background: ${theme.colors.grey_4};
-						padding: 40px;
-						height: 100%;
-
-						> div {
-							background: white;
-						}
-					`}
-				>
-					{children}
-				</div>
+			<div
+				css={css`
+					height: calc(100vh - ${TOGGLE_HEIGHT_PX}px);
+					overflow-y: auto;
+					visibility: ${isActive ? 'visible' : 'hidden'};
+				`}
+			>
+				<SideMenuContent content={content} />
 			</div>
+			<SideMenuToggle onToggle={onToggle} open={isActive} />
 		</div>
 	);
-}
+};
+
+export default SideMenu;

src/app/(post-login)/submission/components/SideMenu/Toggle.tsx

@@ -0,0 +1,55 @@
+import { Interpolation, Theme, css } from '@emotion/react';
+import { Icon, UikitIconNames } from '@icgc-argo/uikit';
+
+const ToggleChevron = ({ css, name }: { css?: Interpolation<Theme>; name: UikitIconNames }) => (
+	<Icon height="10px" fill="primary_2" css={css} name={name} />
+);
+
+export const TOGGLE_HEIGHT_PX = 56;
+const SideMenuToggle = ({ onToggle, open }: { onToggle: () => void; open: boolean }) => (
+	<div
+		css={css`
+			height: ${TOGGLE_HEIGHT_PX}px;
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			padding-right: ${open ? '22px' : '12px'};
+
+			&:hover {
+				cursor: pointer;
+			}
+		`}
+		onClick={onToggle}
+	>
+		<div
+			css={css`
+				display: ${open ? 'block' : 'none'};
+			`}
+		>
+			<ToggleChevron name="chevron_left" />
+			<ToggleChevron
+				name="chevron_left"
+				css={css`
+					position: relative;
+					left: -3px;
+				`}
+			/>
+		</div>
+		<div
+			css={css`
+				display: ${!open ? 'block' : 'none'};
+			`}
+		>
+			<ToggleChevron name="chevron_right" />
+			<ToggleChevron
+				name="chevron_right"
+				css={css`
+					position: relative;
+					left: -3px;
+				`}
+			/>
+		</div>
+	</div>
+);
+
+export default SideMenuToggle;

src/app/submission/components/Sidemenu.tsx → src/app/(post-login)/submission/components/SideMenu/types.ts

@@ -16,8 +16,5 @@
  * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-'use client';
 
-export default function SideMenu() {
-	return <div>SideMenu</div>;
-}
+export type SideMenuProps = { content: any; onToggle: () => void; isActive: boolean };

src/app/submission/components/TitleBar.tsx → src/app/(post-login)/submission/components/TitleBar.tsx

@@ -18,15 +18,17 @@
  */
 'use client';
 
-import { css } from '@/lib/emotion';
+import { css, useTheme } from '@/lib/emotion';
 import { TitleBar as TitleBarComp } from '@icgc-argo/uikit';
 
-export default function TitleBar() {
+const TitleBar = () => {
+	const theme = useTheme();
 	return (
 		<div
 			css={css`
 				display: flex;
 				padding: 0 20px;
+				background-color: ${theme.colors.white};
 			`}
 		>
 			<TitleBarComp
@@ -56,4 +58,6 @@ export default function TitleBar() {
 			</div>
 		</div>
 	);
-}
+};
+
+export default TitleBar;