added history

public/app/core/components/AppChrome/AddonBar/AddonBar.tsx

@@ -8,6 +8,7 @@ import { config } from '@grafana/runtime';
 import { Dropdown, Icon, IconButton, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { contextSrv } from 'app/core/core';
+import { t } from 'app/core/internationalization';
 import { useSelector } from 'app/types/store';
 
 import { HistoryContainer } from '../History/HistoryContainer';
@@ -70,6 +71,20 @@ export function AddonBar() {
     });
   };
 
+  const onToggleHistory = () => {
+    if (state.addonBarPane?.id === 'history') {
+      chrome.update({ addonBarPane: undefined });
+      return;
+    }
+
+    chrome.update({
+      addonBarPane: {
+        id: 'history',
+        content: <HistoryContainer />,
+      },
+    });
+  };
+
   const transientApps = state.addonApps.filter((app) => app.isApp);
   const contextApps = state.addonApps.filter((app) => !app.isApp);
 
@@ -113,7 +128,17 @@ export function AddonBar() {
       <AddonBarItem active={state.addonBarPane?.id === 'create'}>
         <ToolbarButton tooltip="Add / create" iconOnly icon={'plus'} aria-label="New" onClick={onShowCreate} />
       </AddonBarItem>
-      {unifiedHistoryEnabled && <HistoryContainer />}
+      {unifiedHistoryEnabled && (
+        <AddonBarItem active={state.addonBarPane?.id === 'history'}>
+          <ToolbarButton
+            onClick={onToggleHistory}
+            iconOnly
+            tooltip="History"
+            icon="history"
+            aria-label={t('nav.history-container.drawer-tittle', 'History')}
+          />
+        </AddonBarItem>
+      )}
       {enrichedHelpNode && (
         // <Dropdown overlay={() => <TopNavBarMenu node={enrichedHelpNode} />} placement="bottom-end">
         <AddonBarItem active={state.addonBarPane?.id === 'help'}>

public/app/core/components/AppChrome/History/HistoryContainer.tsx

@@ -1,22 +1,19 @@
 import { css } from '@emotion/css';
 import { useEffect } from 'react';
-import { useToggle } from 'react-use';
 
 import { GrafanaTheme2, store } from '@grafana/data';
-import { Drawer, ToolbarButton } from '@grafana/ui';
+import { Drawer } from '@grafana/ui';
 import { appEvents } from 'app/core/app_events';
 import { t } from 'app/core/internationalization';
 import { RecordHistoryEntryEvent } from 'app/types/events';
 
+import { AddonBarPane } from '../AddonBar/AddonBarPane';
 import { HISTORY_LOCAL_STORAGE_KEY } from '../AppChromeService';
 import { HistoryEntry } from '../types';
 
 import { HistoryWrapper } from './HistoryWrapper';
 
 export function HistoryContainer() {
-  const [showHistoryDrawer, onToggleShowHistoryDrawer] = useToggle(false);
-  // const styles = useStyles2(getStyles);
-
   useEffect(() => {
     const sub = appEvents.subscribe(RecordHistoryEntryEvent, (ev) => {
       const clickedHistory = store.getObject<boolean>('CLICKING_HISTORY');
@@ -47,25 +44,9 @@ export function HistoryContainer() {
   }, []);
 
   return (
-    <>
-      <ToolbarButton
-        onClick={onToggleShowHistoryDrawer}
-        iconOnly
-        tooltip="History"
-        icon="history"
-        aria-label={t('nav.history-container.drawer-tittle', 'History')}
-      />
-      {/* <NavToolbarSeparator className={styles.separator} /> */}
-      {showHistoryDrawer && (
-        <Drawer
-          title={t('nav.history-container.drawer-tittle', 'History')}
-          onClose={onToggleShowHistoryDrawer}
-          size="md"
-        >
-          <HistoryWrapper onClose={() => onToggleShowHistoryDrawer(false)} />
-        </Drawer>
-      )}
-    </>
+    <AddonBarPane title={t('nav.history-container.title', 'History')}>
+      <HistoryWrapper />
+    </AddonBarPane>
   );
 }
 

public/app/core/components/AppChrome/History/HistoryWrapper.tsx

@@ -34,8 +34,8 @@ export function HistoryWrapper({ onClose }: { onClose: () => void }) {
   }, {});
 
   return (
-    <Stack direction="column" alignItems="flex-start">
-      <Box width="100%">
+    <Box padding={2} width="100%">
+      <Stack direction="column" alignItems="flex-start">
         {Object.keys(hist).map((entries, date) => {
           return (
             <Stack key={date} direction="column" gap={1}>
@@ -55,13 +55,14 @@ export function HistoryWrapper({ onClose }: { onClose: () => void }) {
             </Stack>
           );
         })}
-      </Box>
-      {history.length > numItemsToShow && (
-        <Button variant="secondary" fill="text" onClick={() => setNumItemsToShow(numItemsToShow + 5)}>
-          {t('nav.history-wrapper.show-more', 'Show more')}
-        </Button>
-      )}
-    </Stack>
+
+        {history.length > numItemsToShow && (
+          <Button variant="secondary" fill="text" onClick={() => setNumItemsToShow(numItemsToShow + 5)}>
+            {t('nav.history-wrapper.show-more', 'Show more')}
+          </Button>
+        )}
+      </Stack>
+    </Box>
   );
 }
 interface ItemProps {
@@ -96,7 +97,7 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) {
             className={styles.iconButton}
           />
         ) : (
-          <Space h={2} />
+          <Space h={0.5} />
         )}
 
         <Card
@@ -111,12 +112,14 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) {
           <Stack direction="column">
             <div>
               {breadcrumbs.map((breadcrumb, index) => (
-                <Text key={index}>
+                <Text key={index} variant="bodySmall">
                   {breadcrumb.text} {index !== breadcrumbs.length - 1 ? '> ' : ''}
                 </Text>
               ))}
             </div>
-            <Text color="secondary">{moment(time).format('h:mm A')}</Text>
+            <Text color="secondary" variant="bodySmall">
+              {moment(time).format('h:mm A')}
+            </Text>
             {sparklineData && (
               <Sparkline
                 theme={theme}
@@ -187,7 +190,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     expanded: css({
       display: 'flex',
       flexDirection: 'column',
-      marginLeft: theme.spacing(5),
+      marginLeft: theme.spacing(0),
       gap: theme.spacing(1),
       position: 'relative',
       '&:before': {