feat(adoption-insights): add frontend plugin for adoption insights unit tests and addressed review comments

Author: Eswaraiahsapram

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

@@ -65,7 +65,7 @@ const ActiveUsers = () => {
   }
 
   return (
-    <CardWrapper title="Active Users" filter={<ExportCSVButton />}>
+    <CardWrapper title="Active users" filter={<ExportCSVButton />}>
       {loading ? (
         <Box
           display="flex"

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

@@ -165,12 +165,16 @@ const CatalogEntities = () => {
                       },
                     }}
                   >
-                    {entity.name}
+                    {entity.name ?? '--'}
                   </Link>
                 </TableCell>
-                <TableCell>{entity.kind}</TableCell>
-                <TableCell>{getLastUsedDay(entity.last_used)}</TableCell>
-                <TableCell>{Number(entity.count).toLocaleString()}</TableCell>
+                <TableCell>{entity.kind ?? '--'}</TableCell>
+                <TableCell>
+                  {getLastUsedDay(entity.last_used) ?? '--'}
+                </TableCell>
+                <TableCell>
+                  {Number(entity.count).toLocaleString() ?? '--'}
+                </TableCell>
               </TableRow>
             ))
           )}

workspaces/adoption-insights/plugins/adoption-insights/src/components/Header/DateRangePicker.tsx

@@ -40,6 +40,18 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
   endDate,
   setEndDate,
 }) => {
+  const startDateRef = React.useRef<HTMLInputElement | null>(null);
+  const endDateRef = React.useRef<HTMLInputElement | null>(null);
+
+  React.useEffect(() => {
+    if (!startDate && startDateRef.current) {
+      startDateRef.current.focus();
+    }
+    if (startDate && !endDate && endDateRef.current) {
+      endDateRef.current.focus();
+    }
+  }, [startDate, endDate]);
+
   const handleDateChange = (date: Date | null) => {
     if (!date) return;
 
@@ -117,7 +129,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Box>
-        <Typography variant="h5" p={2} pb={0}>
+        <Typography variant="h5" p={2} pb={0} fontWeight="400">
           Date range
         </Typography>
         <Divider sx={{ mt: 2 }} />
@@ -132,7 +144,11 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
               value={startDate}
               onChange={handleStartDateChange}
               renderInput={params => (
-                <TextField {...params} sx={{ width: 172 }} />
+                <TextField
+                  {...params}
+                  sx={{ width: 172 }}
+                  inputRef={startDateRef}
+                />
               )}
               maxDate={new Date()}
               views={['day']}
@@ -145,7 +161,11 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
               value={endDate}
               onChange={handleEndDateChange}
               renderInput={params => (
-                <TextField {...params} sx={{ width: 172 }} />
+                <TextField
+                  {...params}
+                  sx={{ width: 172 }}
+                  inputRef={endDateRef}
+                />
               )}
               maxDate={new Date()}
               views={['day']}

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

@@ -152,7 +152,7 @@ const InsightsHeader: React.FC<InsightsHeaderProps> = ({ title }) => {
             handleDateRangeClick(event);
           }}
         >
-          Date Range...
+          Date range...
         </MenuItem>
       </Select>
 

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

@@ -112,12 +112,12 @@ describe('InsightsHeader', () => {
     expect(screen.getByText('Last year')).toBeInTheDocument();
   });
 
-  it('should open date range picker when "Date Range..." is clicked', async () => {
+  it('should open date range picker when "Date range..." is clicked', async () => {
     renderComponent();
     const select = screen.getByRole('combobox');
     await user.click(select);
 
-    const dateRangeOption = screen.getByText('Date Range...');
+    const dateRangeOption = screen.getByText('Date range...');
     await user.click(dateRangeOption);
 
     expect(screen.getByTestId('date-range-picker')).toBeInTheDocument();
@@ -140,7 +140,7 @@ describe('InsightsHeader', () => {
 
     const select = screen.getByRole('combobox');
     await user.click(select);
-    await user.click(screen.getByText('Date Range...'));
+    await user.click(screen.getByText('Date range...'));
 
     expect(screen.getByTestId('date-range-picker')).toBeInTheDocument();
 
@@ -156,7 +156,7 @@ describe('InsightsHeader', () => {
 
     const select = screen.getByRole('combobox');
     await user.click(select);
-    await user.click(screen.getByText('Date Range...'));
+    await user.click(screen.getByText('Date range...'));
 
     expect(screen.getByTestId('date-range-picker')).toBeInTheDocument();
   });

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

@@ -125,21 +125,25 @@ const Plugins = () => {
                       },
                     }}
                   >
-                    {plugin.plugin_id}
+                    {plugin.plugin_id ?? '--'}
                   </Link>
                 </TableCell>
                 <TableCell>
-                  <ResponsiveContainer width={250} height={50}>
-                    <LineChart data={plugin.trend}>
-                      <Line
-                        type="monotone"
-                        dataKey="count"
-                        stroke="#9370DB"
-                        strokeWidth={2}
-                        dot={false}
-                      />
-                    </LineChart>
-                  </ResponsiveContainer>
+                  {plugin.trend?.length > 0 ? (
+                    <ResponsiveContainer width={250} height={50}>
+                      <LineChart data={plugin.trend}>
+                        <Line
+                          type="monotone"
+                          dataKey="count"
+                          stroke="#9370DB"
+                          strokeWidth={2}
+                          dot={false}
+                        />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  ) : (
+                    '--'
+                  )}
                 </TableCell>
                 <TableCell>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -154,7 +158,7 @@ const Plugins = () => {
                   </Box>
                 </TableCell>
                 <TableCell>
-                  {Number(plugin.visit_count).toLocaleString()}
+                  {Number(plugin.visit_count).toLocaleString() ?? '--'}
                 </TableCell>
               </TableRow>
             ))

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

@@ -134,9 +134,15 @@ const Techdocs = () => {
                     {parseEntityRef(techdoc.entityRef)?.name}
                   </Link>
                 </TableCell>
-                <TableCell>{parseEntityRef(techdoc.entityRef)?.kind}</TableCell>
-                <TableCell>{getLastUsedDay(techdoc.last_used)}</TableCell>
-                <TableCell>{Number(techdoc.count).toLocaleString()}</TableCell>
+                <TableCell>
+                  {parseEntityRef(techdoc.entityRef)?.kind ?? '--'}
+                </TableCell>
+                <TableCell>
+                  {getLastUsedDay(techdoc.last_used) ?? '--'}
+                </TableCell>
+                <TableCell>
+                  {Number(techdoc.count).toLocaleString() ?? '--'}
+                </TableCell>
               </TableRow>
             ))
           )}

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

@@ -133,7 +133,9 @@ const Templates = () => {
                     {parseEntityRef(template.entityRef).name}
                   </Link>
                 </TableCell>
-                <TableCell>{Number(template.count).toLocaleString()}</TableCell>
+                <TableCell>
+                  {Number(template.count).toLocaleString() ?? '--'}
+                </TableCell>
               </TableRow>
             ))
           )}