Merge pull request #90 from overture-stack/rc/0.8.0

🔖 Rc/0.8.0

Dockerfile

@@ -17,6 +17,8 @@ WORKDIR /usr/src
 
 COPY . /usr/src
 
+VOLUME [ "/usr/src/public/static/dms_user_assets" ]
+
 RUN npm ci
 RUN npm run build
 

components/ErrorNotification.tsx

@@ -0,0 +1,168 @@
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import React from 'react';
+import IconButton from './IconButton';
+
+import defaultTheme from './theme';
+import { Error as ErrorIcon } from './theme/icons';
+import DismissIcon from './theme/icons/dismiss';
+
+type ErrorSize = 'lg' | 'md' | 'sm';
+
+const ERROR_SIZES = {
+  LG: 'lg' as ErrorSize,
+  MD: 'md' as ErrorSize,
+  SM: 'sm' as ErrorSize,
+};
+
+const getIconDimensions = (size: ErrorSize) =>
+  ({
+    [ERROR_SIZES.LG]: { width: 26, height: 27 },
+    [ERROR_SIZES.MD]: { width: 21, height: 22 },
+    [ERROR_SIZES.SM]: { width: 18, height: 18 },
+  }[size]);
+
+const getContainerStyles = (size: ErrorSize) =>
+  ({
+    [ERROR_SIZES.LG]: `
+      padding: 1rem 2rem;
+      line-height: 26px;
+    `,
+    [ERROR_SIZES.MD]: `
+      padding: 1rem;
+      line-height: 24px;
+    `,
+    [ERROR_SIZES.SM]: `
+      padding: 0.5rem;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+    `,
+  }[size]);
+
+const ErrorContentContainer = styled('div')`
+  ${({ theme, size }: { theme: typeof defaultTheme; size: ErrorSize }) => css`
+    border: 1px solid ${theme.colors.error_2};
+    border-radius: 5px;
+    ${theme.shadow.default};
+    ${theme.typography.subheading};
+    font-weight: normal;
+    background-color: ${theme.colors.error_1};
+    color: ${theme.colors.accent_dark};
+    ${getContainerStyles(size)};
+    max-width: 600px;
+  `}
+`;
+
+const getIconStyle = (size: ErrorSize) =>
+  ({
+    [ERROR_SIZES.LG]: 'padding-right: 15px',
+    [ERROR_SIZES.MD]: 'padding-right: 15px',
+    [ERROR_SIZES.SM]: '',
+  }[size]);
+
+const getTitleStyle = (size: ErrorSize) =>
+  ({
+    [ERROR_SIZES.LG]: `
+      margin: 0.5rem 0 1rem;
+      font-size: 24px;
+      line-height: 38px;
+    `,
+    [ERROR_SIZES.MD]: `
+      margin: 0rem;
+      padding-bottom: 0.4rem;
+      font-size: 18px;
+      line-height: 20px;
+    `,
+    [ERROR_SIZES.SM]: '',
+  }[size]);
+
+const ErrorTitle = styled('h1')`
+  ${({ size }: { size: ErrorSize }) => css`
+    display: flex;
+    align-items: center;
+    ${getTitleStyle(size)}
+  `}
+`;
+
+const ErrorNotification = ({
+  children,
+  title,
+  size,
+  styles = '',
+  onDismiss,
+  dismissible = false,
+}: {
+  children: React.ReactNode;
+  title?: string;
+  size: ErrorSize;
+  styles?: string;
+  onDismiss?: Function;
+  dismissible?: boolean;
+}) => (
+  <div
+    css={css`
+      display: flex;
+      flex: 1;
+      ${styles}
+    `}
+  >
+    <ErrorContentContainer size={size}>
+      {title ? (
+        <div>
+          <ErrorTitle size={size}>
+            <ErrorIcon
+              {...getIconDimensions(size)}
+              style={css`
+                ${getIconStyle(size)}
+              `}
+            />{' '}
+            {title}
+            {dismissible && (
+              <DismissIcon height={15} width={15} fill={defaultTheme.colors.error_dark} />
+            )}
+          </ErrorTitle>
+          {children}
+        </div>
+      ) : (
+        <div
+          css={css`
+            display: flex;
+            flex-direction: row;
+          `}
+        >
+          <span>
+            <ErrorIcon
+              {...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>
+          {dismissible && (
+            <IconButton
+              onClick={(e: React.MouseEvent) => (onDismiss ? onDismiss() : () => null)}
+              Icon={DismissIcon}
+              height={12}
+              width={12}
+              fill={defaultTheme.colors.error_dark}
+            />
+          )}
+        </div>
+      )}
+    </ErrorContentContainer>
+  </div>
+);
+
+export default ErrorNotification;

components/IconButton.tsx

@@ -0,0 +1,29 @@
+import { css } from '@emotion/core';
+import { IconProps } from './theme/icons/types';
+
+const IconButton = ({
+  Icon,
+  fill,
+  height,
+  width,
+  onClick = () => {},
+}: {
+  Icon: React.ComponentType<IconProps>;
+  fill: string;
+  height: number;
+  width: number;
+  onClick: React.MouseEventHandler;
+}) => {
+  return (
+    <span
+      onClick={onClick}
+      css={css`
+        cursor: pointer;
+      `}
+    >
+      <Icon height={height} width={width} fill={fill} />
+    </span>
+  );
+};
+
+export default IconButton;

components/Loader.tsx

@@ -0,0 +1,28 @@
+import { css } from '@emotion/core';
+
+// TODO: this is a placeholder Loader
+const Loader = () => {
+  return (
+    <div
+      css={(theme) => css`
+        border: 14px solid ${theme.colors.grey_3};
+        border-top: 14px solid ${theme.colors.secondary_dark};
+        border-radius: 50%;
+        width: 120px;
+        height: 120px;
+        animation: spin 2s linear infinite;
+
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      `}
+    />
+  );
+};
+
+export default Loader;

components/NavBar.tsx

@@ -9,17 +9,30 @@ import useAuthContext from '../global/hooks/useAuthContext';
 import { StyledLinkAsButton, InternalLink as Link } from './Link';
 import { useTheme } from 'emotion-theming';
 import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants';
+import { getConfig } from '../global/config';
 
-const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System', labIcon }) => {
+const NavBar: React.ComponentType = () => {
   const { token } = useAuthContext();
   const router = useRouter();
   const theme: typeof defaultTheme = useTheme();
 
+  const { NEXT_PUBLIC_LAB_NAME, NEXT_PUBLIC_LOGO_FILENAME, NEXT_PUBLIC_BASE_PATH } = getConfig();
+
   const activeLinkStyle = `
     background-color: ${theme.colors.grey_2};
     color: ${theme.colors.accent2_dark};
   `;
 
+  const labIcon = NEXT_PUBLIC_LOGO_FILENAME ? (
+    <img
+      src={`${NEXT_PUBLIC_BASE_PATH}/static/dms_user_assets/${NEXT_PUBLIC_LOGO_FILENAME}`}
+      alt={NEXT_PUBLIC_LAB_NAME}
+      width={theme.dimensions.labIcon.width}
+      height={theme.dimensions.labIcon.height}
+    />
+  ) : (
+    <OvertureLogo width={theme.dimensions.labIcon.width} height={theme.dimensions.labIcon.height} />
+  );
   return (
     <div
       css={(theme: typeof defaultTheme) => css`
@@ -53,17 +66,14 @@ const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System',
               color: ${theme.colors.accent_dark};
             `}
           >
-            {labIcon || <OvertureLogo width={35} height={35} />}
-            {/* set to default until labname config is implemented */}
-            {labName && (
-              <span
-                css={css`
-                  padding-left: 10px;
-                `}
-              >
-                {labName}
-              </span>
-            )}
+            {labIcon}
+            <span
+              css={css`
+                padding-left: 10px;
+              `}
+            >
+              {NEXT_PUBLIC_LAB_NAME}
+            </span>
           </a>
         </Link>
       </div>