Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sc 23124 #829

Merged
merged 5 commits into from
Jan 16, 2024
Merged

Sc 23124 #829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
503b627
Add sandbox layout
daniellemaxwell Jan 15, 2024
21308a2
Remove absolute position from top bar
daniellemaxwell Jan 15, 2024
7af197e
Remove height from onboarding topbar
daniellemaxwell Jan 15, 2024
234724a
Add sandbox banner component
daniellemaxwell Jan 15, 2024
bc43de2
Remove sandbox layout from condition check for future implementation
daniellemaxwell Jan 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions web/beacon-app/src/components/layout/AppLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { PATH_DASHBOARD } from '@/application';
import { useFetchProfile } from '@/features/members/hooks/useFetchProfile';
import { isOnboardedMember } from '@/features/members/utils';

// import SandboxBanner from './SanboxBanner/SandboxBanner';
import Topbar from './Topbar';

type PageProps = {
Expand All @@ -28,6 +29,9 @@ function AppLayout({ children, Breadcrumbs }: PageProps) {
return (
<>
<Topbar Breadcrumbs={Breadcrumbs} isOnboarded={isOnboarded} profileData={loaderData} />
{/* TODO: Display SandboxBanner only to user's with the sandbox account type.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A condition will be added in a future story to display this component to the correct user.

<SandboxBanner />
*/}
<Container max={696} centered className="my-10 mt-8 px-4 xl:px-28">
{children}
</Container>
Expand Down
28 changes: 28 additions & 0 deletions web/beacon-app/src/components/layout/SanboxBanner/SandboxBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Trans } from '@lingui/macro';

import { EXTERNAL_LINKS } from '@/application';
import Alert from '@/components/common/Alert/Alert';

function SandboxBanner() {
return (
<Alert>
<div className="flex h-auto w-full flex-col items-center justify-center gap-x-4 bg-[#EBF5FF] py-6 text-center font-bold text-[#1D65A6] lg:flex-row">
<p>
<Trans>
You are using the Ensign Sandbox. Ready to deploy your models to production?
</Trans>
</p>
<a
href={EXTERNAL_LINKS.ENSIGN_PRICING}
target="_blank"
rel="noreferrer"
className="mt-4 rounded-md border border-white bg-[#1D65A6] px-4 py-1.5 text-white hover:bg-[#1D65A6/50] lg:mt-0"
>
<Trans>Upgrade</Trans>
</a>
</div>
</Alert>
);
}

export default SandboxBanner;
18 changes: 18 additions & 0 deletions web/beacon-app/src/components/layout/SandboxLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import MobileFooter from './MobileFooter';
import SandboxSidebar from './Sidebar/SandboxSidebar';

type SandboxLayoutProps = {
children?: React.ReactNode;
};

function SandboxLayout({ children }: SandboxLayoutProps) {
return (
<div className="flex flex-col md:pl-[250px]">
<SandboxSidebar className="hidden md:block" />
<div>{children}</div>
<MobileFooter />
</div>
);
}

export default SandboxLayout;
9 changes: 0 additions & 9 deletions web/beacon-app/src/components/layout/Topbar/Topbar.styles.ts
View file
Open in desktop

This file was deleted.

116 changes: 48 additions & 68 deletions web/beacon-app/src/components/layout/Topbar/Topbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
// import { Trans } from '@lingui/macro';
import { Trans } from '@lingui/macro';
import { memo, ReactNode, useId, useState } from 'react';

// import { EXTERNAL_LINKS } from '@/application';
// import { EXTERNAL_LINKS } from '@/application';
import { ProfileCard } from '@/components/common/ProfileCard/ProfileCard';
import { MenuDropdownMenu } from '@/components/MenuDropdown/MenuDropdown';
import { useDropdownMenu } from '@/components/MenuDropdown/useDropdownMenu';
Expand All @@ -15,7 +13,6 @@ import { useOrgStore } from '@/store';
import ScheduleOfficeHours from '../../ScheduleOfficeHours/ScheduleOfficeHours';
import MobileNav from '../MobileNav/MobileNav';
import ProfileAvatar from '../ProfileAvatar/ProfileAvatar';
import { Header } from './Topbar.styles';
type TopBarProps = {
Breadcrumbs?: ReactNode;
isOnboarded?: boolean;
Expand Down Expand Up @@ -47,71 +44,54 @@ function Topbar({ Breadcrumbs: CustomBreadcrumbs, isOnboarded, profileData }: To
});

return (
<>
<Header className="flex flex-col items-baseline justify-center gap-2 bg-[#1D65A6] md:ml-[250px] md:min-h-[60px] md:border-b md:bg-white">
{/* TODO: Display alert banner when user is on the sandbox. */}
{/* <Alert>
<div className="flex h-auto w-full flex-col items-center justify-center gap-x-4 bg-[#192E5B] py-6 text-center font-bold text-white lg:flex-row">
<p>
<Trans>
You are using the Ensign Sandbox. Ready to deploy your models to production?
</Trans>
</p>
<div className="mt-4 rounded-md border border-white bg-[#316D3C] py-1 px-4 lg:mt-0">
<a href={EXTERNAL_LINKS.ENSIGN_PRICING} target="_blank" rel="noreferrer">
<Trans>Upgrade</Trans>
</a>
<div className="flex flex-col items-baseline justify-center gap-2 overflow-auto bg-[#1D65A6] py-4 md:border-b md:bg-white">
<div className="flex w-[98%] justify-between py-2 xl:w-[92.5%]">
{isOnboarded ? (
<>
{CustomBreadcrumbs ? (
CustomBreadcrumbs
) : (
<Breadcrumbs separator={separator} className="ml-4 hidden md:block">
{items.map((item) => (
<Breadcrumbs.Item key={item + id} className="capitalize">
{item}
</Breadcrumbs.Item>
))}
</Breadcrumbs>
)}
<div className="flex space-x-4">
<ScheduleOfficeHours />
<MenuDropdownMenu
items={dropdownItems}
trigger={<ProfileAvatar name={profileData?.name} />}
onOpenChange={onOpenChange}
isOpen={isOpen}
data-cy="menu-dropdown"
/>
</div>
</div>
</Alert> */}
<div className="flex w-[98%] justify-between py-2 xl:w-[92.5%]">
{isOnboarded ? (
<>
{CustomBreadcrumbs ? (
CustomBreadcrumbs
) : (
<Breadcrumbs separator={separator} className="ml-4 hidden md:block">
{items.map((item) => (
<Breadcrumbs.Item key={item + id} className="capitalize">
{item}
</Breadcrumbs.Item>
))}
</Breadcrumbs>
)}
<div className="flex space-x-4">
<ScheduleOfficeHours />
<MenuDropdownMenu
items={dropdownItems}
trigger={<ProfileAvatar name={profileData?.name} />}
onOpenChange={onOpenChange}
isOpen={isOpen}
data-cy="menu-dropdown"
/>
</div>
</>
) : (
<>
<span></span>
<div className="flex h-20 items-center justify-end">
<ProfileCard
picture={profileData?.picture}
owner_name={profileData?.email}
cardSize="medium"
/>
<button
onClick={Logout}
className="ml-4 pb-1 font-bold text-primary"
data-cy="log-out-bttn"
>
Log Out
</button>
</div>
</>
)}
</div>
{!isOnboarded && <MobileNav />}
</Header>
</>
</>
) : (
<>
<span></span>
<div className="flex items-center justify-end">
<ProfileCard
picture={profileData?.picture}
owner_name={profileData?.email}
cardSize="medium"
/>
<button
onClick={Logout}
className="ml-4 pb-1 font-bold text-primary"
data-cy="log-out-bttn"
>
<Trans>Log Out</Trans>
</button>
</div>
</>
)}
</div>
{!isOnboarded && <MobileNav />}
</div>
);
}

Expand Down
5 changes: 3 additions & 2 deletions web/beacon-app/src/constants/dashLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import { TbPlayFootball } from 'react-icons/tb';
import { EXTERNAL_LINKS, PATH_DASHBOARD } from '@/application';
import { MenuItem } from '@/types/MenuItem';

export const SIDEBAR_WIDTH = 250;
export const TOPBAR_HEIGHT = 60;
/* TODO: Verify if styles are used and remove if not. */
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After setting these styles to 0, I didn't notice any issues while checking the site. I was experiencing some issues with hot reload being slow during development, so I plan to create a story to check again to be sure. After that, I'll know for sure if these styles can be removed. I decided to keep the variables here to make it easier to find in case I do need to set the styles again.

export const SIDEBAR_WIDTH = 0;
export const TOPBAR_HEIGHT = 0;

export const menuItems: MenuItem[] = [
{
Expand Down