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)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+};
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"
- >
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {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 */}
+
-
+
-
-
-
-
-
-
-
-
-
-
-
+
-
+
)}
-
+
{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 */}
} />