task/WP-304: Fixed the placeholder text for search to be more accurat…

…ely represented (#905)

* Fixed the placeholder text for search to be more accurately represented

* adding tests for placeholder text

---------

Co-authored-by: Taylor Grafft <tgrafft@wireless-10-145-54-70.public.utexas.edu>
Co-authored-by: Taylor Grafft <tgrafft@wireless-10-147-30-100.public.utexas.edu>
Co-authored-by: edmondsgarrett <43251554+edmondsgarrett@users.noreply.github.com>

client/src/components/DataFiles/DataFilesListing/DataFilesListing.jsx

@@ -2,7 +2,12 @@ import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import { useSelectedFiles, useFileListing } from 'hooks/datafiles';
+import {
+  useSelectedFiles,
+  useFileListing,
+  useSystems,
+  useSystemDisplayName,
+} from 'hooks/datafiles';
 import {
   CheckboxCell,
   CheckboxHeaderCell,
@@ -14,6 +19,7 @@ import {
 } from './DataFilesListingCells';
 import DataFilesTable from '../DataFilesTable/DataFilesTable';
 import Searchbar from '_common/Searchbar';
+import { getCurrentDirectory } from '../DataFilesModals/DataFilesModalTables/DataFilesModalListingTable';
 
 const fileTypes = [
   'Audio',
@@ -142,13 +148,27 @@ const DataFilesListing = ({ api, scheme, system, path, isPublic }) => {
     return cells;
   }, [api, showViewPath, fileNavCellCallback]);
 
+  const { fetchSelectedSystem } = useSystems();
+  const selectedSystem = fetchSelectedSystem({ scheme, system, path });
+  const systemDisplayName = useSystemDisplayName({ scheme, system, path });
+  const homeDir = selectedSystem?.homeDir;
+
+  // Check if the current path is the home directory itself
+  const isAtHomeDir = path.replace(/^\/+/, '') === homeDir?.replace(/^\/+/, '');
+
+  // Determine the sectionName based on the path (if homeDir, use systemDisplayName--else use current dir)
+  const sectionName = isAtHomeDir
+    ? systemDisplayName
+    : getCurrentDirectory(path);
+
   return (
     <>
       {!hideSearchBar && (
         <Searchbar
           api={api}
           scheme={scheme}
           system={system}
+          sectionName={sectionName}
           path={path}
           resultCount={files.length}
           dataType="Files"

client/src/components/DataFiles/DataFilesListing/DataFilesListing.test.js

@@ -7,6 +7,7 @@ import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import renderComponent from 'utils/testing';
 import DataFilesListing from './DataFilesListing';
+import * as DataFilesModalListingTable from '../DataFilesModals/DataFilesModalTables/DataFilesModalListingTable';
 import { CheckboxCell, FileNavCell } from './DataFilesListingCells';
 import systemsFixture from '../fixtures/DataFiles.systems.fixture';
 import filesFixture from '../fixtures/DataFiles.files.fixture';
@@ -250,3 +251,58 @@ describe('DataFilesListing', () => {
     expect(queryByText(/Search/)).toBeNull();
   });
 });
+
+describe('DataFilesListing - Section Name Determination', () => {
+  const mockStore = configureStore();
+  const store = mockStore(initialMockState);
+
+  beforeEach(() => {
+    // Clear all mocks before each test
+    jest.clearAllMocks();
+  });
+
+  it('sets sectionName to systemDisplayName when path is homeDir', () => {
+    jest
+      .spyOn(DataFilesModalListingTable, 'getCurrentDirectory')
+      .mockImplementationOnce(() => 'Mock System Name');
+
+    const { getByPlaceholderText } = render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <DataFilesListing
+            api="tapis"
+            scheme="private"
+            system="test.system"
+            path="/home/user" // Same as homeDir
+          />
+        </BrowserRouter>
+      </Provider>
+    );
+
+    expect(getByPlaceholderText('Search Mock System Name')).toBeInTheDocument();
+  });
+
+  it('sets sectionName to current directory name when path is not homeDir', () => {
+    const currentDirName = 'Current Directory Name';
+    jest
+      .spyOn(DataFilesModalListingTable, 'getCurrentDirectory')
+      .mockImplementationOnce(() => currentDirName);
+
+    const { getByPlaceholderText } = render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <DataFilesListing
+            api="tapis"
+            scheme="private"
+            system="test.system"
+            path="/home/user/some/other/dir" // Different from homeDir
+          />
+        </BrowserRouter>
+      </Provider>
+    );
+
+    expect(
+      getByPlaceholderText(`Search ${currentDirName}`)
+    ).toBeInTheDocument();
+  });
+});