Merge pull request #43 from TomPlum/develop

Added showGitIndex prop

Author: TomPlum

README.md

@@ -223,6 +223,7 @@ All components have optional props to further configure the log.
 | `onSelectCommit`      | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected.                      |
 | `classes`             | `GitLogStylingProps`        | CSS classes for various elements to enable custom styling.                                               |
 | `indexStatus`         | `GitLogIndexStatus`         | Renders information about added, deleted and modified files to the index pseudo-commit entry.            |
+| `showGitIndex`        | `boolean`                   | Enables the Git index "pseudo-commit' entry above the HEAD commit.                                       |
 
 
 #### GitLogStylingProps
@@ -325,7 +326,6 @@ All components have optional props to further configure the log.
 - Mobile responsiveness for the demo site
 - Add graph render strategy with a second option to use 2d rendering context (html canvas)
 - Add eslint to pipeline
-- Add in prop to show-hide the index pseudo commit
 - Tags should be independent. Add a new optional field to the log entry / commit objects.
 - Branch / Tags column is fixed. Dynamically floor it to match the max tag size currently being rendered?
 - Is the SS paginated log gonna accept data from multiple branches? Because then we need the HEAD commits of each branch

packages/demo/src/GitLog.stories.tsx

@@ -27,6 +27,7 @@ const meta: Meta<StoryProps> = {
     showCommitNodeHashes: false,
     showCommitNodeTooltips: false,
     showHeaders: true,
+    showGitIndex: true,
     enableResize: false,
     nodeTheme: 'default',
     nodeSize: 20,
@@ -100,6 +101,12 @@ const meta: Meta<StoryProps> = {
         Plain: 'plain'
       }
     },
+    showGitIndex: {
+      name: 'Show Git Index',
+      table: {
+        category: 'Visibility'
+      }
+    },
     pageSize: {
       name: 'Page Size',
       table: {

packages/demo/src/GitLogPaged.stories.tsx

@@ -27,6 +27,7 @@ const meta: Meta<StoryProps> = {
     showHeaders: true,
     enableResize: false,
     nodeTheme: 'default',
+    showGitIndex: true,
     nodeSize: 20,
     orientation: 'normal',
     onSelectCommit: (commit?: Commit) => {
@@ -90,6 +91,12 @@ const meta: Meta<StoryProps> = {
         Plain: 'plain'
       }
     },
+    showGitIndex: {
+      name: 'Show Git Index',
+      table: {
+        category: 'Visibility'
+      }
+    },
     enableResize: {
       name: 'Enable Resize',
       table: {

packages/demo/src/hooks/useStoryState/useStoryState.ts

@@ -12,23 +12,26 @@ const getRepositoryConfig = (name: string) => {
         branchName: 'release',
         fileNameEntireHistory: 'sleep.txt',
         fileNameCheckedOutBranch: 'sleep-release.txt',
-        headCommitHash: '1352f4c'
+        headCommitHash: '1352f4c',
+        headCommitCheckoutOutBranch: 'e059c28'
       }
     }
     case 'TomPlum/advent-of-code-2019': {
       return {
         branchName: 'master',
         fileNameEntireHistory: 'advent-of-code-2019.txt',
         fileNameCheckedOutBranch: 'advent-of-code-2019-master.txt',
-        headCommitHash: 'c88f0b9'
+        headCommitHash: 'c88f0b9',
+        headCommitCheckoutOutBranch: '12d47cc'
       }
     }
     case 'TomPlum/learn-japanese': {
       return {
         branchName: 'feature/JPUI-51',
         fileNameEntireHistory: 'learn-japanese.txt',
         fileNameCheckedOutBranch: 'learn-japanese-feature.txt',
-        headCommitHash: 'de80ee8'
+        headCommitHash: 'de80ee8',
+        headCommitCheckoutOutBranch: 'de80ee8d'
       }
     }
     default: {
@@ -39,7 +42,13 @@ const getRepositoryConfig = (name: string) => {
 
 export const useStoryState = ({ isServerSidePaginated, onChangeRepository }: StoryStateProps = {}) => {
   const [repository, setRepository] = useState('TomPlum/sleep')
-  const { branchName, fileNameEntireHistory, fileNameCheckedOutBranch, headCommitHash } = getRepositoryConfig(repository)
+  const {
+    branchName,
+    fileNameEntireHistory,
+    fileNameCheckedOutBranch,
+    headCommitHash,
+    headCommitCheckoutOutBranch
+  } = getRepositoryConfig(repository)
 
   const { data, isLoading } = useGitLogEntries({
     fileName: isServerSidePaginated ? fileNameCheckedOutBranch : fileNameEntireHistory
@@ -68,7 +77,7 @@ export const useStoryState = ({ isServerSidePaginated, onChangeRepository }: Sto
   return {
     loading: isLoading,
     branch: branchName,
-    headCommitHash,
+    headCommitHash: isServerSidePaginated ? headCommitCheckoutOutBranch : headCommitHash,
     entries: data,
     theme,
     colours,

packages/library/README.md

@@ -181,6 +181,7 @@ All components have optional props to further configure the log.
 | `onSelectCommit`      | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected.                      |
 | `classes`             | `GitLogStylingProps`        | CSS classes for various elements to enable custom styling.                                               |
 | `indexStatus`         | `GitLogIndexStatus`         | Renders information about added, deleted and modified files to the index pseudo-commit entry.            |
+| `showGitIndex`        | `boolean`                   | Enables the Git index "pseudo-commit' entry above the HEAD commit.                                       |
 
 
 #### GitLogStylingProps

packages/library/src/GitLog.spec.tsx

@@ -67,6 +67,11 @@ describe('GitLog', () => {
         currentBranch='release'
         entries={gitLogEntries}
         githubRepositoryUrl='https://github.com/TomPlum/sleep'
+        indexStatus={{
+          added: 2,
+          deleted: 1,
+          modified: 10
+        }}
       >
         <GitLog.Tags />
         <GitLog.Graph />
@@ -133,6 +138,26 @@ describe('GitLog', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
+  it('should render correctly and match the snapshot of the GitLog component when the index is disabled', { timeout: 1000 * 10 } ,() => {
+    const gitLogEntries = parseGitLogOutput(sleepRepositoryData)
+
+    const { asFragment } = render(
+      <GitLog
+        showHeaders
+        showGitIndex={false}
+        currentBranch='release'
+        entries={gitLogEntries}
+        githubRepositoryUrl='https://github.com/TomPlum/sleep'
+      >
+        <GitLog.Tags />
+        <GitLog.Graph />
+        <GitLog.Table />
+      </GitLog>
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
   it('should log a warning if the graph subcomponent is not rendered', () => {
     const consoleWarn = vi.spyOn(console, 'warn')