Fix the styles for NewRelicDashboard, add more responsiveness

Signed-off-by: Yevhenii Huselietov <yevhenii.huselietov@gmail.com>

.changeset/swift-kings-add.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-newrelic-dashboard': minor
+---
+
+Fix the styles for NewRelicDashboard, add more responsiveness

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>
   );
 };

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>
   );
 };