Search add sorting picker (#23746)

* Search: Extend search_srv with getSortOptions

* Search: Enable sorting

* Search: Fullwidth search

* Search: Add SortPicker

* Search: Add useSearchLayout

* Search: Update sort query

* Search: Refactor items rendering

* Search: Add sort to manage dashboards

* Search: Add sort icon

* Search: Mock getSortOptions

* Search: Fix Select sizes

* Search: Move SortPicker to Select

* Grafana-UI: Add ActionRow.tsx

* Grafana-UI: Use ActionRow in dashboard search

* Grafana-UI: Update ActionRow styles

* Search: Update tests

* Search: enable clearing TagFilter

* Search: Move getSortOptions outside of component

* Search: Fix import

* Search: Limit container width

* Search: Replace SearchField's clear text with icon

* Search: Fix section items query #23792

* Search: Add icons for layout switch

* Search: Remove layout switch for folder page

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

@@ -30,6 +30,9 @@ const getRadioButtonGroupStyles = () => {
         }
       }
     `,
+    icon: css`
+      margin-right: 6px;
+    `,
   };
 };
 
@@ -81,7 +84,7 @@ export function RadioButtonGroup<T>({
             name={groupName.current}
             fullWidth={fullWidth}
           >
-            {o.icon && <Icon name={o.icon} />}
+            {o.icon && <Icon name={o.icon} className={styles.icon} />}
             {o.label}
           </RadioButton>
         );

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -10,7 +10,7 @@ import * as MonoIcon from './assets';
 
 const alwaysMonoIcons = ['grafana', 'favorite'];
 
-interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
   name: IconName;
   size?: IconSize;
   type?: IconType;

packages/grafana-ui/src/components/Layout/Layout.tsx

@@ -37,13 +37,15 @@ export const Layout: React.FC<LayoutProps> = ({
   const styles = getStyles(theme, orientation, spacing, justify, align);
   return (
     <div className={styles.layout} style={{ width }}>
-      {React.Children.map(children, (child, index) => {
-        return (
-          <div className={styles.childWrapper} key={index}>
-            {child}
-          </div>
-        );
-      })}
+      {React.Children.toArray(children)
+        .filter(Boolean)
+        .map((child, index) => {
+          return (
+            <div className={styles.childWrapper} key={index}>
+              {child}
+            </div>
+          );
+        })}
     </div>
   );
 };

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -91,6 +91,7 @@ export function SelectBase<T>({
   allowCustomValue = false,
   autoFocus = false,
   backspaceRemovesValue = true,
+  className,
   closeMenuOnSelect = true,
   components,
   defaultOptions,
@@ -110,8 +111,8 @@ export function SelectBase<T>({
   loadingMessage = 'Loading options...',
   maxMenuHeight = 300,
   maxVisibleValues,
-  menuPosition,
   menuPlacement = 'auto',
+  menuPosition,
   noOptionsMessage = 'No options found',
   onBlur,
   onChange,
@@ -127,7 +128,6 @@ export function SelectBase<T>({
   renderControl,
   showAllSelectedWhenOpen = true,
   tabSelectsValue = true,
-  className,
   value,
   width,
 }: SelectBaseProps<T>) {

packages/grafana-ui/src/types/icon.ts

@@ -24,6 +24,7 @@ export type IconName =
   | 'plus-square'
   | 'folder-plus'
   | 'folder-open'
+  | 'folder'
   | 'file-copy-alt'
   | 'file-alt'
   | 'exchange-alt'
@@ -60,7 +61,7 @@ export type IconName =
   | 'clock-nine'
   | 'sync'
   | 'sign-in-alt'
-  | 'cllud-download'
+  | 'cloud-download'
   | 'cog'
   | 'bars'
   | 'save'
@@ -111,7 +112,8 @@ export type IconName =
   | 'heart'
   | 'heart-break'
   | 'ellipsis-v'
-  | 'favorite';
+  | 'favorite'
+  | 'sort-amount-down';
 
 export const getAvailableIcons = (): IconName[] => [
   'fa fa-spinner',
@@ -135,6 +137,7 @@ export const getAvailableIcons = (): IconName[] => [
   'plus-square',
   'folder-plus',
   'folder-open',
+  'folder',
   'file-copy-alt',
   'file-alt',
   'exchange-alt',
@@ -171,7 +174,7 @@ export const getAvailableIcons = (): IconName[] => [
   'clock-nine',
   'sync',
   'sign-in-alt',
-  'cllud-download',
+  'cloud-download',
   'cog',
   'bars',
   'save',
@@ -223,4 +226,5 @@ export const getAvailableIcons = (): IconName[] => [
   'heart-break',
   'ellipsis-v',
   'favorite',
+  'sort-amount-down',
 ];