From 98dd831c40f2ee81447472b47b80a51404a4ed77 Mon Sep 17 00:00:00 2001
From: Jethary <jethary@opentrons.com>
Date: Mon, 12 Aug 2024 14:21:12 -0400
Subject: [PATCH] refactor(protocol-designer): add some styling to navigation
 bar

closes AUTH-624
---
 protocol-designer/src/Navbar.tsx              |  62 -----------
 protocol-designer/src/NavigationBar.tsx       | 102 ++++++++++++++++++
 protocol-designer/src/ProtocolRoutes.tsx      |   6 +-
 .../src/localization/en/shared.json           |   3 +
 4 files changed, 109 insertions(+), 64 deletions(-)
 delete mode 100644 protocol-designer/src/Navbar.tsx
 create mode 100644 protocol-designer/src/NavigationBar.tsx

diff --git a/protocol-designer/src/Navbar.tsx b/protocol-designer/src/Navbar.tsx
deleted file mode 100644
index 1c19f7f1605..00000000000
--- a/protocol-designer/src/Navbar.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react'
-import { NavLink } from 'react-router-dom'
-import styled from 'styled-components'
-
-import {
-  ALIGN_CENTER,
-  ALIGN_FLEX_START,
-  ALIGN_STRETCH,
-  COLORS,
-  DIRECTION_COLUMN,
-  FLEX_NONE,
-  Flex,
-  JUSTIFY_SPACE_BETWEEN,
-  SPACING,
-  LegacyStyledText,
-  TYPOGRAPHY,
-  DIRECTION_ROW,
-} from '@opentrons/components'
-
-import type { RouteProps } from './types'
-
-export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
-  const navRoutes = routes.filter(
-    ({ navLinkTo }: RouteProps) => navLinkTo != null
-  )
-  return (
-    <Flex
-      css={TYPOGRAPHY.h3Regular}
-      flexDirection={DIRECTION_COLUMN}
-      flex={FLEX_NONE}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
-      alignItems={ALIGN_CENTER}
-    >
-      <Flex
-        flexDirection={DIRECTION_ROW}
-        flex={FLEX_NONE}
-        alignItems={ALIGN_FLEX_START}
-        alignSelf={ALIGN_STRETCH}
-      >
-        {navRoutes.map(({ name, navLinkTo }: RouteProps) => (
-          <NavbarLink key={name} to={navLinkTo}>
-            <LegacyStyledText
-              as="h3"
-              margin={`${SPACING.spacing8} 0 ${SPACING.spacing8} ${SPACING.spacing12}`}
-            >
-              {name}
-            </LegacyStyledText>
-          </NavbarLink>
-        ))}
-      </Flex>
-    </Flex>
-  )
-}
-
-const NavbarLink = styled(NavLink)`
-  color: ${COLORS.black90};
-  text-decoration: none;
-  align-self: ${ALIGN_STRETCH};
-  &:hover {
-    color: ${COLORS.black70};
-  }
-`
diff --git a/protocol-designer/src/NavigationBar.tsx b/protocol-designer/src/NavigationBar.tsx
new file mode 100644
index 00000000000..2dbe633f7a2
--- /dev/null
+++ b/protocol-designer/src/NavigationBar.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { NavLink, useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
+import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import {
+  ALIGN_STRETCH,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+import { actions as loadFileActions } from './load-file'
+import type { ThunkDispatch, RouteProps } from './types'
+
+export function NavigationBar({
+  routes,
+}: {
+  routes: RouteProps[]
+}): JSX.Element {
+  const { t } = useTranslation('shared')
+  const navRoutes = routes.filter(
+    (route: RouteProps) => route.navLinkTo !== '/createNew'
+  )
+  const dispatch: ThunkDispatch<any> = useDispatch()
+  const navigate = useNavigate()
+  const loadFile = (
+    fileChangeEvent: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (window.confirm(t('confirm_import') as string)) {
+      dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
+      navigate('/overview')
+    }
+  }
+
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN}>
+      <Flex
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        padding={`${SPACING.spacing12} ${SPACING.spacing40}`}
+      >
+        <Flex gridGap={SPACING.spacing8} alignItems="center">
+          <StyledText desktopStyle="bodyLargeSemiBold">
+            {t('opentrons')}
+          </StyledText>
+          <StyledText desktopStyle="bodyLargeSemiBold" color={COLORS.purple50}>
+            {t('protocol_designer')}
+          </StyledText>
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey50}>
+            {t('version', { version: process.env.OT_PD_VERSION })}
+          </StyledText>
+        </Flex>
+        <Flex gridGap={SPACING.spacing40} alignItems="center">
+          <NavbarLink key="createNew" to={'/createNew'}>
+            <StyledText desktopStyle="bodyDefaultRegular">
+              {t('create_new_protocol')}
+            </StyledText>
+          </NavbarLink>
+          <StyledLabel>
+            <StyledText desktopStyle="bodyLargeRegular" color={COLORS.grey60}>
+              {t('import')}
+            </StyledText>
+            <input type="file" onChange={loadFile}></input>
+          </StyledLabel>
+        </Flex>
+      </Flex>
+      {/* TODO(ja, 8/12/24: delete later. Leaving access to other
+      routes at all times until we make breadcrumbs and protocol overview pg */}
+      <Flex
+        backgroundColor={COLORS.blue20}
+        padding={`${SPACING.spacing12} ${SPACING.spacing40}`}
+        gridGap={SPACING.spacing40}
+      >
+        TODO add breadcrumbs here
+        {navRoutes.map(({ name, navLinkTo }: RouteProps) => (
+          <NavbarLink key={name} to={navLinkTo}>
+            <StyledText desktopStyle="bodyDefaultRegular">{name}</StyledText>
+          </NavbarLink>
+        ))}
+      </Flex>
+    </Flex>
+  )
+}
+
+const NavbarLink = styled(NavLink)`
+  color: ${COLORS.black90};
+  text-decoration: none;
+  align-self: ${ALIGN_STRETCH};
+  &:hover {
+    color: ${COLORS.black70};
+  }
+`
+
+const StyledLabel = styled.label`
+  height: 20px;
+  cursor: pointer;
+  input[type='file'] {
+    display: none;
+  }
+`
diff --git a/protocol-designer/src/ProtocolRoutes.tsx b/protocol-designer/src/ProtocolRoutes.tsx
index f88a6aaa372..aaf455e0997 100644
--- a/protocol-designer/src/ProtocolRoutes.tsx
+++ b/protocol-designer/src/ProtocolRoutes.tsx
@@ -7,7 +7,7 @@ import { Liquids } from './pages/Liquids'
 import { StartingDeckState } from './pages/StartingDeckState'
 import { ProtocolSteps } from './pages/ProtocolSteps'
 import { CreateNewProtocolWizard } from './pages/CreateNewProtocolWizard'
-import { Navbar } from './Navbar'
+import { NavigationBar } from './NavigationBar'
 
 import type { RouteProps } from './types'
 
@@ -58,7 +58,9 @@ export function ProtocolRoutes(): JSX.Element {
 
   return (
     <>
-      {currentPath === LANDING_ROUTE ? null : <Navbar routes={pdRoutes} />}
+      {currentPath === LANDING_ROUTE ? null : (
+        <NavigationBar routes={pdRoutes} />
+      )}
       <Box width="100%">
         <Routes>
           {allRoutes.map(({ Component, path }: RouteProps) => {
diff --git a/protocol-designer/src/localization/en/shared.json b/protocol-designer/src/localization/en/shared.json
index dad5540bb9f..b5688b40577 100644
--- a/protocol-designer/src/localization/en/shared.json
+++ b/protocol-designer/src/localization/en/shared.json
@@ -20,10 +20,13 @@
   "no": "No",
   "one_channel": "1-Channel",
   "opentrons_flex": "Opentrons Flex",
+  "opentrons": "Opentrons",
   "ot2": "Opentrons OT-2",
+  "protocol_designer": "Protocol Designer",
   "remove": "remove",
   "step_count": "Step {{current}}",
   "step": "Step {{current}} / {{max}}",
+  "version": "Version # {{version}}",
   "welcome": "Welcome to Protocol Designer",
   "yes": "Yes"
 }