CCS-4064-search-beta-selectors (#496)

* CCS-4064-search-beta-selectors * updates * BEM fixes * update
redhataccess · Jan 8, 2021 · 39f2e58 · 39f2e58
1 parent bef40f7
commit 39f2e58
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 29 deletions.
diff --git a/pantheon-bundle/frontend/src/app/Pagination.test.tsx b/pantheon-bundle/frontend/src/app/Pagination.test.tsx
@@ -18,6 +18,7 @@ describe("Tests for Pagination", () => {
     perPageLimit={1}
     showDropdownOptions={true}
     bottom={true}
+    className={"test"}
 />)
     expect(view).toMatchSnapshot()
   })
@@ -33,6 +34,7 @@ describe("Tests for Pagination", () => {
       perPageLimit={1}
       showDropdownOptions={true}
       bottom={true}
+      className={"test"}
     />)
     const pageNumberDisplay = wrapper.find(LevelItem)
     expect(pageNumberDisplay.exists()).toBe(true)

diff --git a/pantheon-bundle/frontend/src/app/Pagination.tsx b/pantheon-bundle/frontend/src/app/Pagination.tsx
@@ -13,6 +13,7 @@ export interface IProps {
   perPageLimit:number
   showDropdownOptions: boolean
   bottom: boolean
+  className?: string
 }
 
 class Pagination extends React.Component<IProps> {
@@ -69,7 +70,7 @@ class Pagination extends React.Component<IProps> {
           <LevelItem />
           <LevelItem />
           <LevelItem>
-            <nav aria-label="Countries Pagination">
+            <nav aria-label="Pagination" className={this.props.className}>
               <div>
                 <div>
                   <div className="example">

diff --git a/pantheon-bundle/frontend/src/app/__snapshots__/Pagination.test.tsx.snap b/pantheon-bundle/frontend/src/app/__snapshots__/Pagination.test.tsx.snap
@@ -7,7 +7,8 @@ exports[`Tests for Pagination should render Pagination component 1`] = `
     <LevelItem />
     <LevelItem>
       <nav
-        aria-label="Countries Pagination"
+        aria-label="Pagination"
+        className="test"
       >
         <div>
           <div>

diff --git a/pantheon-bundle/frontend/src/app/__snapshots__/search.test.tsx.snap b/pantheon-bundle/frontend/src/app/__snapshots__/search.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`Search tests should render default Search component 1`] = `
   >
     <Pagination
       bottom={false}
+      className="pagination"
       handleMoveLeft={[Function]}
       handleMoveRight={[Function]}
       handleMoveToFirst={[Function]}
@@ -109,6 +110,7 @@ exports[`Search tests should render default Search component 1`] = `
   >
     <Pagination
       bottom={true}
+      className="pagination"
       handleMoveLeft={[Function]}
       handleMoveRight={[Function]}
       handleMoveToFirst={[Function]}

diff --git a/pantheon-bundle/frontend/src/app/__snapshots__/searchBeta.test.tsx.snap b/pantheon-bundle/frontend/src/app/__snapshots__/searchBeta.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
   </Alert>
   <br />
   <Toolbar
-    className="pf-m-toggle-group-container"
+    className="pf-m-toggle-group-container filters-bar__filters-wrapper"
     clearAllFilters={[Function]}
     collapseListedFiltersBreakpoint="xl"
     id="toolbar-with-filter"
@@ -38,7 +38,9 @@ exports[`SearchBeta tests should render default Search component 1`] = `
           />
         }
       >
-        <ToolbarItem>
+        <ToolbarItem
+          id="filters-bar__toolbar-toggle"
+        >
           <Button
             aria-expanded={true}
             icon={
@@ -56,6 +58,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
           <InputGroup>
             <SearchInput
               aria-label="search input"
+              className="filters-bar__name-search"
               id="textInput"
               name="textInput"
               onChange={[Function]}
@@ -82,6 +85,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
           <ToolbarFilter
             categoryName="Status"
             chips={Array []}
+            className="dropdown-filter filters-bar__dropdown-filter filters-bar__dropdown-filter--status"
             deleteChipGroup={[Function]}
             showToolbarItem={true}
           >
@@ -124,7 +128,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
               width=""
             >
               <SelectOption
-                className=""
+                className="dropdown-filter__option dropdown-filter__option--status dropdown-filter__option--draft"
                 component="button"
                 index={0}
                 inputId=""
@@ -142,7 +146,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
                 value="draft"
               />
               <SelectOption
-                className=""
+                className="dropdown-filter__option dropdown-filter__option--status dropdown-filter__option--released"
                 component="button"
                 index={0}
                 inputId=""
@@ -164,6 +168,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
           <ToolbarFilter
             categoryName="Content Type"
             chips={Array []}
+            className="dropdown-filter filters-bar__dropdown-filter filters-bar__dropdown-filter--content-type"
             showToolbarItem={true}
           >
             <Select
@@ -205,7 +210,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
               width=""
             >
               <SelectOption
-                className=""
+                className="dropdown-filter__option dropdown-filter__option--content-type dropdown-filter__option--concept"
                 component="button"
                 index={0}
                 inputId=""
@@ -223,7 +228,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
                 value="CONCEPT"
               />
               <SelectOption
-                className=""
+                className="dropdown-filter__option dropdown-filter__option--content-type dropdown-filter__option--procedure"
                 component="button"
                 index={0}
                 inputId=""
@@ -241,7 +246,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
                 value="PROCEDURE"
               />
               <SelectOption
-                className=""
+                className="dropdown-filter__option dropdown-filter__option--content-type dropdown-filter__option--reference"
                 component="button"
                 index={0}
                 inputId=""
@@ -296,7 +301,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
               />
             </DrawerActions>
             <ExpandableSection
-              className=""
+              className="filters-drawer filters-drawer--by-repo"
               isActive={true}
               isExpanded={true}
               onToggle={[Function]}
@@ -315,7 +320,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
                 className=""
               >
                 <SimpleListItem
-                  className=""
+                  className="repo-list filters-drawer__repo-list"
                   component="button"
                   componentClassName=""
                   href=""
@@ -344,10 +349,11 @@ exports[`SearchBeta tests should render default Search component 1`] = `
       width="width_50"
     >
       <DrawerContentBody
+        className="search-results"
         width="width_50"
       >
         <ExpandableSection
-          className="pf-c-title"
+          className="pf-c-title search-results__section search-results__section--module"
           isActive={true}
           isExpanded={true}
           onToggle={[Function]}
@@ -371,7 +377,7 @@ exports[`SearchBeta tests should render default Search component 1`] = `
         </ExpandableSection>
         <br />
         <ExpandableSection
-          className="pf-c-title"
+          className="pf-c-title search-results__section search-results__section--assembly"
           isActive={true}
           isExpanded={true}
           onToggle={[Function]}

diff --git a/pantheon-bundle/frontend/src/app/__snapshots__/searchResults.test.tsx.snap b/pantheon-bundle/frontend/src/app/__snapshots__/searchResults.test.tsx.snap
@@ -56,10 +56,13 @@ exports[`SearchResults tests should render default Search component 1`] = `
     <TableHeader
       className="pf-m-nowrap"
     />
-    <Component />
+    <Component
+      className="results__table-body"
+    />
   </Table>
   <Pagination
     bottom={true}
+    className="results__pagination"
     handleMoveLeft={[Function]}
     handleMoveRight={[Function]}
     handleMoveToFirst={[Function]}

diff --git a/pantheon-bundle/frontend/src/app/search.tsx b/pantheon-bundle/frontend/src/app/search.tsx
@@ -98,6 +98,7 @@ class Search extends Component<IAppState, ISearchState> {
             perPageLimit={this.state.pageLimit}
             showDropdownOptions={this.state.showDropdownOptions}
             bottom={false}
+            className="pagination"
           />
         </div>
         {/* @todo This should _definitely_ be a table */}
@@ -235,6 +236,7 @@ class Search extends Component<IAppState, ISearchState> {
                 perPageLimit={this.state.pageLimit}
                 showDropdownOptions={!this.state.showDropdownOptions}
                 bottom={true}
+                className="pagination"
               />
               <BuildInfo />
             </div>

diff --git a/pantheon-bundle/frontend/src/app/searchBeta.tsx b/pantheon-bundle/frontend/src/app/searchBeta.tsx
@@ -132,7 +132,7 @@ class SearchBeta extends Component<IAppState, ISearchState> {
           <DrawerActions>
             <DrawerCloseButton onClick={this.onCloseClick} />
           </DrawerActions>
-          <ExpandableSection toggleText="By repo" isActive={true} isExpanded={repoFilterIsExpanded} onToggle={this.onRepositoriesToggle}>
+          <ExpandableSection className="filters-drawer filters-drawer--by-repo" toggleText="By repo" isActive={true} isExpanded={repoFilterIsExpanded} onToggle={this.onRepositoriesToggle}>
             <SearchInput
               placeholder="Filter"
               value={this.state.repoFilterValue}
@@ -142,7 +142,7 @@ class SearchBeta extends Component<IAppState, ISearchState> {
             {this.state.filteredRepositories && this.state.filteredRepositories.length > 0 &&
             <SimpleList aria-label="Repository List">
               {this.state.filteredRepositories.map((data) => (
-                <SimpleListItem key={data.id}>
+                <SimpleListItem key={data.id} className='repo-list filters-drawer__repo-list'>
                   <Checkbox label={data.name} aria-label="uncontrolled checkbox" id={data.id} onClick={this.onSelectRepositories} />
                 </SimpleListItem>
               ))}
@@ -172,7 +172,7 @@ class SearchBeta extends Component<IAppState, ISearchState> {
     );
     const drawerContent = (
       <React.Fragment>
-        <ExpandableSection toggleText="Modules" className="pf-c-title" isActive={true} isExpanded={modulesIsExpanded} onToggle={this.onModulesToggle}>
+        <ExpandableSection toggleText="Modules" className="pf-c-title search-results__section search-results__section--module" isActive={true} isExpanded={modulesIsExpanded} onToggle={this.onModulesToggle}>
           <SearchResults
             contentType="module"
             keyWord={this.state.inputValue}
@@ -184,7 +184,7 @@ class SearchBeta extends Component<IAppState, ISearchState> {
 
         </ExpandableSection>
         <br />
-        <ExpandableSection toggleText="Assemblies" className="pf-c-title" isActive={true} isExpanded={assembliesIsExpanded} onToggle={this.onAssembliesToggle}>
+        <ExpandableSection toggleText="Assemblies" className="pf-c-title search-results__section search-results__section--assembly" isActive={true} isExpanded={assembliesIsExpanded} onToggle={this.onAssembliesToggle}>
           <SearchResults
             contentType="assembly"
             keyWord={this.state.inputValue}
@@ -199,24 +199,25 @@ class SearchBeta extends Component<IAppState, ISearchState> {
     );
 
     const statusMenuItems = [
-      <SelectOption key="statusDraft" value="draft" label= "Draft" />,
-      <SelectOption key="statusPublished" value="released" label="Published" />
+      <SelectOption key="statusDraft" value="draft" label= "Draft" className="dropdown-filter__option dropdown-filter__option--status dropdown-filter__option--draft" />,
+      <SelectOption key="statusPublished" value="released" label="Published" className="dropdown-filter__option dropdown-filter__option--status dropdown-filter__option--released" />
     ];
 
     const contentTypeMenuItems = [
-      <SelectOption key="ctypeConcept" value="CONCEPT" label="Concept" />,
-      <SelectOption key="ctypeProcedure" value="PROCEDURE" label="Procedure" />,
-      <SelectOption key="ctypeReference" value="REFERENCE" label="Reference" />
+      <SelectOption key="ctypeConcept" value="CONCEPT" label="Concept" className="dropdown-filter__option dropdown-filter__option--content-type dropdown-filter__option--concept" />,
+      <SelectOption key="ctypeProcedure" value="PROCEDURE" label="Procedure" className="dropdown-filter__option dropdown-filter__option--content-type dropdown-filter__option--procedure" />,
+      <SelectOption key="ctypeReference" value="REFERENCE" label="Reference" className="dropdown-filter__option dropdown-filter__option--content-type dropdown-filter__option--reference" />
     ];
 
     const toggleGroupItems = (
       <React.Fragment>
-        <ToolbarItem>
+        <ToolbarItem id="filters-bar__toolbar-toggle">
           <Button variant="tertiary" aria-expanded={isExpanded} onClick={this.onClick} icon={<FilterIcon />} />
         </ToolbarItem>
         <ToolbarItem>
           <InputGroup>
             <SearchInput
+              className="filters-bar__name-search"
               name="textInput"
               id="textInput"
               placeholder="Find by name"
@@ -237,6 +238,7 @@ class SearchBeta extends Component<IAppState, ISearchState> {
             // deleteChip={this.onDelete}
             deleteChipGroup={this.onDeleteGroup}
             categoryName="Status"
+            className="dropdown-filter filters-bar__dropdown-filter filters-bar__dropdown-filter--status"
           >
             <Select
               variant={SelectVariant.checkbox}
@@ -251,7 +253,7 @@ class SearchBeta extends Component<IAppState, ISearchState> {
             </Select>
           </ToolbarFilter>
           {/* <ToolbarFilter chips={filters.ctype} deleteChip={this.onDelete} categoryName="Content Type"> */}
-          <ToolbarFilter chips={filters.ctype} categoryName="Content Type" >
+          <ToolbarFilter chips={filters.ctype} categoryName="Content Type" className="dropdown-filter filters-bar__dropdown-filter filters-bar__dropdown-filter--content-type">
             <Select
               variant={SelectVariant.checkbox}
               aria-label="Content Type"
@@ -315,7 +317,7 @@ class SearchBeta extends Component<IAppState, ISearchState> {
         <br />
         <Toolbar
           id="toolbar-with-filter"
-          className="pf-m-toggle-group-container"
+          className="pf-m-toggle-group-container filters-bar__filters-wrapper"
           collapseListedFiltersBreakpoint="xl"
           clearAllFilters={this.onDelete}
         >
@@ -324,7 +326,7 @@ class SearchBeta extends Component<IAppState, ISearchState> {
         <Divider />
         <Drawer isExpanded={isExpanded} isInline={true} position="left" onExpand={this.onExpand}>
           <DrawerContent panelContent={panelContent} width="width_50">
-            <DrawerContentBody width="width_50">
+            <DrawerContentBody className="search-results" width="width_50">
               {drawerContent}
             </DrawerContentBody>
           </DrawerContent>

diff --git a/pantheon-bundle/frontend/src/app/searchResults.tsx b/pantheon-bundle/frontend/src/app/searchResults.tsx
@@ -123,7 +123,7 @@ class SearchResults extends Component<IProps, ISearchState> {
 
         {!this.state.isEmptyResults && <Table aria-label="Simple Table" cells={columns} rows={rows}>
           <TableHeader className={styles.modifiers.nowrap} />
-          <TableBody />
+          <TableBody className="results__table-body" />
         </Table>}
 
         {!this.state.isEmptyResults && <Pagination
@@ -136,9 +136,10 @@ class SearchResults extends Component<IProps, ISearchState> {
           perPageLimit={this.state.pageLimit}
           showDropdownOptions={this.state.showDropdownOptions}
           bottom={this.state.bottom}
+          className="results__pagination"
         />}
 
-        {this.state.isEmptyResults && <EmptyState variant={EmptyStateVariant.small}>
+        {this.state.isEmptyResults && <EmptyState variant={EmptyStateVariant.small} className="search-results--empty">
           <EmptyStateIcon icon={SearchIcon} />
           <Title headingLevel="h2" size="lg">
             No results found