feat: Move Insight Files up in the sidebar and auto-collapse

ExpediaGroup · Jan 29, 2024 · a7c194d · a7c194d
1 parent e192617
commit a7c194d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 30 deletions.
diff --git a/...ges/insight-page/components/insight-viewer/components/insight-sidebar/insight-sidebar.tsx b/...ges/insight-page/components/insight-viewer/components/insight-sidebar/insight-sidebar.tsx
@@ -18,6 +18,7 @@ import type { BoxProps } from '@chakra-ui/react';
 import {
   Badge,
   Box,
+  Button,
   Flex,
   HStack,
   Icon,
@@ -32,6 +33,7 @@ import {
   Heading
 } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
+import { useState } from 'react';
 
 import { ExternalLink } from '../../../../../../components/external-link/external-link';
 import { InsightTag } from '../../../../../../components/insight-tag/insight-tag';
@@ -43,15 +45,20 @@ import { TeamTag } from '../../../../../../components/team-tag/team-tag';
 import { UserTag } from '../../../../../../components/user-tag/user-tag';
 import type { Insight } from '../../../../../../models/generated/graphql';
 import { formatDateIntl, formatRelativeIntl } from '../../../../../../shared/date-utils';
-import { iconFactory } from '../../../../../../shared/icon-factory';
 import { fileIconFactoryAs } from '../../../../../../shared/file-icon-factory';
+import { iconFactory } from '../../../../../../shared/icon-factory';
 import { groupInsightLinks } from '../../../../../../shared/insight-utils';
 import { GitHubButton } from '../github-button/github-button';
 import { ShareMenu } from '../share-menu/share-menu';
 
+const SIDEBAR_COLLAPSED_FILE_LENGTH = 5;
+
 export const InsightSidebar = ({ insight, ...props }: { insight: Insight } & BoxProps) => {
   const fileBgColor = useColorModeValue('white', 'gray.700');
 
+  const [isFilesCollapsed, setIsFilesCollapsed] = useState(true);
+  const enableCollapsingFiles = insight.files && insight.files.length > SIDEBAR_COLLAPSED_FILE_LENGTH;
+
   if (insight == null) {
     return <Box></Box>;
   }
@@ -128,10 +135,49 @@ export const InsightSidebar = ({ insight, ...props }: { insight: Insight } & Box
         <ShareMenu insight={insight} />
       </HStack>
 
-      {insight.metadata?.team && (
+      {insight.files && insight.files.length > 0 && (
         <>
           <StackDivider borderColor="snowstorm.100" borderTopWidth="1px" />
+          <SidebarHeading>Files</SidebarHeading>
+          <Stack spacing="0.25rem">
+            {/* If collapsed, limit to SIDEBAR_COLLAPSED_FILE_LENGTH files */}
+            {insight.files.slice(0, isFilesCollapsed ? SIDEBAR_COLLAPSED_FILE_LENGTH : undefined).map((file) => {
+              return (
+                <Link to={`/${insight.itemType}/${insight.fullName}/files/${file.path}`} key={file.id}>
+                  <Tag bg={fileBgColor} rounded="full">
+                    {fileIconFactoryAs(
+                      {
+                        mimeType: file.mimeType,
+                        fileName: file.name,
+                        isFolder: false,
+                        isOpen: false,
+                        isSelected: false
+                      },
+                      { fontSize: '1rem', mr: '0.5rem' }
+                    )}
+                    <TagLabel>{file.path}</TagLabel>
+                  </Tag>
+                </Link>
+              );
+            })}
+            (
+            {enableCollapsingFiles && (
+              <Button
+                variant="snowstorm"
+                size="sm"
+                onClick={() => setIsFilesCollapsed(!isFilesCollapsed)}
+                colorScheme="frost"
+                fontWeight="normal"
+              >{`${isFilesCollapsed ? 'Show' : 'Hide'} ${insight.files.length - SIDEBAR_COLLAPSED_FILE_LENGTH} more`}</Button>
+            )}
+            )
+          </Stack>
+        </>
+      )}
 
+      {insight.metadata?.team && (
+        <>
+          <StackDivider borderColor="snowstorm.100" borderTopWidth="1px" />
           <SidebarStack heading="Team" tooltip="Team which owns this Insight">
             <TeamTag team={insight.metadata?.team} size="lg" />
           </SidebarStack>
@@ -185,34 +231,6 @@ export const InsightSidebar = ({ insight, ...props }: { insight: Insight } & Box
           ))}
         </>
       )}
-
-      {insight.files && insight.files.length > 0 && (
-        <>
-          <StackDivider borderColor="snowstorm.100" borderTopWidth="1px" />
-          <SidebarHeading>Files</SidebarHeading>
-          <Stack spacing="0.25rem">
-            {insight.files.map((file) => {
-              return (
-                <Link to={`/${insight.itemType}/${insight.fullName}/files/${file.path}`} key={file.id}>
-                  <Tag bg={fileBgColor} rounded="full">
-                    {fileIconFactoryAs(
-                      {
-                        mimeType: file.mimeType,
-                        fileName: file.name,
-                        isFolder: false,
-                        isOpen: false,
-                        isSelected: false
-                      },
-                      { fontSize: '1rem', mr: '0.5rem' }
-                    )}
-                    <TagLabel>{file.path}</TagLabel>
-                  </Tag>
-                </Link>
-              );
-            })}
-          </Stack>
-        </>
-      )}
     </VStack>
   );
 };
diff --git a/packages/frontend/src/theme.ts b/packages/frontend/src/theme.ts
@@ -271,6 +271,13 @@ export const IexTheme = extendTheme({
           _hover: {
             bg: 'polar.500'
           }
+        },
+        snowstorm: {
+          bg: 'snowstorm.300',
+          color: 'polar.600',
+          _hover: {
+            bg: 'snowstorm.200'
+          }
         }
       }
     },