Rc/0.4.0 (#51)

* add prettier plugin (#43)

Co-authored-by: Ciaran Schutte <[email protected]>

* Feat/8 Logout (#39)

* move global into src, instead of app folder

* add some components

* configure uikit, emotion and typings

* uikit happy

* Basic Env Vars

* Populating Basic Configs

* cleanup

* add theme provider

* emotion imports

* emotion uikit style tpying

* First Working Test

* Working Redirect w/ URL Join

* remove DataCallout uikit re-export wrapper

* Basic Reusable Component

* Remove .env

* Update .gitignore

* Remove Duplicate

* Stage for UI Kit

* Loading Test w/ UI Kit

* NavBar Setup

* Fix Landing Page

* Remove Next logo

* Skeleton Cookies

* Basic Logout

* AuthContext Setup

* AuthContext Simplest State

* Generic Vars

* Major Update w/ Logout + UI Kit

* Testing Context + State

* Add Copyrights

* Update TypeScript, Imports, File Structure

* Login Button Component

* Use AuthContextValue

* Use GoogleLogin

* Use URL Join

* Local .env updates

* Remove Boilerplate

* Shuffle Files Around

* Refactor w/o Context

* Remove Logging

* Fix env settings

* Add React Query + Mock Login State

* Add Copyright

* Current Working State

* Fix User Badge

* Temporary Login Solution

* Clean Up State Changes

* Remove Redirect

* Cleaned Up User Badge

* Basic Pathname Solution

* Cleaned Up Login Flow

* Improved Layout + Header Handling

* Remove vscode from gitignore

* Fix /public import

* Update page names

* Refactor Auth / Layout

* General Clean Up

* Stub Middleware

* Tidying

* Middleware + Auth Route Setup - Infinite Loop

* Current State - Testing

* Children prop cleanup

* Header UI Updates

* Current Working State

* Clean Up Use of Stored Token

* Remove extra storedToken

* First Lint Changes

* Hook + Middleware Cleanup

* Better fallback, LoggingIn dependency

* Move Middleware to Feature Branch

* Unnecesary changes

* Remove Server side token management

* First Setup

* Log Out Update

* Updated Var name + Conditional

* Improve Loading Var Names + Reusable Logout

* Use Context logOut

* Remove Dummy Logout Button

* 1st Header PR Feedback

* Remove Unused Imports

* Fix Build Issues

* ProfileMenu Component

* Reusable Login

---------

Co-authored-by: Ciaran Schutte <[email protected]>

* Feat/#14 programs list page (#47)

* add submission layout

* add some components

* add All Programs layout

* skeleton

* cleanup + add linking for programs

* remove sidemenu logic for PR

* remove program list and search func for PR

* fix type error

* mmove types around

* fix build

* clean import

---------

Co-authored-by: Ciaran Schutte <[email protected]>

* RC 0.4.0

---------

Co-authored-by: Ciarán Schütte <[email protected]>
Co-authored-by: Ciaran Schutte <[email protected]>

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# generic name for files that shouldn't be checked in (handy for mock data)
+*.temp*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rdpc-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -46,6 +46,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "prettier": "2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.2",
     "typescript": "^5.1.3"
   },
   "lint-staged": {

src/app/components/Header.tsx

@@ -18,15 +18,43 @@
  */
 'use client';
 
-import { AppBar, css, DnaLoader, UserBadge } from '@icgc-argo/uikit';
-import Link from 'next/link';
-import Image from 'next/image';
-import argoLogo from '/public/argo-logo.svg';
 import { useAuthContext } from '@/global/utils/auth';
+import { css, useTheme } from '@/lib/emotion';
+import { AppBar, AppBarMenuItem, DnaLoader, Link, NavElement } from '@icgc-argo/uikit';
+import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
 import LoginButton from './LoginButton';
+import ProfileMenu from './ProfileMenu';
+import argoLogo from '/public/argo-logo.svg';
 
 const Header = () => {
-	const { egoJwt, loggingIn } = useAuthContext();
+	const [isDropdownOpen, setDropdownOpen] = useState(false);
+	const { egoJwt, authLoading, logOut } = useAuthContext();
+	const path = usePathname();
+	const theme = useTheme();
+	const onProfilePage = path === '/landing-page';
+	const profileActive = onProfilePage && !!egoJwt.length && !authLoading;
+
+	const profileNavDetails: Array<NavElement> = [
+		{
+			active: profileActive,
+			href: '/landing-page',
+			name: 'Profile & Token',
+			LinkComp: Link,
+		},
+		{
+			isLink: false,
+			onClick: () => {
+				setDropdownOpen(false);
+				logOut();
+			},
+			name: 'Logout',
+			active: false,
+			href: '',
+			LinkComp: Link,
+		},
+	];
 
 	return (
 		<header>
@@ -43,21 +71,28 @@ const Header = () => {
 
 				{/** keep this div. header will have more items, will be "right-aligned" */}
 				<div>
-					{egoJwt ? (
-						<UserBadge
-							showGreeting={true}
-							firstName={'Test'}
-							lastName={'User'}
-							title={'DCC Member'}
-							css={css`
-								color: white;
-							`}
-						/>
-					) : loggingIn ? (
-						<DnaLoader />
-					) : (
-						<LoginButton />
-					)}
+					<AppBarMenuItem
+						active={profileActive}
+						css={css`
+							border-bottom: ${profileActive ? `solid 3px ${theme.colors.accent1}` : ''};
+						`}
+					>
+						{egoJwt ? (
+							<ProfileMenu
+								isDropdownOpen={isDropdownOpen}
+								onProfilePage={onProfilePage}
+								onClick={() => {
+									setDropdownOpen(!isDropdownOpen);
+								}}
+								profileNavDetails={profileNavDetails}
+								theme={theme}
+							/>
+						) : authLoading ? (
+							<DnaLoader />
+						) : (
+							<LoginButton />
+						)}
+					</AppBarMenuItem>
 				</div>
 			</AppBar>
 		</header>

src/app/components/ProfileMenu.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 { DropdownMenu, FocusWrapper, NavBarElement, NavElement, UserBadge } from '@icgc-argo/uikit';
+import { Theme } from '@icgc-argo/uikit/ThemeProvider';
+
+const ProfileMenu = ({
+	isDropdownOpen,
+	onProfilePage,
+	onClick,
+	profileNavDetails,
+	theme,
+}: {
+	isDropdownOpen: boolean;
+	onProfilePage: boolean;
+	onClick: () => void;
+	profileNavDetails: NavElement[];
+	theme: Theme;
+}) => (
+	<FocusWrapper onClick={onClick}>
+		{isDropdownOpen && (
+			<DropdownMenu>
+				{profileNavDetails.map((element, idx) => (
+					<NavBarElement key={`profileNavDetail_${idx}`} {...element} isDropdown={true} />
+				))}
+			</DropdownMenu>
+		)}
+		<UserBadge
+			showGreeting={true}
+			firstName={'Test'}
+			lastName={'User'}
+			title={'DCC Member'}
+			className={onProfilePage ? 'active' : ''}
+			css={css`
+				color: ${onProfilePage ? theme.colors.accent1 : theme.colors.white};
+				&:hover {
+					color: ${theme.colors.accent1};
+				}
+			`}
+		/>
+	</FocusWrapper>
+);
+
+export default ProfileMenu;

src/app/landing-page/page.tsx

@@ -19,10 +19,10 @@
 'use client';
 
 import { getAppConfig } from '@/global/config';
-import { logOut } from '@/global/utils/auth';
 
 export default function LandingPage() {
 	const { EGO_CLIENT_ID } = getAppConfig();
+
 	return (
 		<main>
 			<div>
@@ -32,11 +32,6 @@ export default function LandingPage() {
 				</p>
 			</div>
 			<h1>Welcome! {EGO_CLIENT_ID}</h1>
-			<div>
-				<a href={`/`}>
-					<button onClick={logOut}>Logout</button>
-				</a>
-			</div>
 		</main>
 	);
 }

src/app/layout.tsx

@@ -22,10 +22,9 @@
  */
 'use client';
 
-import { Work_Sans } from 'next/font/google';
+import { AuthProvider } from '@/global/utils/auth';
 import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { AuthProvider } from '@/global/utils/auth';
 import Header from './components/Header';
 import ThemeProvider from './components/ThemeProvider';
 import { css } from '@/lib/emotion';

src/app/logging-in/page.tsx

@@ -22,20 +22,20 @@ import { useRouter } from 'next/navigation';
 import { useQuery } from 'react-query';
 import urlJoin from 'url-join';
 
-import { css, DnaLoader, useTheme } from '@icgc-argo/uikit';
 import { getAppConfig } from '@/global/config';
-import { storeToken, useAuthContext } from '@/global/utils/auth';
+import { useAuthContext } from '@/global/utils/auth';
+import { DnaLoader, css, useTheme } from '@icgc-argo/uikit';
 
 export default async function LoggingIn() {
 	const { EGO_API_ROOT, EGO_CLIENT_ID } = getAppConfig();
 	const router = useRouter();
 	const theme = useTheme();
-	const { egoJwt, setEgoJwt, loggingIn, setLoggingIn } = useAuthContext();
+	const { egoJwt, authLoading, setAuthLoading, logIn } = useAuthContext();
 	const egoLoginUrl = urlJoin(EGO_API_ROOT, `/api/oauth/ego-token?client_id=${EGO_CLIENT_ID}`);
 
 	if (egoJwt) router.push('/landing-page');
 
-	if (!loggingIn && !egoJwt) setLoggingIn(true);
+	if (!authLoading && !egoJwt) setAuthLoading(true);
 
 	useQuery('egoJwt', () => {
 		fetch(egoLoginUrl, {
@@ -47,9 +47,7 @@ export default async function LoggingIn() {
 		})
 			.then(async (res) => {
 				const newToken = await res.text();
-				storeToken(newToken);
-				setEgoJwt(newToken);
-				setLoggingIn(false);
+				logIn(newToken);
 			})
 			.catch(console.error);
 	});

src/app/page.tsx

@@ -18,13 +18,12 @@
  */
 'use client';
 
-import { ComponentType } from 'react';
-import Image from 'next/image';
-import urlJoin from 'url-join';
-import { DataCallout, Link, Typography, overtureLogo } from '@icgc-argo/uikit';
 import { getAppConfig } from '@/global/config';
 import { css, useTheme } from '@/lib/emotion';
-import Footer from './components/Footer';
+import { DataCallout, Link, Typography, overtureLogo } from '@icgc-argo/uikit';
+import Image from 'next/image';
+import { ComponentType } from 'react';
+import urlJoin from 'url-join';
 import Hero from './components/Hero';
 
 const { DOCS_URL_ROOT } = getAppConfig();

src/app/submission/[shortName]/page.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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';
+
+export default function Program() {
+	return <div>Program</div>;
+}