From 61d55942aef0bb7d0a745b6dbde5671eeda5d146 Mon Sep 17 00:00:00 2001
From: Yevhenii Huselietov <yevhenii.huselietov@gmail.com>
Date: Sat, 7 Oct 2023 14:08:14 +0300
Subject: [PATCH 1/2] Fix the styles for NewRelicDashboard, add more
 responsiveness

Signed-off-by: Yevhenii Huselietov <yevhenii.huselietov@gmail.com>
---
 .changeset/swift-kings-add.md                 |  5 ++
 .../DashboardSnapshot.tsx                     | 72 +++++++++++--------
 .../DashboardSnapshotList.tsx                 | 18 +++--
 3 files changed, 60 insertions(+), 35 deletions(-)
 create mode 100644 .changeset/swift-kings-add.md

diff --git a/.changeset/swift-kings-add.md b/.changeset/swift-kings-add.md
new file mode 100644
index 0000000000..cbbdb3877f
--- /dev/null
+++ b/.changeset/swift-kings-add.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-newrelic-dashboard': minor
+---
+
+Fix the styles for NewRelicDashboard, add more responsiveness
diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
index cdac4196d4..219b2ed925 100644
--- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
+++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
@@ -15,8 +15,7 @@
  */
 
 import React from 'react';
-import { Box, Grid, MenuItem, Select } from '@material-ui/core';
-import { useTheme } from '@material-ui/core/styles';
+import { Box, makeStyles, MenuItem, Select } from '@material-ui/core';
 import { useApi, storageApiRef } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 import {
@@ -29,6 +28,20 @@ import { newRelicDashboardApiRef } from '../../../api';
 import { DashboardSnapshotSummary } from '../../../api/NewRelicDashboardApi';
 import useObservable from 'react-use/lib/useObservable';
 
+const useStyles = makeStyles(
+  theme => ({
+    cardSelect: {
+      margin: '15px 10px 0 0',
+    },
+    img: {
+      width: '100%',
+      height: 'auto',
+      border: `solid 1px ${theme.palette.common.black}`,
+    },
+  }),
+  { name: 'BackstageNewRelicDashboardSnapshot' },
+);
+
 /**
  * @public
  */
@@ -37,11 +50,7 @@ export const DashboardSnapshot = (props: {
   name: string;
   permalink: string;
 }) => {
-  const {
-    palette: {
-      common: { black },
-    },
-  } = useTheme();
+  const classes = useStyles();
   const { guid, name, permalink } = props;
   const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
   const storageApi = useApi(storageApiRef).forBucket('newrelic-dashboard');
@@ -76,14 +85,15 @@ export const DashboardSnapshot = (props: {
       /\pdf$/i,
       'png',
     );
+
   return (
-    <Grid container>
-      <InfoCard
-        variant="gridItem"
-        title={name}
-        action={
+    <InfoCard
+      variant="gridItem"
+      title={name}
+      action={
+        <div>
           <Select
-            style={{ margin: '15px 10px 0 0' }}
+            className={classes.cardSelect}
             defaultValue={2592000000}
             value={storageSnapshot.value}
             onChange={event => {
@@ -97,24 +107,24 @@ export const DashboardSnapshot = (props: {
             <MenuItem value={604800000}>1 Week</MenuItem>
             <MenuItem value={2592000000}>1 Month</MenuItem>
           </Select>
-        }
-      >
-        <Box display="flex">
-          <Box flexGrow="1">
-            <Link to={permalink}>
-              {url ? (
-                <img
-                  alt={`${name} Dashbord`}
-                  style={{ border: `solid 1px ${black}` }}
-                  src={url}
-                />
-              ) : (
-                'Dashboard loading... , click here to open if it did not render correctly'
-              )}
-            </Link>
-          </Box>
+        </div>
+      }
+    >
+      <Box display="flex">
+        <Box flexGrow="1">
+          <Link to={permalink}>
+            {url ? (
+              <img
+                alt={`${name} Dashboard`}
+                className={classes.img}
+                src={url}
+              />
+            ) : (
+              'Dashboard loading... , click here to open if it did not render correctly'
+            )}
+          </Link>
         </Box>
-      </InfoCard>
-    </Grid>
+      </Box>
+    </InfoCard>
   );
 };
diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx
index 594a5fd53d..610ebbfce9 100644
--- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx
+++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { useState } from 'react';
-import { Grid, Tab, Tabs, makeStyles } from '@material-ui/core';
+import { Tab, Tabs, makeStyles, Box } from '@material-ui/core';
 import { newRelicDashboardApiRef } from '../../../api';
 import { useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
@@ -29,11 +29,22 @@ interface TabPanelProps {
   value1: number;
 }
 
+const tabPanelStyles = makeStyles(
+  {
+    tabPanel: {
+      marginTop: '4px',
+    },
+  },
+  { name: 'BackstageNewRelicDashboardTabPanel' },
+);
+
 function TabPanel(props: TabPanelProps) {
   const { children, value1, index, ...other } = props;
+  const classes = tabPanelStyles(tabPanelStyles);
 
   return (
     <div
+      className={classes.tabPanel}
       role="tabpanel"
       hidden={value1 !== index}
       id={`simple-tabpanel-${index}`}
@@ -102,7 +113,7 @@ export const DashboardSnapshotList = (props: { guid: string }) => {
     return <ErrorPanel title={error.name} defaultExpanded error={error} />;
   }
   return (
-    <Grid container direction="column">
+    <Box>
       <Tabs
         selectionFollowsFocus
         indicatorColor="primary"
@@ -112,7 +123,6 @@ export const DashboardSnapshotList = (props: { guid: string }) => {
         aria-label="scrollable auto tabs example"
         onChange={handleChange}
         value={value1}
-        style={{ width: '100%' }}
       >
         {value?.getDashboardEntity?.data?.actor.entitySearch.results.entities?.map(
           (Entity: ResultEntity, index: number) => {
@@ -143,6 +153,6 @@ export const DashboardSnapshotList = (props: { guid: string }) => {
           );
         },
       )}
-    </Grid>
+    </Box>
   );
 };

From 49261142a80a9202a5501e74fabc937911fbaf64 Mon Sep 17 00:00:00 2001
From: Yevhenii Huselietov <yevhenii.huselietov@gmail.com>
Date: Wed, 11 Oct 2023 13:25:44 +0300
Subject: [PATCH 2/2] Fix review comments

Signed-off-by: Yevhenii Huselietov <yevhenii.huselietov@gmail.com>
---
 .changeset/swift-kings-add.md                               | 2 +-
 .../DashboardSnapshotList/DashboardSnapshot.tsx             | 2 +-
 .../DashboardSnapshotList/DashboardSnapshotList.tsx         | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.changeset/swift-kings-add.md b/.changeset/swift-kings-add.md
index cbbdb3877f..9e9c158eec 100644
--- a/.changeset/swift-kings-add.md
+++ b/.changeset/swift-kings-add.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-newrelic-dashboard': minor
+'@backstage/plugin-newrelic-dashboard': patch
 ---
 
 Fix the styles for NewRelicDashboard, add more responsiveness
diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
index 219b2ed925..c19697a4f0 100644
--- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
+++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
@@ -31,7 +31,7 @@ import useObservable from 'react-use/lib/useObservable';
 const useStyles = makeStyles(
   theme => ({
     cardSelect: {
-      margin: '15px 10px 0 0',
+      margin: theme.spacing(2, 1, 0, 0),
     },
     img: {
       width: '100%',
diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx
index 610ebbfce9..81686d10c9 100644
--- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx
+++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx
@@ -30,11 +30,11 @@ interface TabPanelProps {
 }
 
 const tabPanelStyles = makeStyles(
-  {
+  theme => ({
     tabPanel: {
-      marginTop: '4px',
+      marginTop: theme.spacing(0.5),
     },
-  },
+  }),
   { name: 'BackstageNewRelicDashboardTabPanel' },
 );