[Demo Portal] - Do not merge

.gitignore

@@ -33,4 +33,4 @@ yarn-error.log*
 # vercel
 .vercel
 
-.env
+.env

Jenkinsfile

@@ -1,2 +1,2 @@
 @Library(value='jenkins-pipeline-library@master', changelog=false) _
-pipelineOVERTURESTAGE()
+pipelineOVERTUREStage()

README.md

@@ -1,14 +1,14 @@
-# Data Management System - UI
+# Stage - UI
 
 <div>
 <img align="right" width="120vw" src="productDMS.svg" alt="arranger-logo"/>
 </div>
 
-The DMS-UI is a React-based user interface designed to prop up browser-accessible data portals. Although the DMS-UI can be used for any web application, it is designed to integrate with Overture's Ego and Arranger microservices.
+The Stage is a React-based user interface designed to prop up browser-accessible data portals. Although the Stage can be used for any web application, it is designed to integrate with Overture's Ego and Arranger microservices.
 
-The DMS-UI is a [Next.js](https://nextjs.org/) project bootstrapped with [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+The Stage is a [Next.js](https://nextjs.org/) project bootstrapped with [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-For more information about the DMS-UI, including setup and how to integrate Overture microservices Arranger and Ego, see our [official DMS-UI user documentation](https://www.overture.bio/documentation/dms-ui/)
+For more information about the Stage, including setup and how to integrate Overture microservices Arranger and Ego, see our [official Stage user documentation](https://www.overture.bio/documentation/Stage/)
 
 <!--Blockqoute-->
 
@@ -18,7 +18,7 @@ For more information about the DMS-UI, including setup and how to integrate Over
 > <img align="left" src="ov-logo.png" height="90"/>
 > </div>
 >
-> _The DMS-UI is part of the [Overture](https://www.overture.bio/) research software ecosystem. See our [related products](#related-products) for more information on how Overture is helping organize data and enable discovery._
+> _The Stage is part of the [Overture](https://www.overture.bio/) research software ecosystem. See our [related products](#related-products) for more information on how Overture is helping organize data and enable discovery._
 
 <!--Blockqoute-->
 
@@ -45,15 +45,15 @@ For more information about the DMS-UI, including setup and how to integrate Over
   npm run dev
 ```
 
-Once running the DMS-UI is available from your [http://localhost:3000](http://localhost:3000)
+Once running the Stage is available from your [http://localhost:3000](http://localhost:3000)
 
 You can edit the UI by modifying `pages/index.js`. The UI will auto-update as you edit.
 
 **Note:** This app was tested using Node v16+. We recommend using this version if you encounter any issues.
 
 ### Troubleshooting Note:
 
-DMS-UI requires NPM v^8.3.0, to ensure all dependencies get installed correctly
+Stage requires NPM v^8.3.0, to ensure all dependencies get installed correctly
 
 ```bash
 # If you need to update your NPM version first, use the following command:
@@ -76,10 +76,9 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym
 
 ## Support & Contributions
 
-- Filing an [issue](https://github.com/overture-stack/dms-ui/issues)
-- Making a [contribution](CONTRIBUTING.md)
-- Connect with us on [Slack](https://overture-bio.slack.com/)
-- Add or Upvote a [feature request](https://github.com/overture-stack/dms-ui/issues?q=is%3Aopen+is%3Aissue+label%3Anew-feature+sort%3Areactions-%2B1-desc)
+- Filing an [issue](https://github.com/overture-stack/Stage/issues)
+- Making a [contribution](https://github.com/overture-stack/.github/blob/master/CONTRIBUTING.md)
+- Add or Upvote a [feature request](https://github.com/overture-stack/stage/issues/new?assignees=&labels=&projects=&template=Feature_Requests.md)
 
 ## Related Products
 
@@ -89,21 +88,19 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym
 
 Overture is an ecosystem of research software tools, each with narrow responsibilities, designed to reduce redundant programming efforts and enable developers and data scientists to build reliable systems that organize and share big data.
 
-All our core microservices are included in the Overture **Data Management System** (DMS). The DMS offers turnkey installation, configuration, and deployment of Overture software. For more information on the DMS, read our [DMS documentation](https://www.overture.bio/documentation/dms/).
-
 See the links below for additional information on our other research software tools:
 
 </br>
 
-|Software|Description|
-|---|---|
-|[Ego](https://github.com/overture-stack/ego)|An authorization and user management service|
-|[Ego UI](https://github.com/overture-stack/ego-ui)|A UI for managing Ego authentication and authorization services|
-|[Score](https://github.com/overture-stack/score)| Transfer data to and from any cloud-based storage system|
-|[Song](https://github.com/overture-stack/song)|Catalog and manage metadata associated to file data spread across cloud storage systems|
-|[Maestro](https://github.com/overture-stack/maestro)|Organizing your distributed data into a centralized Elasticsearch index|
-|[Arranger](https://github.com/overture-stack/arranger)|A search API with reusable UI components that build into configurable and functional data portals|
-|[DMS-UI](https://github.com/overture-stack/dms-ui)|A simple web browser UI that integrates Ego and Arranger|
+| Software                                               | Description                                                                                       |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
+| [Ego](https://github.com/overture-stack/ego)           | An authorization and user management service                                                      |
+| [Ego UI](https://github.com/overture-stack/ego-ui)     | A UI for managing Ego authentication and authorization services                                   |
+| [Score](https://github.com/overture-stack/score)       | Transfer data to and from any cloud-based storage system                                          |
+| [Song](https://github.com/overture-stack/song)         | Catalog and manage metadata associated to file data spread across cloud storage systems           |
+| [Maestro](https://github.com/overture-stack/maestro)   | Organizing your distributed data into a centralized Elasticsearch index                           |
+| [Arranger](https://github.com/overture-stack/arranger) | A search API with reusable UI components that build into configurable and functional data portals |
+| [Stage](https://github.com/overture-stack/Stage)       | A simple web browser UI that integrates Ego and Arranger                                          |
 
 ## Acknowledgements
 

components/DMSAdminContact.tsx

@@ -27,17 +27,17 @@ const Span = styled('span')`
 	line-height: 24px;
 `;
 
-const DMSAdminContact = () => {
+const PlatformAdminContact = () => {
 	const { NEXT_PUBLIC_ADMIN_EMAIL } = getConfig();
 	const Component = NEXT_PUBLIC_ADMIN_EMAIL ? StyledLink : Span;
-	return <Component href={`mailto:${NEXT_PUBLIC_ADMIN_EMAIL}`}>DMS administrator</Component>;
+	return <Component href={`mailto:${NEXT_PUBLIC_ADMIN_EMAIL}`}>platform administrator</Component>;
 };
 
 export const GenericHelpMessage = () => (
 	<span>
-		Please try again. If the problem persists, please contact the <DMSAdminContact /> for help
-		troubleshooting the issue.
+		If the problem persists, please contact the <PlatformAdminContact /> for help troubleshooting
+		the issue.
 	</span>
 );
 
-export default DMSAdminContact;
+export default PlatformAdminContact;

components/EntryNotification.tsx

@@ -0,0 +1,235 @@
+import { css, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import React, { useState, useEffect } from 'react';
+
+import { OvertureUser as Logo } from './theme/icons/';
+import Button from './Button';
+import Loader from './Loader';
+
+type EntrySize = 'lg' | 'md' | 'sm';
+
+const ENTRY_SIZES = {
+	LG: 'lg' as EntrySize,
+	MD: 'md' as EntrySize,
+	SM: 'sm' as EntrySize,
+};
+
+const getIconDimensions = (size: EntrySize) =>
+	({
+		[ENTRY_SIZES.LG]: { width: 50, height: 52 },
+		[ENTRY_SIZES.MD]: { width: 25, height: 26 },
+		[ENTRY_SIZES.SM]: { width: 22, height: 22 },
+	}[size]);
+
+const getContainerStyles = (size: EntrySize) =>
+	({
+		[ENTRY_SIZES.LG]: `
+      padding: 1rem 2rem;
+      line-height: 26px;
+    `,
+		[ENTRY_SIZES.MD]: `
+      padding: 1rem;
+      line-height: 24px;
+    `,
+		[ENTRY_SIZES.SM]: `
+      padding: 0.5rem;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+    `,
+	}[size]);
+
+const EntryContentContainer = styled('div')<{ size: EntrySize }>`
+	${({ theme, size }) => css`
+		border: 1px solid ${theme.colors.grey_1};
+		border-radius: 5px;
+		${theme.shadow.default};
+		${theme.typography.subheading};
+		font-weight: normal;
+		background-color: ${theme.colors.white};
+		color: ${theme.colors.black};
+		${getContainerStyles(size)};
+		max-width: 600px;
+		position: relative;
+	`}
+`;
+
+const getIconStyle = (size: EntrySize) =>
+	({
+		[ENTRY_SIZES.LG]: 'padding: 5px 5px 0px',
+		[ENTRY_SIZES.MD]: 'padding-right: 15px',
+		[ENTRY_SIZES.SM]: '',
+	}[size]);
+
+const getTitleStyle = (size: EntrySize) =>
+	({
+		[ENTRY_SIZES.LG]: `
+      margin: 0.5rem 0 1rem;
+      font-size: 24px;
+      line-height: 38px;
+    `,
+		[ENTRY_SIZES.MD]: `
+      margin: 0rem;
+      padding-bottom: 0.4rem;
+      font-size: 18px;
+      line-height: 20px;
+    `,
+		[ENTRY_SIZES.SM]: `
+      margin: 0rem,
+      line-height: 16px;
+    `,
+	}[size]);
+
+const EntryTitle = styled('h1')<{ size: EntrySize }>`
+	${({ size }) => css`
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		${getTitleStyle(size)}
+	`}
+`;
+
+function randomIntFromInterval(min: number, max: number) {
+	// min and max included
+	return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+const EntryNotification = ({
+	children,
+	className,
+	dismissible = true,
+	loading: parentLoading,
+	onDismiss,
+	size,
+	title,
+	...props
+}: {
+	children: React.ReactNode;
+	className?: string;
+	dismissible?: boolean;
+	loading?: boolean;
+	onDismiss?: Function;
+	size: EntrySize;
+	styles?: string;
+	title?: string;
+}) => {
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		if (parentLoading === undefined) {
+			const delay = randomIntFromInterval(750, 2000);
+			const timer = setTimeout(() => setLoading(false), delay);
+
+			return () => clearTimeout(timer);
+		} else {
+			setLoading(parentLoading);
+		}
+	}, [parentLoading]);
+
+	return (
+		<div
+			className={className}
+			css={css`
+				display: flex;
+				flex: 1;
+			`}
+		>
+			<EntryContentContainer size={size}>
+				{title ? (
+					<div>
+						<EntryTitle size={size}>
+							<span>
+								<div
+									css={css`
+										display: flex;
+										flex-direction: row;
+									`}
+								>
+									<div>
+										<Logo
+											{...getIconDimensions(size)}
+											style={css`
+												${getIconStyle(size)};
+											`}
+										/>{' '}
+									</div>
+									<div
+										css={css`
+											padding-left: 20px;
+											padding-top: 10px;
+										`}
+									>
+										{title}
+									</div>
+								</div>
+							</span>
+						</EntryTitle>
+						{children}
+						<div
+							css={css`
+								padding: 15px;
+								text-align: center;
+								max-width: fit-content;
+								margin-left: auto;
+								margin-right: auto;
+							`}
+						>
+							{loading ? (
+								<Loader />
+							) : (
+								<Button
+									onClick={() => {
+										if (onDismiss) {
+											onDismiss();
+										}
+									}}
+								>
+									Get Started
+								</Button>
+							)}
+						</div>
+						<p
+							css={css`
+								font-size: 12px;
+								margin-bottom: 0px;
+							`}
+						>
+							<b>Disclaimer:</b> All data is intended for demo purposes only and does not represent
+							any real or operational information.
+						</p>
+					</div>
+				) : (
+					<div
+						css={css`
+							display: flex;
+							flex-direction: row;
+						`}
+					>
+						<span>
+							<Logo
+								{...getIconDimensions(size)}
+								style={css`
+									${getIconStyle(size)};
+								`}
+							/>
+						</span>
+						<div
+							css={css`
+								margin-left: 10px;
+								margin-right: 10px;
+
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							`}
+						>
+							{children}
+						</div>
+					</div>
+				)}
+			</EntryContentContainer>
+		</div>
+	);
+};
+
+export default EntryNotification;