Explore: Use new icons for split pane resizing (#60391)

* Add icons, use them for split pane resizing

* Change icons

* Apply scale to child div

* Use fancier logic for displaying icon

* Remove color fill on icon

* Change icons, remove scale

* Change icons and logic

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

@@ -104,6 +104,8 @@ export const availableIconsIndex = {
   'gf-landscape': true,
   'gf-layout-simple': true,
   'gf-logs': true,
+  'gf-movepane-left': true,
+  'gf-movepane-right': true,
   'gf-portrait': true,
   'gf-service-account': true,
   'gf-show-context': true,

packages/grafana-ui/src/components/Icon/cached.json

@@ -147,6 +147,8 @@
   "custom/gf-interpolation-step-after",
   "custom/gf-interpolation-step-before",
   "custom/gf-logs",
+  "custom/gf-movepane-left",
+  "custom/gf-movepane-right",
   "mono/favorite",
   "mono/grafana",
   "mono/heart",

packages/grafana-ui/src/components/Icon/iconBundle.ts

@@ -155,13 +155,15 @@ import u1144 from '../../../../../public/img/icons/custom/gf-interpolation-smoot
 import u1145 from '../../../../../public/img/icons/custom/gf-interpolation-step-after.svg';
 import u1146 from '../../../../../public/img/icons/custom/gf-interpolation-step-before.svg';
 import u1147 from '../../../../../public/img/icons/custom/gf-logs.svg';
-import u1148 from '../../../../../public/img/icons/mono/favorite.svg';
-import u1149 from '../../../../../public/img/icons/mono/grafana.svg';
-import u1150 from '../../../../../public/img/icons/mono/heart.svg';
-import u1151 from '../../../../../public/img/icons/mono/heart-break.svg';
-import u1152 from '../../../../../public/img/icons/mono/panel-add.svg';
-import u1153 from '../../../../../public/img/icons/mono/library-panel.svg';
-import u1154 from '../../../../../public/img/icons/unicons/record-audio.svg';
+import u1148 from '../../../../../public/img/icons/custom/gf-movepane-left.svg';
+import u1149 from '../../../../../public/img/icons/custom/gf-movepane-right.svg';
+import u1150 from '../../../../../public/img/icons/mono/favorite.svg';
+import u1151 from '../../../../../public/img/icons/mono/grafana.svg';
+import u1152 from '../../../../../public/img/icons/mono/heart.svg';
+import u1153 from '../../../../../public/img/icons/mono/heart-break.svg';
+import u1154 from '../../../../../public/img/icons/mono/panel-add.svg';
+import u1155 from '../../../../../public/img/icons/mono/library-panel.svg';
+import u1156 from '../../../../../public/img/icons/unicons/record-audio.svg';
 // do not edit this list directly
 // the list of icons live here: @grafana/ui/components/Icon/cached.json
 
@@ -332,13 +334,15 @@ export function initIconCache() {
   cacheItem(u1145, 'custom/gf-interpolation-step-after.svg');
   cacheItem(u1146, 'custom/gf-interpolation-step-before.svg');
   cacheItem(u1147, 'custom/gf-logs.svg');
-  cacheItem(u1148, 'mono/favorite.svg');
-  cacheItem(u1149, 'mono/grafana.svg');
-  cacheItem(u1150, 'mono/heart.svg');
-  cacheItem(u1151, 'mono/heart-break.svg');
-  cacheItem(u1152, 'mono/panel-add.svg');
-  cacheItem(u1153, 'mono/library-panel.svg');
-  cacheItem(u1154, 'unicons/record-audio.svg');
+  cacheItem(u1148, 'custom/gf-movepane-left.svg');
+  cacheItem(u1149, 'custom/gf-movepane-right.svg');
+  cacheItem(u1150, 'mono/favorite.svg');
+  cacheItem(u1151, 'mono/grafana.svg');
+  cacheItem(u1152, 'mono/heart.svg');
+  cacheItem(u1153, 'mono/heart-break.svg');
+  cacheItem(u1154, 'mono/panel-add.svg');
+  cacheItem(u1155, 'mono/library-panel.svg');
+  cacheItem(u1156, 'unicons/record-audio.svg');
   // do not edit this list directly
   // the list of icons live here: @grafana/ui/components/Icon/cached.json
 }

public/app/features/explore/ExploreToolbar.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import React, { lazy, PureComponent, RefObject, Suspense } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
@@ -36,6 +37,19 @@ const AddToDashboard = lazy(() =>
   import('./AddToDashboard').then(({ AddToDashboard }) => ({ default: AddToDashboard }))
 );
 
+const getStyles = (exploreId: ExploreId, isLargerExploreId: boolean) => {
+  return {
+    rotateIcon: css({
+      '> div > svg': {
+        transform:
+          (exploreId === 'left' && isLargerExploreId) || (exploreId === 'right' && !isLargerExploreId)
+            ? 'rotate(180deg)'
+            : 'none',
+      },
+    }),
+  };
+};
+
 interface OwnProps {
   exploreId: ExploreId;
   onChangeTime: (range: RawTimeRange, changedByScanner?: boolean) => void;
@@ -136,8 +150,8 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
       largerExploreId,
     } = this.props;
     const showSmallTimePicker = splitted || containerWidth < 1210;
-
     const isLargerExploreId = largerExploreId === exploreId;
+    const styles = getStyles(exploreId, isLargerExploreId);
 
     const showExploreToDashboard =
       contextSrv.hasAccess(AccessControlAction.DashboardsCreate, contextSrv.isEditor) ||
@@ -168,11 +182,9 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
             tooltip={`${isLargerExploreId ? 'Narrow' : 'Widen'} pane`}
             disabled={isLive}
             onClick={onClickResize}
-            icon={
-              (exploreId === 'left' && isLargerExploreId) || (exploreId === 'right' && !isLargerExploreId)
-                ? 'angle-left'
-                : 'angle-right'
-            }
+            icon={isLargerExploreId ? 'gf-movepane-left' : 'gf-movepane-right'}
+            iconOnly={true}
+            className={styles.rotateIcon}
           />
           <ToolbarButton tooltip="Close split pane" onClick={this.onCloseSplitView} icon="times">
             Close

public/img/icons/custom/gf-movepane-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><path d="M21 2H3c-.549 0-1 .451-1 1v18c0 .549.451 1 1 1h18c.549 0 1-.451 1-1V3c0-.549-.451-1-1-1ZM8 20H4V4h4v16Zm12 0H10V4h10v16Z" style="fill-rule:nonzero"/><path d="M 14.4 12 L 17.9 8.5 C 18.3 8.1 18.3 7.5 17.9 7.1 C 17.5 6.7 16.9 6.7 16.5 7.1 L 12.3 11.3 C 11.9 11.7 11.9 12.3 12.3 12.7 L 16.5 16.9 C 16.7 17.1 16.9 17.2 17.2 17.2 C 17.5 17.2 17.7 17.1 17.9 16.9 C 18.3 16.5 18.3 15.9 17.9 15.5 L 14.4 12 Z" style="fill-rule:nonzero" transform="matrix(-1, 0, 0, -1, 30.199999, 24.000001)"/></svg>

public/img/icons/custom/gf-movepane-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><path d="M21 2H3c-.549 0-1 .451-1 1v18c0 .549.451 1 1 1h18c.549 0 1-.451 1-1V3c0-.549-.451-1-1-1Zm-7 18H4V4h10v16Zm6 0h-4V4h4v16Z" style="fill-rule:nonzero"/><path d="m11.3 12 3.5-3.5c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0l-4.2 4.2c-.4.4-.4 1 0 1.4l4.2 4.2c.2.2.4.3.7.3.3 0 .5-.1.7-.3.4-.4.4-1 0-1.4L11.3 12Z" style="fill-rule:nonzero" transform="rotate(-180 10.55 12)"/></svg>