Merge pull request desktop#19789 from desktop/add-no-results-message

Filtered Changes: Add no results message
peteos123 · Jan 28, 2025 · a6cebc7 · a6cebc7
2 parents 6d4a981 + 36b6b66
commit a6cebc7
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git a/app/src/ui/changes/filter-changes-list.tsx b/app/src/ui/changes/filter-changes-list.tsx
@@ -1227,6 +1227,8 @@ export class FilterChangesList extends React.Component<
             onItemContextMenu={this.onItemContextMenu}
             ariaLabel={filesDescription}
             renderPostFilterRow={this.renderFilterResultsHeader}
+            renderNoItems={this.renderNoChanges}
+            postNoResultsMessage={this.getNoResultsMessage()}
           />
         </div>
         {this.renderStashedChanges()}
@@ -1235,6 +1237,35 @@ export class FilterChangesList extends React.Component<
     )
   }
 
+  private getNoResultsMessage = () => {
+    if (this.state.filterText === '' && !this.state.filterToIncludedCommit) {
+      return undefined
+    }
+
+    const filterTextMessage = this.state.filterText
+      ? ` matching your filter of '${this.state.filterText}'`
+      : ''
+
+    const includedCommitText = this.state.filterToIncludedCommit
+      ? ' that are to be included in your commit'
+      : ''
+
+    const conjunction = filterTextMessage && includedCommitText ? ' and ' : ''
+
+    return `Sorry, I can't find any changed files${filterTextMessage}${conjunction}
+        ${includedCommitText}.`
+  }
+
+  private renderNoChanges = () => {
+    if (this.state.filterText === '' && !this.state.filterToIncludedCommit) {
+      return null
+    }
+
+    return (
+      <div className="no-changes-in-list">{this.getNoResultsMessage()}</div>
+    )
+  }
+
   private onFilterToIncludedInCommit = () => {
     this.setState({
       filterToIncludedCommit: !this.state.filterToIncludedCommit,

diff --git a/app/src/ui/lib/augmented-filter-list.tsx b/app/src/ui/lib/augmented-filter-list.tsx
@@ -214,6 +214,10 @@ interface IAugmentedSectionFilterListProps<T extends IFilterListItem> {
   /** The aria-label attribute for the list component. */
   readonly ariaLabel?: string
 
+  /** A message to be announced after the no results message - Used to pass in
+   * any messaging shown to visual users */
+  readonly postNoResultsMessage?: string
+
   /**
    * This prop defines the behaviour of the selection of items within this list.
    *  - 'single' : (default) single list-item selection. [shift] and [ctrl] have
@@ -357,11 +361,16 @@ export class AugmentedSectionFilterList<
 
     const itemRows = this.state.rows.flat().filter(row => row.kind === 'item')
     const resultsPluralized = itemRows.length === 1 ? 'result' : 'results'
-    const screenReaderMessage = `${itemRows.length} ${resultsPluralized}`
+    const postNoResultsMessage =
+      itemRows.length === 0 ? this.props.postNoResultsMessage : ''
+    const screenReaderMessage = `${itemRows.length} ${resultsPluralized} ${postNoResultsMessage}`
 
+    const tracked = `${this.state.filterValue} ${
+      this.props.filterMethod ? 'fm' : ''
+    }`
     return (
       <AriaLiveContainer
-        trackedUserInput={this.state.filterValue}
+        trackedUserInput={tracked}
         message={screenReaderMessage}
       />
     )
@@ -821,6 +830,7 @@ function createStateUpdate<T extends IFilterListItem>(
   const selectedRows = []
   let section = 0
   const groupIndices = []
+  let filterValueChanged = state?.filterValueChanged ? true : filter.length > 0
 
   for (const [idx, group] of props.groups.entries()) {
     const groupRows = new Array<IFilterListRow<T>>()
@@ -837,6 +847,10 @@ function createStateUpdate<T extends IFilterListItem>(
           item,
         }))
 
+    if (group.items.length !== items.length) {
+      filterValueChanged = true
+    }
+
     if (!items.length) {
       continue
     }
@@ -868,11 +882,6 @@ function createStateUpdate<T extends IFilterListItem>(
     selectedRows.push(getFirstVisibleRow(rows))
   }
 
-  // Stay true if already set, otherwise become true if the filter has content
-  const filterValueChanged = state?.filterValueChanged
-    ? true
-    : filter.length > 0
-
   return {
     rows: rows,
     selectedRows,

diff --git a/app/styles/ui/changes/_changes-list.scss b/app/styles/ui/changes/_changes-list.scss
@@ -97,6 +97,11 @@
       height: 100%;
     }
   }
+
+  .no-changes-in-list {
+    text-align: center;
+    padding: var(--spacing-double);
+  }
 }
 
 .stashed-changes-button {