HubListToolbar - fix nesting, alignment

ansible · Oct 17, 2023 · 54f65f5 · 54f65f5
1 parent ac56d29
commit 54f65f5
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 43 deletions.
diff --git a/src/components/patternfly-wrappers/sort.scss b/src/components/patternfly-wrappers/sort.scss
diff --git a/src/components/patternfly-wrappers/sort.tsx b/src/components/patternfly-wrappers/sort.tsx
@@ -6,7 +6,6 @@ import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amou
 import SortAmountUpIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-up-icon';
 import React from 'react';
 import { ParamHelper } from 'src/utilities';
-import './sort.scss';
 
 export class SortFieldType {
   id: string;
@@ -136,7 +135,7 @@ export class Sort extends React.Component<IProps, IState> {
     }
 
     return (
-      <div className='hub-sort-wrapper'>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
         {options.length > 1 ? (
           <Select
             variant={SelectVariant.single}
@@ -154,15 +153,17 @@ export class Sort extends React.Component<IProps, IState> {
 
         {this.getIsDescending(params) ? (
           <IconDesc
-            className='clickable asc-button'
-            size='md'
+            className='clickable'
             onClick={() => this.setDescending()}
+            size='md'
+            style={{ marginLeft: '5px' }}
           />
         ) : (
           <IconAsc
-            className='clickable asc-button'
-            size='md'
+            className='clickable'
             onClick={() => this.setDescending()}
+            size='md'
+            style={{ marginLeft: '5px' }}
           />
         )}
       </div>

diff --git a/src/components/shared/hub-list-toolbar.tsx b/src/components/shared/hub-list-toolbar.tsx
@@ -41,7 +41,13 @@ export function HubListToolbar({
   return (
     <Toolbar>
       <ToolbarContent>
-        <ToolbarGroup style={{ marginLeft: 0 }}>
+        <ToolbarGroup
+          style={{
+            alignItems: 'start',
+            alignSelf: 'start',
+            flexDirection: 'column',
+          }}
+        >
           <ToolbarItem>
             <CompoundFilter
               filterConfig={filterConfig}
@@ -50,39 +56,37 @@ export function HubListToolbar({
               params={params}
               updateParams={updateParams}
             />
-            {/* FIXME surprising nesting */}
-            <ToolbarItem>
-              <AppliedFilters
-                ignoredParams={ignoredParams}
-                niceNames={niceNames}
-                params={params}
-                style={{ marginTop: '16px' }}
-                updateParams={updateParams}
-              />
-            </ToolbarItem>
           </ToolbarItem>
-        </ToolbarGroup>
-        {sortOptions ? (
-          <ToolbarGroup style={{ alignSelf: 'start' }}>
-            <ToolbarItem>
-              <Sort
-                options={sortOptions}
-                params={params}
-                updateParams={updateParams}
-              />
-            </ToolbarItem>
-          </ToolbarGroup>
-        ) : null}
-        <ToolbarGroup>
           <ToolbarItem>
-            <Pagination
+            <AppliedFilters
+              ignoredParams={ignoredParams}
+              niceNames={niceNames}
               params={params}
+              style={{ marginTop: '16px' }}
               updateParams={updateParams}
-              count={count}
-              isTop
             />
           </ToolbarItem>
         </ToolbarGroup>
+        {sortOptions ? (
+          <ToolbarItem style={{ alignSelf: 'start' }}>
+            <Sort
+              options={sortOptions}
+              params={params}
+              updateParams={updateParams}
+            />
+          </ToolbarItem>
+        ) : null}
+        <ToolbarItem
+          alignment={{ default: 'alignRight' }}
+          style={{ alignSelf: 'start' }}
+        >
+          <Pagination
+            params={params}
+            updateParams={updateParams}
+            count={count}
+            isTop
+          />
+        </ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -13,8 +13,8 @@ declare var NAMESPACE_TERM;
 declare var PULP_API_BASE_PATH;
 declare var UI_BASE_PATH;
 declare var UI_COMMIT_HASH;
-declare var UI_EXTERNAL_LOGIN_URI;
 declare var UI_DOCS_URL;
+declare var UI_EXTERNAL_LOGIN_URI;
 
 // when DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE only
 interface Window {