Merge pull request #107 from overture-stack/rc/1.0.0

🔖 Rc/1.0.0

.env.schema

@@ -8,4 +8,13 @@ NEXT_PUBLIC_EGO_CLIENT_ID=dms-ui-dev
 NEXT_PUBLIC_ARRANGER_PROJECT_ID=
 NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD=
 NEXT_PUBLIC_ARRANGER_INDEX=
-NEXT_PUBLIC_ARRANGER_API_URL=
+NEXT_PUBLIC_ARRANGER_API_URL=
+NEXT_PUBLIC_ARRANGER_ADMIN_UI_URL=
+# Columns are field names separated by commas
+NEXT_PUBLIC_ARRANGER_MANIFEST_COLUMNS=field, "field", 'field'
+
+######### DMS
+NEXT_PUBLIC_SSO_PROVIDERS=
+
+
+

components/ClientError.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import DMSAdminContact from './DMSAdminContact';
+import { ErrorPageLayout } from './PageLayout';
+
+const ClientError = () => {
+  return (
+    <ErrorPageLayout errorTitle="Oops! Something went wrong" subtitle="Oops! Something went wrong">
+      An unknown error has occurred. If the problem persists, contact the <DMSAdminContact /> for
+      help.
+    </ErrorPageLayout>
+  );
+};
+
+export default ClientError;

components/DMSAdminContact.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { getConfig } from '../global/config';
+import StyledLink from './Link';
+
+const Span = styled('span')`
+  line-height: 24px;
+`;
+
+const DMSAdminContact = () => {
+  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>;
+};
+
+export const GenericHelpMessage = () => (
+  <span>
+    Please try again. If the problem persists, please contact the <DMSAdminContact /> for help
+    troubleshooting the issue.
+  </span>
+);
+
+export default DMSAdminContact;

components/ErrorNotification.tsx

@@ -74,7 +74,10 @@ const getTitleStyle = (size: ErrorSize) =>
       font-size: 18px;
       line-height: 20px;
     `,
-    [ERROR_SIZES.SM]: '',
+    [ERROR_SIZES.SM]: `
+      margin: 0rem,
+      line-height: 16px;
+    `,
   }[size]);
 
 const ErrorTitle = styled('h1')`

components/Footer.tsx

@@ -5,6 +5,7 @@ import defaultTheme from './theme';
 import { OvertureLogoWithText } from './theme/icons';
 
 import StyledLink from './Link';
+import { DMS_HELP_URL, DMS_INSTALLATION_URL } from '../global/utils/constants';
 
 const Footer = () => {
   return (
@@ -30,8 +31,7 @@ const Footer = () => {
           ${theme.typography.subheading2};
           padding-right: 13px;
         `}
-        // TODO: broken link
-        href="https://overture.bio/Documentation/DMS/For-users/DataExplorer"
+        href={DMS_HELP_URL}
         target="_blank"
       >
         Help
@@ -43,8 +43,7 @@ const Footer = () => {
           padding-left: 13px;
           padding-right: 5px;
         `}
-        // TODO: broken link
-        href="https://overture.bio/Documentation/DMS/For-admins/howtoinstalldms"
+        href={DMS_INSTALLATION_URL}
         target="_blank"
       >
         DMS

components/PageLayout.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { css } from '@emotion/core';
 
 import NavBar from './NavBar';
 import Footer from './Footer';
 import { PageHead } from './Head';
+import ErrorNotification from './ErrorNotification';
 
-const PageLayout = ({ children, subtitle }: { children: React.ReactNode; subtitle?: string }) => {
+const PageLayout = ({ children, subtitle }: { children: ReactNode; subtitle?: string }) => {
   return (
     <>
       <PageHead subtitle={subtitle}></PageHead>
@@ -26,4 +27,29 @@ const PageLayout = ({ children, subtitle }: { children: React.ReactNode; subtitl
   );
 };
 
+export const ErrorPageLayout = ({
+  children,
+  subtitle,
+  errorTitle,
+}: {
+  children: ReactNode;
+  subtitle: string;
+  errorTitle: string;
+}) => {
+  return (
+    <PageLayout subtitle={subtitle}>
+      <ErrorNotification
+        size="lg"
+        title={errorTitle}
+        styles={`
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        `}
+      >
+        {children}
+      </ErrorNotification>
+    </PageLayout>
+  );
+};
 export default PageLayout;

components/Root.tsx

@@ -3,8 +3,18 @@ import { ThemeProvider } from 'emotion-theming';
 import defaultTheme from './theme';
 import Head from './Head';
 import { AuthProvider } from '../global/hooks/useAuthContext';
+import { PageContext } from '../global/hooks/usePageContext';
+import { ClientSideGetInitialPropsContext } from '../global/utils/pages/types';
 
-const Root = ({ children, egoJwt }: { children: React.ReactElement; egoJwt?: string }) => {
+const Root = ({
+  children,
+  egoJwt,
+  pageContext,
+}: {
+  children: React.ReactElement;
+  egoJwt?: string;
+  pageContext: ClientSideGetInitialPropsContext;
+}) => {
   return (
     <>
       <style>
@@ -28,7 +38,9 @@ const Root = ({ children, egoJwt }: { children: React.ReactElement; egoJwt?: str
       </style>
       <Head />
       <AuthProvider egoJwt={egoJwt}>
-        <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>
+        <PageContext.Provider value={pageContext}>
+          <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>
+        </PageContext.Provider>
       </AuthProvider>
     </>
   );

components/pages/403.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { DMS_EMAIL_SETTING_URL } from '../../global/utils/constants';
+import providerMap from '../../global/utils/providerTypeMap';
+import StyledLink from '../Link';
+import { ErrorPageLayout } from '../PageLayout';
+import { ProviderType } from '../../global/types';
+import DMSAdminContact from '../DMSAdminContact';
+
+enum EgoLoginError {
+  NO_PRIMARY_EMAIL = 'no_primary_email',
+  ACCESS_DENIED = 'access_denied',
+}
+
+const errorSubtitles: { [k in EgoLoginError]: string } = {
+  no_primary_email: 'No Primary Email Found',
+  access_denied: 'Unable to log in',
+};
+
+const isValidProviderType = (providerType: ProviderType) =>
+  Object.values(ProviderType).includes(providerType);
+
+const Error403 = ({ query }: { query: { error_type: EgoLoginError; provider_type?: string } }) => {
+  const { error_type: errorType, provider_type: providerType } = query;
+  const providerTypeDisplayName = isValidProviderType(providerType as ProviderType)
+    ? providerMap[providerType as ProviderType].displayName
+    : 'identity provider';
+
+  switch (errorType) {
+    case EgoLoginError.NO_PRIMARY_EMAIL:
+      return (
+        <ErrorPageLayout
+          subtitle={`Error 403 - ${errorSubtitles[errorType]}`}
+          errorTitle={`${errorSubtitles[errorType]}`}
+        >
+          No primary email could be found on your {providerTypeDisplayName} profile. An email is
+          required to log in to the Data Explorer. Make sure an email exists on your{' '}
+          {providerTypeDisplayName} profile and that it is accessible by external parties (i.e. not
+          private). See{' '}
+          <StyledLink href={DMS_EMAIL_SETTING_URL} target="_blank">
+            here
+          </StyledLink>{' '}
+          for instructions on how to do this.
+        </ErrorPageLayout>
+      );
+    case EgoLoginError.ACCESS_DENIED:
+      return (
+        <ErrorPageLayout
+          subtitle={`Error 403 - ${errorSubtitles[errorType]}`}
+          errorTitle={`${errorSubtitles[errorType]}`}
+        >
+          You have denied the DMS access to your {providerTypeDisplayName} profile or cancelled your
+          log in attempt. Please try again and approve access for {providerTypeDisplayName}, or log
+          in with a different provider for which you would prefer to allow access.
+        </ErrorPageLayout>
+      );
+    default:
+      return (
+        <ErrorPageLayout
+          subtitle="Error 403 - Permission required"
+          errorTitle="Permission required"
+        >
+          You do not have permission to access the requested page. Please check that you have
+          entered the correct URL. If the problem persists, contact the <DMSAdminContact /> for
+          help.
+        </ErrorPageLayout>
+      );
+  }
+};
+
+export default Error403;

components/pages/404.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import DMSAdminContact from '../DMSAdminContact';
+import { ErrorPageLayout } from '../PageLayout';
+
+const Error404 = () => {
+  return (
+    <ErrorPageLayout errorTitle="404: Page not found" subtitle="Error 404 - Page not found">
+      The page you requested could not be found. Please check that you have entered the correct URL.
+      If the problem persists, contact the <DMSAdminContact /> for help.
+    </ErrorPageLayout>
+  );
+};
+
+export default Error404;

components/pages/500.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import DMSAdminContact from '../DMSAdminContact';
+import { ErrorPageLayout } from '../PageLayout';
+
+const Error500 = () => {
+  return (
+    <ErrorPageLayout errorTitle="500: Server Error" subtitle="Error 500 - Server Error">
+      The page you requested could not be accessed due to a server error. If the problem persists,
+      please contact the <DMSAdminContact /> for help.
+    </ErrorPageLayout>
+  );
+};
+
+export default Error500;

components/pages/explorer/RepoTable.tsx

@@ -72,15 +72,17 @@ const getTableStyle = (theme: typeof defaultTheme) => css`
         font-weight: normal;
 
         /* left-orient checkboxes */
-        & .dropDownContentElement {
-          margin-left: 15px;
-          padding-left: 8px;
-          position: relative;
-        }
-        & .dropDownContentElement input[type='checkbox' i] {
-          position: absolute;
-          left: -17px;
-          bottom: 4px;
+        &.multiple {
+          .dropDownContentElement {
+            margin-left: 15px;
+            padding-left: 8px;
+            position: relative;
+          }
+          & .dropDownContentElement input[type='checkbox' i] {
+            position: absolute;
+            left: -17px;
+            bottom: 4px;
+          }
         }
       }
     }
@@ -205,15 +207,24 @@ const getTableStyle = (theme: typeof defaultTheme) => css`
 `;
 
 const RepoTable = (props: PageContentProps) => {
-  const { NEXT_PUBLIC_ARRANGER_API, NEXT_PUBLIC_ARRANGER_PROJECT_ID } = getConfig();
+  const { NEXT_PUBLIC_ARRANGER_API, NEXT_PUBLIC_ARRANGER_PROJECT_ID, NEXT_PUBLIC_ARRANGER_MANIFEST_COLUMNS } = getConfig();
+  const manifestColumns = NEXT_PUBLIC_ARRANGER_MANIFEST_COLUMNS
+    .split(',').filter(field => field.trim()) // break it into arrays, and ensure there's no empty field names
+    .map(fieldName => fieldName.replace(/['"]+/g, '').trim());
+
+  const today = new Date().toISOString().slice(0,10).replace(/-/g,'');
+  const customExporters = [
+    {label: 'File Table', fileName: `data-explorer-table-export.${today}.tsv`}, // exports a TSV with what is displayed on the table (columns selected, etc.)
+    {label: 'File Manifest', fileName: `score-manifest.${today}.tsv` , columns: manifestColumns,}, // exports a TSV with the manifest columns
+  ];
 
   return (
     <div css={(theme) => getTableStyle(theme)}>
       <Table
         {...props}
         showFilterInput={false}
         columnDropdownText={'Columns'}
-        exportTSVText={'Download'}
+        exporter={customExporters}
         downloadUrl={urlJoin(NEXT_PUBLIC_ARRANGER_API, NEXT_PUBLIC_ARRANGER_PROJECT_ID, 'download')}
       />
     </div>

components/pages/explorer/getConfigError.tsx

@@ -7,6 +7,7 @@ import StyledLink from '../../Link';
 
 import { getConfig } from '../../../global/config';
 import { Project } from '.';
+import { GenericHelpMessage } from '../../DMSAdminContact';
 
 const ArrangerAdminUILink = () => {
   const { NEXT_PUBLIC_ARRANGER_ADMIN_UI } = getConfig();
@@ -84,7 +85,7 @@ const getConfigError = ({
           config.yaml
         </span>{' '}
         file during installation and have been used to create your project in the{' '}
-        <ArrangerAdminUILink />.
+        <ArrangerAdminUILink />. <GenericHelpMessage />
         <ul
           css={css`
             list-style-type: none;
@@ -119,7 +120,8 @@ const getConfigError = ({
         >
           config.yaml
         </span>{' '}
-        file during installation has been created in the <ArrangerAdminUILink />.
+        file during installation has been created in the <ArrangerAdminUILink />.{' '}
+        <GenericHelpMessage />
       </span>
     );
   }
@@ -147,7 +149,8 @@ const getConfigError = ({
         >
           config.yaml
         </span>{' '}
-        file during installation has been created in the <ArrangerAdminUILink />.
+        file during installation has been created in the <ArrangerAdminUILink />.{' '}
+        <GenericHelpMessage />
       </span>
     );
   }
@@ -191,7 +194,7 @@ const getConfigError = ({
           config.yaml
         </span>{' '}
         file during installation has been used to create your project in the <ArrangerAdminUILink />
-        .
+        . <GenericHelpMessage />
       </div>
     );
   }