FileList component

Summary

• Situation:
  • we want a component that would display all the files in a project or in current "folder" on a page (like on GitHub or on Obsidian Publish etc) for navigation purposes
  • we currently store GitHub trees of user sites in the content store
• Problem:
  • we don't have a component that would list those trees
  • we don't have a project file tree available in a form that would be ready to use by such component
• Solution:
  • start with creating a component similar to GitHub file tree preview window
  • figure out the structure of the tree that is needed based on that
  • convert GitHub trees we already store in the content store into a usable form (without storage in the db for now)
• Appetite: 3d

Situation

As a DataHub Cloud user, I want to:

• display a file tree similar to the one in GitHub

As a DataHub Cloud user, I don't want to:

• manually create and curate a list of those files

In the future we may also want to add LHS sidebar:

Problem

We have sites GitHub trees stored in the content store, but they are not really usable by any file tree / tree view component and require some adjustments.

Specifically:

• GitHub trees are flat arrays, and there is no grouping of items in terms of parent-child relation
• GitHub tree can include files outside of a given site if the site is being published from a repo subfolder

Appetite

2d

Solution

1. Create a react component
2. Figure out the required tree structure
3. Convert GitHub tree to the required format on the server (no storage in the db for now, until we are sure about the approach and the required tree structure)

File tree fed to the component will have the following (or similar) structure:

type FileTree = FileTreeItem[];

interface FileTreeItem {
  id: number,
  name: number,
  size: number, // bytes size from GitHub tree
  format: string; // probably not for display but maybe we want to filter some files out in the future
  link: string, // absolute, relative to site's root
  ... // anything else ?
  children?: FileTreeItem[]
}

For rendering, use some existing file tree / tree view react component library (e.g. https://github.com/brimdata/react-arborist)

Rabbit holes

• what's the main purpose atm? is it the side bar with navigation? or github-like window with files preview? = which react component do we want to build atm?
• do we keep all the files from the original repo or do we ignore some files, like scripts, .gitignore etc. I'd say keep all of them in the tree, in case we want to support previewing of those in the future as well, but just don't display them atm probably ignore some obvious stuff like .gitignore, .obsidian etc

No goes

• filters and search functionalities next iteration, maybe