From 9bec6f5c81bc5617f89ec124269d53b8877b0a63 Mon Sep 17 00:00:00 2001 From: Dave Bauman Date: Thu, 20 Jan 2022 15:56:24 -0500 Subject: [PATCH] feat: Mobile-responsive Insight Viewer --- README.md | 2 +- .../insight-skeleton/insight-skeleton.tsx | 74 ++++- .../components/action-bar/action-bar.tsx | 212 ++++++++++++++ .../insight-header/insight-header.tsx | 254 +++-------------- .../insight-infobar/insight-infobar.tsx | 120 ++++++++ .../navigation-buttons/navigation-buttons.tsx | 68 +++++ .../components/page-header/page-header.tsx | 260 ++++-------------- .../insight-viewer/insight-viewer.tsx | 8 +- .../components/insight-viewer/page-viewer.tsx | 105 +------ .../src/pages/main-page/main-page.tsx | 6 +- 10 files changed, 585 insertions(+), 524 deletions(-) create mode 100644 packages/frontend/src/pages/insight-page/components/insight-viewer/components/action-bar/action-bar.tsx create mode 100644 packages/frontend/src/pages/insight-page/components/insight-viewer/components/insight-infobar/insight-infobar.tsx create mode 100644 packages/frontend/src/pages/insight-page/components/insight-viewer/components/navigation-buttons/navigation-buttons.tsx diff --git a/README.md b/README.md index 8c2c0a472..e8d4b76f6 100644 --- a/README.md +++ b/README.md @@ -112,4 +112,4 @@ npm run license:thirdparty This project is available under the Apache 2.0 License. -Copyright 2020-2021 Expedia, Inc. +Copyright 2020-2022 Expedia, Inc. diff --git a/packages/frontend/src/pages/insight-page/components/insight-skeleton/insight-skeleton.tsx b/packages/frontend/src/pages/insight-page/components/insight-skeleton/insight-skeleton.tsx index 29eecbbbe..8ba21be86 100644 --- a/packages/frontend/src/pages/insight-page/components/insight-skeleton/insight-skeleton.tsx +++ b/packages/frontend/src/pages/insight-page/components/insight-skeleton/insight-skeleton.tsx @@ -19,20 +19,29 @@ import { Flex, HStack, Skeleton, VStack } from '@chakra-ui/react'; export const InsightSkeleton = () => { return ( <> - + {/* Desktop-only */} + {/* Header */} + {/* Item type icon */} + {/* Item name */} + {/* Spacer */} - - - - - + + + + + + + + + + @@ -72,13 +81,60 @@ export const InsightSkeleton = () => { - - - + + + + + + + + + + + {/* Mobile-only */} + + {/* Header */} + + + + + + + + {/* Item type icon */} + + + {/* Item name */} + + + + + + + + + + + + {/* Insight */} + + + + + + + + + + + + + + ); }; diff --git a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/action-bar/action-bar.tsx b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/action-bar/action-bar.tsx new file mode 100644 index 000000000..763b1e6cc --- /dev/null +++ b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/action-bar/action-bar.tsx @@ -0,0 +1,212 @@ +/** + * Copyright 2022 Expedia, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + Box, + Button, + HStack, + Icon, + IconButton, + Menu, + MenuButton, + MenuDivider, + MenuGroup, + MenuItem, + MenuList, + useDisclosure, + useToast +} from '@chakra-ui/react'; +import { useSelector } from 'react-redux'; +import { Link as RouterLink } from 'react-router-dom'; +import titleize from 'titleize'; +import { gql, useMutation } from 'urql'; + +import { InsightCollaboratorsModal } from '../../../../../../components/insight-collaborators-modal/insight-collaborators-modal'; +import { LikeButton } from '../../../../../../components/like-button/like-button'; +import { LikedByTooltip } from '../../../../../../components/liked-by-tooltip/liked-by-tooltip'; +import { NumberIconButton } from '../../../../../../components/number-icon-button/number-icon-button'; +import { Insight, User } from '../../../../../../models/generated/graphql'; +import { iconFactory, iconFactoryAs } from '../../../../../../shared/icon-factory'; +import { RootState } from '../../../../../../store/store'; +import { CloneDialog } from '../clone-dialog/clone-dialog'; +import { DeleteDialog } from '../delete-dialog/delete-dialog'; + +const SYNC_INSIGHT_MUTATION = gql` + mutation SyncInsight($insightId: ID!) { + syncInsight(insightId: $insightId) { + id + } + } +`; + +interface Props { + insight: Insight; + isExport: boolean; + nextInsight?: Pick; + previousInsight?: Pick; + onClone: () => Promise; + onDelete: () => Promise; + onFetchLikedBy: (insightId?: string) => Promise; + onLike: (liked: boolean) => Promise; +} + +export const ActionBar = ({ + insight, + nextInsight, + previousInsight, + isExport, + onClone, + onDelete, + onFetchLikedBy, + onLike +}: Props) => { + const { loggedIn } = useSelector((state: RootState) => state.user); + + const toast = useToast(); + const [, sync] = useMutation(SYNC_INSIGHT_MUTATION); + + const syncInsight = async () => { + const result = await sync({ + insightId: insight.id + }); + + if (result.error) { + toast({ + position: 'bottom-right', + title: 'Unable to sync.', + status: 'error', + duration: 9000, + isClosable: true + }); + return; + } + + toast({ + position: 'bottom-right', + title: 'Insight synced.', + status: 'success', + duration: 3000, + isClosable: true + }); + }; + + // Collaborators modal + const { isOpen: isCollaboratorsOpen, onOpen: onCollaboratorsOpen, onClose: onCollaboratorsClose } = useDisclosure(); + + // Clone dialog + const { isOpen: isCloneOpen, onOpen: onCloneOpen, onClose: onCloneClose } = useDisclosure(); + + // Delete dialog + const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure(); + + // This indicates that the upstream repository is missing + // We can still show the cached insight, but with a warning message + const isMissing = insight.repository.isMissing; + + // If the resource is missing we can't edit or clone. + const canEdit = !isMissing; + const canClone = !isMissing; + + const likeLabel = insight.viewerHasLiked ? 'Unlike this Insight' : 'Like this Insight'; + + return ( + <> + + + + + + onFetchLikedBy(insight.id)} + > + + + + + + + + + + + + + + + Clone {titleize(insight.itemType)} + + + + + + + + Activity + + + + + + View JSON + + + + + + + + Sync Now + + + {loggedIn && ( + <> + + + + + Collaborators + + + + + Delete {titleize(insight.itemType)} + + + + )} + + + + + + + + + + + + + + + ); +}; diff --git a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/insight-header/insight-header.tsx b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/insight-header/insight-header.tsx index abb2117dd..f16674290 100644 --- a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/insight-header/insight-header.tsx +++ b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/insight-header/insight-header.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2021 Expedia, Inc. + * Copyright 2022 Expedia, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,46 +14,12 @@ * limitations under the License. */ -import { - Box, - Button, - Flex, - Heading, - HStack, - Icon, - IconButton, - Menu, - MenuButton, - MenuGroup, - MenuItem, - MenuList, - useDisclosure, - useToast, - MenuDivider -} from '@chakra-ui/react'; -import { useSelector } from 'react-redux'; -import { Link as RouterLink } from 'react-router-dom'; -import { gql, useMutation } from 'urql'; +import { Box, Flex, Heading, HStack, Stack } from '@chakra-ui/react'; -import { InsightCollaboratorsModal } from '../../../../../../components/insight-collaborators-modal/insight-collaborators-modal'; import { ItemTypeIcon } from '../../../../../../components/item-type-icon/item-type-icon'; -import { LikeButton } from '../../../../../../components/like-button/like-button'; -import { LikedByTooltip } from '../../../../../../components/liked-by-tooltip/liked-by-tooltip'; -import { Link } from '../../../../../../components/link/link'; -import { NumberIconButton } from '../../../../../../components/number-icon-button/number-icon-button'; import { Insight, User } from '../../../../../../models/generated/graphql'; -import { iconFactory, iconFactoryAs } from '../../../../../../shared/icon-factory'; -import { RootState } from '../../../../../../store/store'; -import { CloneDialog } from '../clone-dialog/clone-dialog'; -import { DeleteDialog } from '../delete-dialog/delete-dialog'; - -const SYNC_INSIGHT_MUTATION = gql` - mutation SyncInsight($insightId: ID!) { - syncInsight(insightId: $insightId) { - id - } - } -`; +import { ActionBar } from '../action-bar/action-bar'; +import { NavigationButtons } from '../navigation-buttons/navigation-buttons'; interface Props { insight: Insight; @@ -76,190 +42,58 @@ export const InsightHeader = ({ onFetchLikedBy, onLike }: Props) => { - const { loggedIn } = useSelector((state: RootState) => state.user); - - const toast = useToast(); - const [, sync] = useMutation(SYNC_INSIGHT_MUTATION); - - // Collaborators modal - const { isOpen: isCollaboratorsOpen, onOpen: onCollaboratorsOpen, onClose: onCollaboratorsClose } = useDisclosure(); - - // Clone dialog - const { isOpen: isCloneOpen, onOpen: onCloneOpen, onClose: onCloneClose } = useDisclosure(); - - // Delete dialog - const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure(); - if (insight == null) { return ; } - const syncInsight = async () => { - const result = await sync({ - insightId: insight.id - }); - - if (result.error) { - toast({ - position: 'bottom-right', - title: 'Unable to sync.', - status: 'error', - duration: 9000, - isClosable: true - }); - return; - } - - toast({ - position: 'bottom-right', - title: 'Insight synced.', - status: 'success', - duration: 3000, - isClosable: true - }); - }; - - // This indicates that the upstream repository is missing - // We can still show the cached insight, but with a warning message - const isMissing = insight.repository.isMissing; - - // If the resource is missing we can't edit or clone. - const canEdit = !isMissing; - const canClone = !isMissing; - - const likeLabel = insight.viewerHasLiked ? 'Unlike this Insight' : 'Like this Insight'; - - const showPreviousAndNextButtons = previousInsight || nextInsight; - const nextInsightLink = nextInsight ? `/${nextInsight?.itemType}/${nextInsight?.fullName}` : ''; - const previousInsightLink = previousInsight ? `/${previousInsight?.itemType}/${previousInsight?.fullName}` : ''; - return ( <> - - - - {insight.name} - - - - {showPreviousAndNextButtons && ( - - - - )} - {showPreviousAndNextButtons && ( - - - + + + {/* Mobile-only */} + {!isExport && ( + )} - - {!isExport && ( - - - - - - onFetchLikedBy(insight.id)} - placement="left" - > - - - - - - - - - - - - - - - Clone Insight - - - - - - - - Activity - - - - - - View JSON - - - - - - - - Sync Now - - - {loggedIn && ( - <> - - - - - Collaborators - - - - - Delete Insight - - - - )} - - - - - - + + + + {insight.name} + + + + {!isExport && ( + <> + {/* Desktop-only */} + + + + )} - + - - - - - - ); }; diff --git a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/insight-infobar/insight-infobar.tsx b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/insight-infobar/insight-infobar.tsx new file mode 100644 index 000000000..a6e1ab9f6 --- /dev/null +++ b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/insight-infobar/insight-infobar.tsx @@ -0,0 +1,120 @@ +/** + * Copyright 2022 Expedia, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + Collapse, + Flex, + HStack, + IconButton, + Stack, + StackProps, + Tag, + TagLabel, + Text, + VStack, + useDisclosure, + Wrap, + WrapItem +} from '@chakra-ui/react'; +import { DateTime } from 'luxon'; + +import { InsightAuthor } from '../../../../../../components/insight-author/insight-author'; +import { InsightTag } from '../../../../../../components/insight-tag/insight-tag'; +import { Link } from '../../../../../../components/link/link'; +import { SidebarHeading } from '../../../../../../components/sidebar-heading/sidebar-heading'; +import { TeamTag } from '../../../../../../components/team-tag/team-tag'; +import { Insight } from '../../../../../../models/generated/graphql'; +import { formatDateIntl, formatRelativeIntl } from '../../../../../../shared/date-utils'; +import { iconFactoryAs } from '../../../../../../shared/icon-factory'; +import { GitHubButton } from '../github-button/github-button'; +import { ShareMenu } from '../share-menu/share-menu'; + +export const InsightInfobar = ({ insight, ...props }: { insight: Insight } & StackProps) => { + const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false }); + + return ( + + + + + + {insight.metadata?.team && } + + {insight.authors.edges.map(({ node: author }) => ( + + ))} + + {insight.tags?.length > 0 && insight.tags.map((tag) => )} + + + + + + + + + + + + + {insight.metadata?.publishedDate != null && ( + + Published Date + {formatDateIntl(insight.metadata.publishedDate, DateTime.DATE_MED)} + + )} + + + Last Updated + + {formatDateIntl(insight.updatedAt, DateTime.DATETIME_MED)} ({formatRelativeIntl(insight.updatedAt)}) + + + + + Created + + {formatDateIntl(insight.createdAt, DateTime.DATETIME_MED)} ({formatRelativeIntl(insight.createdAt)}) + + + + + {insight.files && insight.files.length > 0 && ( + + Files + {insight.files.map((file) => { + return ( + + + {file.path} + + + ); + })} + + )} + + + + ); +}; diff --git a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/navigation-buttons/navigation-buttons.tsx b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/navigation-buttons/navigation-buttons.tsx new file mode 100644 index 000000000..a0577c522 --- /dev/null +++ b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/navigation-buttons/navigation-buttons.tsx @@ -0,0 +1,68 @@ +/** + * Copyright 2022 Expedia, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { BoxProps, HStack, IconButton, Tooltip } from '@chakra-ui/react'; +import titleize from 'titleize'; + +import { Link } from '../../../../../../components/link/link'; +import { Insight } from '../../../../../../models/generated/graphql'; +import { iconFactoryAs } from '../../../../../../shared/icon-factory'; + +interface Props { + insight: Insight; + nextInsight?: Pick; + previousInsight?: Pick; +} + +export const NavigationButtons = ({ insight, nextInsight, previousInsight, ...boxProps }: Props & BoxProps) => { + const showPreviousAndNextButtons = previousInsight || nextInsight; + const nextInsightLink = nextInsight ? `/${nextInsight?.itemType}/${nextInsight?.fullName}` : ''; + const previousInsightLink = previousInsight ? `/${previousInsight?.itemType}/${previousInsight?.fullName}` : ''; + + return ( + + {showPreviousAndNextButtons && ( + <> + + + + + + + + + + + + )} + + ); +}; diff --git a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/page-header/page-header.tsx b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/page-header/page-header.tsx index 89a0d7960..cf5eb7739 100644 --- a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/page-header/page-header.tsx +++ b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/page-header/page-header.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2021 Expedia, Inc. + * Copyright 2022 Expedia, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,49 +14,14 @@ * limitations under the License. */ -import { - Box, - Button, - Heading, - HStack, - Icon, - IconButton, - Menu, - MenuButton, - MenuGroup, - MenuItem, - MenuList, - Text, - VStack, - useDisclosure, - useToast, - MenuDivider -} from '@chakra-ui/react'; -import { useSelector } from 'react-redux'; -import { Link as RouterLink } from 'react-router-dom'; -import { gql, useMutation } from 'urql'; +import { Box, Heading, HStack, Stack, Text, VStack } from '@chakra-ui/react'; -import { InsightCollaboratorsModal } from '../../../../../../components/insight-collaborators-modal/insight-collaborators-modal'; import { ItemTypeIcon } from '../../../../../../components/item-type-icon/item-type-icon'; -import { LikeButton } from '../../../../../../components/like-button/like-button'; -import { LikedByTooltip } from '../../../../../../components/liked-by-tooltip/liked-by-tooltip'; -import { Link } from '../../../../../../components/link/link'; import { Linkify } from '../../../../../../components/linkify/linkify'; -import { NumberIconButton } from '../../../../../../components/number-icon-button/number-icon-button'; import { Insight, User } from '../../../../../../models/generated/graphql'; import { getInsightGradient } from '../../../../../../shared/gradient'; -import { iconFactory, iconFactoryAs } from '../../../../../../shared/icon-factory'; -import { RootState } from '../../../../../../store/store'; -import { CloneDialog } from '../clone-dialog/clone-dialog'; -import { DeleteDialog } from '../delete-dialog/delete-dialog'; - -const SYNC_INSIGHT_MUTATION = gql` - mutation SyncInsight($insightId: ID!) { - syncInsight(insightId: $insightId) { - id - } - } -`; +import { ActionBar } from '../action-bar/action-bar'; +import { NavigationButtons } from '../navigation-buttons/navigation-buttons'; interface Props { insight: Insight; @@ -79,178 +44,51 @@ export const PageHeader = ({ onFetchLikedBy, onLike }: Props) => { - const { loggedIn } = useSelector((state: RootState) => state.user); - - const toast = useToast(); - const [, sync] = useMutation(SYNC_INSIGHT_MUTATION); - - // Collaborators modal - const { isOpen: isCollaboratorsOpen, onOpen: onCollaboratorsOpen, onClose: onCollaboratorsClose } = useDisclosure(); - - // Clone dialog - const { isOpen: isCloneOpen, onOpen: onCloneOpen, onClose: onCloneClose } = useDisclosure(); - - // Delete dialog - const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure(); - if (insight == null) { return ; } - const syncInsight = async () => { - const result = await sync({ - insightId: insight.id - }); - - if (result.error) { - toast({ - position: 'bottom-right', - title: 'Unable to sync.', - status: 'error', - duration: 9000, - isClosable: true - }); - return; - } - - toast({ - position: 'bottom-right', - title: 'Insight synced.', - status: 'success', - duration: 3000, - isClosable: true - }); - }; - - // This indicates that the upstream repository is missing - // We can still show the cached insight, but with a warning message - const isMissing = insight.repository.isMissing; - - // If the resource is missing we can't edit or clone. - const canEdit = !isMissing; - const canClone = !isMissing; - - const likeLabel = insight.viewerHasLiked ? 'Unlike this Page' : 'Like this Page'; - - const showPreviousAndNextButtons = previousInsight || nextInsight; - const nextInsightLink = nextInsight ? `/${nextInsight?.itemType}/${nextInsight?.fullName}` : ''; - const previousInsightLink = previousInsight ? `/${previousInsight?.itemType}/${previousInsight?.fullName}` : ''; - return ( <> - + {!isExport && ( - - - - - - {showPreviousAndNextButtons && ( - - - - )} - {showPreviousAndNextButtons && ( - - - - )} - - - - - - - onFetchLikedBy(insight.id)} + + {/* Mobile-only */} + + + + + + {/* Desktop-only */} + - + - - - - - - - - - - - - - - Clone Page - - - - - - - - Activity - - - - - - View JSON - - - - - - - - Sync Now - - - {loggedIn && ( - <> - - - - - Collaborators - - - - - Delete Page - - - - )} - - - - - - + - + )} - + {insight.name} @@ -259,13 +97,27 @@ export const PageHeader = ({ {insight.description} - - - - - - + {!isExport && ( + // Mobile-only + + + + )} + ); }; diff --git a/packages/frontend/src/pages/insight-page/components/insight-viewer/insight-viewer.tsx b/packages/frontend/src/pages/insight-page/components/insight-viewer/insight-viewer.tsx index 8d9fa346a..de9a90a28 100644 --- a/packages/frontend/src/pages/insight-page/components/insight-viewer/insight-viewer.tsx +++ b/packages/frontend/src/pages/insight-page/components/insight-viewer/insight-viewer.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2021 Expedia, Inc. + * Copyright 2022 Expedia, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -27,6 +27,7 @@ import { InsightActivity } from './components/insight-activity/insight-activity' import { InsightComments } from './components/insight-comments/insight-comments'; import { InsightFileViewer } from './components/insight-file-viewer/insight-file-viewer'; import { InsightHeader } from './components/insight-header/insight-header'; +import { InsightInfobar } from './components/insight-infobar/insight-infobar'; import { InsightSidebar } from './components/insight-sidebar/insight-sidebar'; import { ItemTypeViewerProps } from './item-type-viewer'; import { PageViewer } from './page-viewer'; @@ -105,6 +106,9 @@ export const InsightViewer = ({ {isExport && } + {/* Mobile-only */} + {!isExport && } + @@ -157,6 +161,7 @@ export const InsightViewer = ({ {isExport && } + {/* Desktop-only */} {!isExport && ( )} diff --git a/packages/frontend/src/pages/insight-page/components/insight-viewer/page-viewer.tsx b/packages/frontend/src/pages/insight-page/components/insight-viewer/page-viewer.tsx index 53b2f1c77..7d22599b5 100644 --- a/packages/frontend/src/pages/insight-page/components/insight-viewer/page-viewer.tsx +++ b/packages/frontend/src/pages/insight-page/components/insight-viewer/page-viewer.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2021 Expedia, Inc. + * Copyright 2022 Expedia, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,47 +14,26 @@ * limitations under the License. */ -import { - Collapse, - Flex, - IconButton, - Tag, - TagLabel, - Text, - useDisclosure, - VStack, - Wrap, - WrapItem -} from '@chakra-ui/react'; -import { DateTime } from 'luxon'; +import { Flex, VStack } from '@chakra-ui/react'; import { Helmet } from 'react-helmet'; -import { Routes, Route, Link } from 'react-router-dom'; +import { Routes, Route } from 'react-router-dom'; import { Alert } from '../../../../components/alert/alert'; import { FileViewer } from '../../../../components/file-viewer/file-viewer'; -import { InsightAuthor } from '../../../../components/insight-author/insight-author'; -import { InsightTag } from '../../../../components/insight-tag/insight-tag'; -import { SidebarHeading } from '../../../../components/sidebar-heading/sidebar-heading'; -import { TeamTag } from '../../../../components/team-tag/team-tag'; -import { formatDateIntl, formatRelativeIntl } from '../../../../shared/date-utils'; -import { iconFactoryAs } from '../../../../shared/icon-factory'; import { ExportFooter } from './components/export-footer/export-footer'; import { ExportHeader } from './components/export-header/export-header'; -import { GitHubButton } from './components/github-button/github-button'; import { InsightActivity } from './components/insight-activity/insight-activity'; import { InsightComments } from './components/insight-comments/insight-comments'; import { InsightFileViewer } from './components/insight-file-viewer/insight-file-viewer'; +import { InsightInfobar } from './components/insight-infobar/insight-infobar'; import { PageHeader } from './components/page-header/page-header'; -import { ShareMenu } from './components/share-menu/share-menu'; import { ItemTypeViewerProps } from './item-type-viewer'; /** * Main pane of content---shared with normal/export view */ const MainView = ({ insight, isExport, onClone, onDelete, onFetchLikedBy, onLike }: ItemTypeViewerProps) => { - const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false }); - return ( <> {insight.repository.isMissing && ( @@ -70,77 +49,6 @@ const MainView = ({ insight, isExport, onClone, onDelete, onFetchLikedBy, onLike allowDownload={false} borderless={true} header={isExport ? 'none' : 'stealth'} - headerStyles={{ align: 'flex-start' }} - headerContent={ - - - - - {insight.metadata?.team && } - - {insight.authors.edges.map(({ node: author }) => ( - - ))} - - {insight.tags?.length > 0 && insight.tags.map((tag) => )} - - - - - {insight.metadata?.publishedDate != null && ( - - Published Date - {formatDateIntl(insight.metadata.publishedDate, DateTime.DATE_MED)} - - )} - - - Last Updated - - {formatDateIntl(insight.updatedAt, DateTime.DATETIME_MED)} ( - {formatRelativeIntl(insight.updatedAt)}) - - - - - Created - - {formatDateIntl(insight.createdAt, DateTime.DATETIME_MED)} ( - {formatRelativeIntl(insight.createdAt)}) - - - - {insight.files && insight.files.length > 0 && ( - - Files - {insight.files.map((file) => { - return ( - - - {file.path} - - - ); - })} - - )} - - - - } - headerRightContent={ - <> - - - - } mime="text/markdown" contents={insight.readme?.contents} baseAssetUrl={`/api/v1/insights/${insight.fullName}/assets`} @@ -151,6 +59,9 @@ const MainView = ({ insight, isExport, onClone, onDelete, onFetchLikedBy, onLike ); }; +/*** + * Custom Header for ItemType===Page + */ export const PageViewer = ({ insight, nextInsight, @@ -188,6 +99,8 @@ export const PageViewer = ({ {isExport && } + {!isExport && } + {/* Insight README (& alerts) */} diff --git a/packages/frontend/src/pages/main-page/main-page.tsx b/packages/frontend/src/pages/main-page/main-page.tsx index 249019074..d7f5c1215 100644 --- a/packages/frontend/src/pages/main-page/main-page.tsx +++ b/packages/frontend/src/pages/main-page/main-page.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2021 Expedia, Inc. + * Copyright 2022 Expedia, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -53,7 +53,7 @@ export const MainPage = () => { <> {isPrint !== undefined && } - + {/* Insight Viewing */} @@ -72,7 +72,7 @@ export const MainPage = () => { return (
- + {/* Authentication errors can be displayed without being logged in */} } />