Search: replace cog icon (#27440)

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

@@ -115,7 +115,8 @@ export type IconName =
   | 'line-alt'
   | 'line-alt'
   | 'sort-amount-down'
   | 'sort-amount-down'
   | 'cloud'
   | 'cloud'
-  | 'draggabledots';
+  | 'draggabledots'
+  | 'folder-upload';
 
 
 export const getAvailableIcons = (): IconName[] => [
 export const getAvailableIcons = (): IconName[] => [
   'fa fa-spinner',
   'fa fa-spinner',
@@ -230,4 +231,5 @@ export const getAvailableIcons = (): IconName[] => [
   'sort-amount-down',
   'sort-amount-down',
   'cloud',
   'cloud',
   'draggabledots',
   'draggabledots',
+  'folder-upload',
 ];
 ];

public/app/features/search/components/SectionHeader.tsx

@@ -48,12 +48,15 @@ export const SectionHeader: FC<SectionHeaderProps> = ({
         <Icon name={getSectionIcon(section)} />
         <Icon name={getSectionIcon(section)} />
       </div>
       </div>
 
 
-      <span className={styles.text}>{section.title}</span>
-      {section.url && (
-        <a href={section.url} className={styles.link}>
-          <Icon name="cog" />
-        </a>
-      )}
+      <div className={styles.text}>
+        {section.title}
+        {section.url && (
+          <a href={section.url} className={styles.link}>
+            <span className={styles.separator}>|</span> <Icon name="folder-upload" /> Go to folder
+          </a>
+        )}
+      </div>
+
       {section.itemsFetching ? <Spinner /> : <Icon name={section.expanded ? 'angle-down' : 'angle-right'} />}
       {section.itemsFetching ? <Spinner /> : <Icon name={section.expanded ? 'angle-down' : 'angle-right'} />}
     </div>
     </div>
   );
   );
@@ -97,5 +100,8 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa
       opacity: 0;
       opacity: 0;
       transition: opacity 150ms ease-in-out;
       transition: opacity 150ms ease-in-out;
     `,
     `,
+    separator: css`
+      margin-right: 6px;
+    `,
   };
   };
 });
 });