QueryLibrary: Updated Entrypoint Discoverability (#108413)

* Updated query library discoverability

* Reverted to plus

* Fixed coloring issue

public/app/core/components/QueryOperationRow/QueryOperationAction.tsx

@@ -11,17 +11,25 @@ interface BaseQueryOperationActionProps {
   onClick: (e: React.MouseEvent) => void;
   disabled?: boolean;
   dataTestId?: string;
+  isGroupEnd?: boolean;
+  isHighlighted?: boolean;
 }
 
 function BaseQueryOperationAction(props: QueryOperationActionProps | QueryOperationToggleActionProps) {
   const styles = useStyles2(getStyles);
 
   return (
-    <div className={cx(styles.icon, 'active' in props && props.active && styles.active)}>
+    <div
+      className={cx(
+        styles.icon,
+        'active' in props && props.active && styles.active,
+        props.isGroupEnd && styles.iconGroupEnd
+      )}
+    >
       <IconButton
         name={props.icon}
         tooltip={props.title}
-        className={styles.icon}
+        className={cx(styles.icon, props.isHighlighted && styles.highlighted)}
         disabled={!!props.disabled}
         onClick={props.onClick}
         type="button"
@@ -51,6 +59,14 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: 'relative',
       color: theme.colors.text.secondary,
     }),
+    highlighted: css({
+      color: theme.colors.primary.main,
+    }),
+
+    iconGroupEnd: css({
+      borderRight: `1px solid ${theme.colors.border.medium}`,
+      paddingRight: theme.spacing(0.5),
+    }),
     active: css({
       '&:before': {
         display: 'block',

public/app/features/query/components/QueryEditorRow.tsx

@@ -371,6 +371,16 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
 
     return (
       <>
+        <MaybeQueryLibrarySaveButton query={query} app={this.props.app} />
+        <ReplaceQueryFromLibrary
+          datasourceFilters={datasource?.name ? [datasource.name] : []}
+          onSelectQuery={(query) => {
+            onQueryReplacedFromLibrary?.();
+            onReplace?.(query);
+          }}
+          app={this.props.app}
+        />
+
         {hasEditorHelp && (
           <QueryOperationToggleAction
             title={t('query-operation.header.datasource-help', 'Show data source help')}
@@ -380,20 +390,11 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
           />
         )}
         {this.renderExtraActions()}
-        <MaybeQueryLibrarySaveButton query={query} app={this.props.app} />
         <QueryOperationAction
           title={t('query-operation.header.duplicate-query', 'Duplicate query')}
           icon="copy"
           onClick={this.onCopyQuery}
         />
-        <ReplaceQueryFromLibrary
-          datasourceFilters={datasource?.name ? [datasource.name] : []}
-          onSelectQuery={(query) => {
-            onQueryReplacedFromLibrary?.();
-            onReplace?.(query);
-          }}
-          app={this.props.app}
-        />
         {!hideHideQueryButton ? (
           <QueryOperationToggleAction
             dataTestId={selectors.components.QueryEditorRow.actionButton('Hide response')}
@@ -556,6 +557,8 @@ function ReplaceQueryFromLibrary<TQuery extends DataQuery>({
       title={t('query-operation.header.replace-query-from-library', 'Replace with query from library')}
       icon="book"
       onClick={onReplaceQueryFromLibrary}
+      isGroupEnd
+      isHighlighted
     />
   ) : null;
 }