feat(public studies): SJIP-1105 Add header

src/App.tsx

@@ -36,6 +36,7 @@ const Dashboard = loadable(() => import('views/Dashboard'), loadableProps);
 const Community = loadable(() => import('views/Community'), loadableProps);
 const CommunityMember = loadable(() => import('views/Community/Member'), loadableProps);
 const Studies = loadable(() => import('views/Studies'), loadableProps);
+const PublicStudies = loadable(() => import('views/PublicStudies'), loadableProps);
 const StudyEntity = loadable(() => import('views/StudyEntity'), loadableProps);
 const DataExploration = loadable(() => import('views/DataExploration'), loadableProps);
 const Variants = loadable(() => import('views/Variants'), loadableProps);
@@ -83,6 +84,7 @@ const App = () => {
                   />
                   <Route path={STATIC_ROUTES.LOGIN} element={<Login />} />
                   <Route path={DYNAMIC_ROUTES.ERROR} element={<ErrorPage />} />
+                  <Route path={STATIC_ROUTES.PUBLIC_STUDIES} element={<PublicStudies />} />
                   <Route
                     path={STATIC_ROUTES.DASHBOARD}
                     element={

src/components/Layout/Footer/index.tsx

@@ -1,3 +1,3 @@
-const Footer = () => <></>
+const Footer = () => <></>;
 
-export default Footer;
+export default Footer;

src/components/PublicLayout/Header/HeaderButton/index.module.css

@@ -0,0 +1,20 @@
+.headerBtn {
+  border: none;
+  color: var(--gray-8);
+  padding: 4px 8px;
+  margin: 0 5px;
+}
+
+.headerBtn.active,
+.headerBtn.active:focus,
+.headerBtn:hover {
+  background-color: var(--gray-4);
+  border: none;
+  color: var(--gray-8);
+}
+
+.headerBtn:focus {
+  background-color: transparent;
+  border: none;
+  color: var(--gray-8);
+}

src/components/PublicLayout/Header/HeaderButton/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button } from 'antd';
+import cx from 'classnames';
+
+import style from './index.module.css';
+
+interface OwnProps {
+  className?: string;
+  icon?: React.ReactElement;
+  isActive?: boolean;
+  onClick?: () => void;
+  title: string;
+}
+
+const HeaderButton = ({
+  className = '',
+  icon,
+  isActive = false,
+  onClick,
+  title,
+  ...props
+}: OwnProps) => (
+  <Button
+    className={cx(className, style.headerBtn, isActive ? style.active : '')}
+    onClick={(event) => {
+      event.currentTarget.blur();
+      onClick && onClick();
+    }}
+    icon={icon}
+    {...props}
+  >
+    {title}
+  </Button>
+);
+
+export default HeaderButton;

src/components/PublicLayout/Header/index.module.css

@@ -0,0 +1,59 @@
+.mainHeader {
+  height: var(--main-header-height);
+  background-color: var(--gray-1);
+  padding: 12px 32px;
+  box-shadow: 0 0 8px 0 rgba(38, 67, 111, 0.25);
+  z-index: 1000;
+}
+.mainHeader * {
+  overflow: unset;
+}
+.mainHeader div[class$='-header-heading'],
+.mainHeader span[class$='-header-heading-title'],
+.mainHeader div[class$='-header-heading-left'] {
+  height: 100%;
+}
+.mainHeader span[class$='-header-heading-title'] {
+  margin-right: 28px;
+}
+.mainHeader div[class$='-header-heading-left'] {
+  margin: 0;
+}
+.mainHeader span[class$='-header-heading-extra'] {
+  display: flex;
+  align-items: center;
+}
+.mainHeader .logo {
+  height: 100%;
+  width: auto;
+}
+.mainHeader .resourcesMenuTrigger {
+  color: var(--gray-8);
+  margin: 5px 8px;
+}
+.mainHeader .resourcesMenuTrigger .resources {
+  margin-right: 8px;
+}
+
+.linkText {
+  padding-left: 8px;
+}
+
+.dropdown {
+  min-width: 120px !important;
+}
+
+.connectionWrapper {
+  border-left: 1px solid var(--gray-4);
+  display: flex;
+  margin-left: 8px;
+  gap: 8px;
+}
+
+.loginBtn {
+  padding: 5px 8px;
+}
+
+.signUpBtn {
+  padding: 5px 16px;
+}

src/components/PublicLayout/Header/index.tsx

@@ -0,0 +1,182 @@
+import intl from 'react-intl-universal';
+import { useNavigate } from 'react-router';
+import {
+  DotChartOutlined,
+  DownOutlined,
+  FileSearchOutlined,
+  HomeOutlined,
+  LoginOutlined,
+  MailOutlined,
+  ReadOutlined,
+  TeamOutlined,
+} from '@ant-design/icons';
+import { Button, Dropdown, PageHeader, Typography } from 'antd';
+import { getFTEnvVarByKey } from 'helpers/EnvVariables';
+
+import ExternalLinkIcon from 'components/Icons/ExternalLinkIcon';
+import IncludeIcon from 'components/Icons/IncludeIcon';
+import LineStyleIcon from 'components/Icons/LineStyleIcon';
+import { trackVisitResources } from 'services/analytics';
+import { STATIC_ROUTES } from 'utils/routes';
+
+import HeaderButton from './HeaderButton';
+
+import style from './index.module.css';
+
+const iconSize = { width: 14, height: 14 };
+
+const { Text } = Typography;
+
+const Header = () => {
+  const navigate = useNavigate();
+  const ft_variant = getFTEnvVarByKey('VARIANT');
+  const ft_analyticsPage = getFTEnvVarByKey('ANALYTICS_PAGE');
+
+  return (
+    <PageHeader
+      title={<IncludeIcon className={style.logo} />}
+      subTitle={
+        <nav className={style.headerList}>
+          <HeaderButton
+            key="dashboard"
+            icon={<HomeOutlined />}
+            title={intl.get('layout.main.menu.dashboard')}
+          />
+          <HeaderButton
+            key="studies"
+            icon={<ReadOutlined />}
+            isActive={true}
+            title={intl.get('layout.main.menu.studies')}
+          />
+          <HeaderButton
+            key="explore-data"
+            icon={<FileSearchOutlined />}
+            title={intl.get('layout.main.menu.explore')}
+          />
+
+          {ft_variant === 'true' && (
+            <HeaderButton
+              key="variant-data"
+              icon={<LineStyleIcon />}
+              title={intl.get('layout.main.menu.variants')}
+            />
+          )}
+          {ft_analyticsPage === 'true' && (
+            <HeaderButton
+              key="analytics-data"
+              icon={<DotChartOutlined />}
+              title={intl.get('layout.main.menu.analysis')}
+            />
+          )}
+        </nav>
+      }
+      extra={[
+        <HeaderButton
+          key="community"
+          icon={<TeamOutlined />}
+          title={intl.get('layout.main.menu.community')}
+        />,
+        <Dropdown
+          overlayClassName={style.dropdown}
+          key="resources"
+          trigger={['click']}
+          menu={{
+            items: [
+              {
+                key: 'website',
+                disabled: false,
+                label: (
+                  <a
+                    href="#"
+                    onClick={() => {
+                      trackVisitResources('website');
+                      window.open('https://includedcc.org/', '_blank');
+                    }}
+                  >
+                    <ExternalLinkIcon {...iconSize} />
+                    <Text className={style.linkText}>{intl.get('layout.main.menu.website')}</Text>
+                  </a>
+                ),
+              },
+              {
+                key: 'help',
+                label: (
+                  <a
+                    href="#"
+                    onClick={() => {
+                      trackVisitResources('help');
+                      window.open('https://help.includedcc.org/docs/quick-start-guide', '_blank');
+                    }}
+                  >
+                    <ExternalLinkIcon {...iconSize} />
+                    <Text className={style.linkText}>{intl.get('layout.main.menu.help')}</Text>
+                  </a>
+                ),
+              },
+              {
+                key: 'forum',
+                label: (
+                  <a
+                    href="#"
+                    onClick={() => {
+                      trackVisitResources('forum');
+                      window.open('https://help.includedcc.org/discuss', '_blank');
+                    }}
+                  >
+                    <ExternalLinkIcon {...iconSize} />
+                    <Text className={style.linkText}>{intl.get('layout.main.menu.forum')}</Text>
+                  </a>
+                ),
+              },
+              {
+                type: 'divider',
+              },
+              {
+                key: 'contact',
+                label: (
+                  <a
+                    href="#"
+                    onClick={() => {
+                      trackVisitResources('contact');
+                      window.open(
+                        'https://app.smartsheet.com/b/form/514745159a004c2e987fff0aa16ceaac',
+                        '_blank',
+                      );
+                    }}
+                  >
+                    <MailOutlined />
+                    <Text className={style.linkText}>{intl.get('layout.main.menu.contact')}</Text>
+                  </a>
+                ),
+              },
+            ],
+          }}
+        >
+          <a className={style.resourcesMenuTrigger} onClick={(e) => e.preventDefault()} href="">
+            <span className={style.resources}>{intl.get('layout.main.menu.resources')}</span>
+            <DownOutlined />
+          </a>
+        </Dropdown>,
+        <div className={style.connectionWrapper}>
+          <HeaderButton
+            className={style.loginBtn}
+            key="community"
+            icon={<LoginOutlined />}
+            onClick={() => navigate(STATIC_ROUTES.LOGIN)}
+            title={intl.get('screen.loginPage.login')}
+          />
+          <Button
+            className={style.signUpBtn}
+            onClick={() => navigate(STATIC_ROUTES.LOGIN)}
+            type="primary"
+          >
+            {intl.get('screen.loginPage.signup')}
+          </Button>
+        </div>,
+      ]}
+      className={style.mainHeader}
+    />
+  );
+};
+
+export default Header;

src/components/PublicLayout/index.module.css

@@ -0,0 +1,9 @@
+.mainLayout {
+  height: 100vh;
+}
+.mainLayout .mainContent {
+  flex: 1;
+  min-height: unset;
+  height: 100%;
+  overflow: auto;
+}

src/components/PublicLayout/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ScrollContent from '@ferlab/ui/core/layout/ScrollContent';
+import { Layout as AntLayout } from 'antd';
+
+import { MAIN_SCROLL_WRAPPER_ID } from 'common/constants';
+
+import Header from './Header';
+
+import styles from './index.module.css';
+
+interface OwnProps {
+  children: React.ReactElement;
+}
+
+const PublicLayout = ({ children }: OwnProps) => (
+  <AntLayout className={styles.mainLayout}>
+    <Header />
+    <ScrollContent id={MAIN_SCROLL_WRAPPER_ID} className={styles.mainContent}>
+      <div id="content">{children}</div>
+    </ScrollContent>
+  </AntLayout>
+);
+
+export default PublicLayout;

src/utils/routes.ts

@@ -4,6 +4,7 @@ export enum STATIC_ROUTES {
   AUTH_REDIRECT = '/auth-redirect',
   DASHBOARD = '/dashboard',
   STUDIES = '/studies',
+  PUBLIC_STUDIES = '/public-studies',
   PROFILE_SETTINGS = '/profile/settings',
   COMMUNITY = '/community',
   ERROR = '/error',

src/views/PublicStudies/index.tsx

@@ -0,0 +1,9 @@
+import PublicLayout from 'components/PublicLayout';
+
+const PublicStudies = () => (
+  <PublicLayout>
+    <span></span>
+  </PublicLayout>
+);
+
+export default PublicStudies;