fix(adoption-insights): align legends, show trends, and remove empty space (#1320)

* fix(adoption-insights): align legends, show trends, and remove empty space

* add changeset

Author: Eswaraiahsapram

workspaces/adoption-insights/.changeset/gentle-radios-tease.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-adoption-insights': patch
+---
+
+Align legends in Active users card, display trends on initial load, and remove empty space in no results card

workspaces/adoption-insights/plugins/adoption-insights/src/components/ActiveUsers/ActiveUsers.tsx

@@ -63,7 +63,7 @@ const ActiveUsers = () => {
           display="flex"
           justifyContent="center"
           alignItems="center"
-          height={200}
+          minHeight={80}
         >
           <EmptyChartState />
         </Box>

workspaces/adoption-insights/plugins/adoption-insights/src/components/ActiveUsers/CustomLegend.tsx

@@ -39,7 +39,7 @@ const CustomLegend = (props: any) => {
             <div
               style={{
                 width: 20,
-                height: 3,
+                height: 4,
                 backgroundColor: entry.color,
               }}
             />

workspaces/adoption-insights/plugins/adoption-insights/src/components/CatalogEntities/CatalogEntities.tsx

@@ -115,7 +115,7 @@ const CatalogEntities = () => {
           display="flex"
           justifyContent="center"
           alignItems="center"
-          height={200}
+          minHeight={80}
         >
           <EmptyChartState />
         </Box>

workspaces/adoption-insights/plugins/adoption-insights/src/components/Plugins/Plugins.tsx

@@ -35,14 +35,12 @@ import { usePlugins } from '../../hooks/usePlugins';
 import TableFooterPagination from '../CardFooter';
 import { Line, LineChart, ResponsiveContainer } from 'recharts';
 import EmptyChartState from '../Common/EmptyChartState';
-import { useDateRange } from '../Header/DateRangeContext';
 
 const Plugins = () => {
   const [page, setPage] = useState(0);
   const [limit] = useState(20);
   const [rowsPerPage, setRowsPerPage] = useState(3);
 
-  const { isDefaultDateRange } = useDateRange();
   const { plugins, loading, error } = usePlugins({ limit });
 
   const handleChangePage = useCallback((_event: unknown, newPage: number) => {
@@ -79,7 +77,7 @@ const Plugins = () => {
           display="flex"
           justifyContent="center"
           alignItems="center"
-          height={200}
+          minHeight={80}
         >
           <EmptyChartState />
         </Box>
@@ -93,7 +91,6 @@ const Plugins = () => {
         <TableHead>
           <TableRow>
             {PLUGINS_TABLE_HEADERS.map(header => {
-              if (isDefaultDateRange && header.id === 'percent') return null;
               return (
                 <TableCell
                   key={header.id}
@@ -125,11 +122,11 @@ const Plugins = () => {
                   borderBottom: theme => `1px solid ${theme.palette.grey[300]}`,
                 }}
               >
-                <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>
+                <TableCell sx={{ width: '20%' }}>
                   {plugin.plugin_id ?? '--'}
                 </TableCell>
                 <TableCell sx={{ width: '40%' }}>
-                  {plugin.trend?.length > 0 ? (
+                  {plugin.trend?.length > 1 ? (
                     <ResponsiveContainer width={250} height={50}>
                       <LineChart data={plugin.trend}>
                         <Line
@@ -145,21 +142,19 @@ const Plugins = () => {
                     '--'
                   )}
                 </TableCell>
-                {!isDefaultDateRange && (
-                  <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                      {Math.round(Number(plugin.trend_percentage)) < 0 ? (
-                        <TrendingDownIcon sx={{ color: 'red' }} />
-                      ) : (
-                        <TrendingUpIcon sx={{ color: 'green' }} />
-                      )}
-                      <Typography variant="body2">
-                        {Math.abs(Math.round(Number(plugin.trend_percentage)))}%
-                      </Typography>
-                    </Box>
-                  </TableCell>
-                )}
-                <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>
+                <TableCell sx={{ width: '20%' }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {Math.round(Number(plugin.trend_percentage)) < 0 ? (
+                      <TrendingDownIcon sx={{ color: 'red' }} />
+                    ) : (
+                      <TrendingUpIcon sx={{ color: 'green' }} />
+                    )}
+                    <Typography variant="body2">
+                      {Math.abs(Math.round(Number(plugin.trend_percentage)))}%
+                    </Typography>
+                  </Box>
+                </TableCell>
+                <TableCell sx={{ width: '20%' }}>
                   {Number(plugin.visit_count).toLocaleString('en-US') ?? '--'}
                 </TableCell>
               </TableRow>

workspaces/adoption-insights/plugins/adoption-insights/src/components/Plugins/__tests__/Plugins.test.tsx

@@ -32,10 +32,6 @@ jest.mock('../../../hooks/usePlugins', () => ({
   usePlugins: jest.fn(),
 }));
 
-jest.mock('../../Header/DateRangeContext', () => ({
-  useDateRange: jest.fn(() => ({ isDefaultDateRange: true })),
-}));
-
 jest.mock('../../CardFooter', () => () => <div data-testid="pagination" />);
 
 jest.mock('recharts', () => {

workspaces/adoption-insights/plugins/adoption-insights/src/components/Searches/Searches.tsx

@@ -62,7 +62,7 @@ const Searches = () => {
           display="flex"
           justifyContent="center"
           alignItems="center"
-          height={200}
+          minHeight={80}
         >
           <EmptyChartState />
         </Box>

workspaces/adoption-insights/plugins/adoption-insights/src/components/Techdocs/Techdocs.tsx

@@ -75,7 +75,7 @@ const Techdocs = () => {
           display="flex"
           justifyContent="center"
           alignItems="center"
-          height={200}
+          minHeight={80}
         >
           <EmptyChartState />
         </Box>

workspaces/adoption-insights/plugins/adoption-insights/src/components/Templates/Templates.tsx

@@ -75,7 +75,7 @@ const Templates = () => {
           display="flex"
           justifyContent="center"
           alignItems="center"
-          height={200}
+          minHeight={80}
         >
           <EmptyChartState />
         </Box>

workspaces/adoption-insights/plugins/adoption-insights/src/components/Users/Users.tsx

@@ -60,7 +60,7 @@ const Users = () => {
           display="flex"
           justifyContent="center"
           alignItems="center"
-          height={200}
+          minHeight={80}
         >
           <EmptyChartState />
         </Box>