Improved Plugin Manager Cards to Match Dashboard Card Style #2296
Conversation
|
Hi @Abhishek-Punhani. Thanks for your PR. I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with Once the patch is verified, the new status will be reflected by the I understand the commands that are listed here. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
There was a problem hiding this comment.
Pull request overview
This PR refactors the Dashboard component by extracting the StatCard component into a reusable module and applying it to the PluginManager to create a consistent visual style across the application.
- Extracted StatCard component from Dashboard.tsx into a dedicated component file
- Replaced inline plugin statistics display in PluginManager with the new StatCard component
- Removed unused ChevronUp and ChevronDown imports from Dashboard
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| frontend/src/components/dashboard/StatCard.tsx | New reusable StatCard component extracted from Dashboard with props for customization including title, value, icon, iconColor, change indicators, and custom variants |
| frontend/src/pages/Dashboard.tsx | Removed StatCard component definition and added import for the new shared component; removed unused ChevronUp/ChevronDown imports |
| frontend/src/pages/PluginManager.tsx | Replaced custom inline stats cards with StatCard component, using lucide-react icons (Puzzle, CheckCircle, XCircle) for plugin statistics display |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Get indicator component based on card type | ||
| const getIndicator = () => { | ||
| if (title === 'Total Clusters') { | ||
| return ( | ||
| <div className="flex h-10 items-end space-x-1"> | ||
| {[0.4, 0.7, 1, 0.6, 0.8].map((height, i) => ( | ||
| <motion.div | ||
| key={i} | ||
| className="w-1.5 rounded-t bg-blue-500/70 dark:bg-blue-400/70" | ||
| initial={{ height: 0 }} | ||
| animate={{ height: `${height * 40}px` }} | ||
| transition={{ delay: i * 0.1, duration: 0.5 }} | ||
| ></motion.div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (title === 'Active Clusters') { | ||
| return ( | ||
| <div className="flex h-10 w-10 items-center justify-center"> | ||
| <div className="flex -space-x-1.5"> | ||
| {[...Array(3)].map((_, i) => ( | ||
| <motion.div | ||
| key={i} | ||
| className="h-5 w-5 rounded-full border-2 border-white bg-emerald-500/80 dark:border-gray-800 dark:bg-emerald-400/80" | ||
| initial={{ scale: 0, opacity: 0 }} | ||
| animate={{ scale: 1, opacity: 1 }} | ||
| transition={{ delay: i * 0.1, duration: 0.3 }} | ||
| ></motion.div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (title === 'Binding Policies') { | ||
| return ( | ||
| <div className="relative flex h-10 w-10 items-center justify-center"> | ||
| <div className="absolute inset-0 rounded-full bg-purple-100 dark:bg-purple-900/30"></div> | ||
| <FileText | ||
| size={60} | ||
| className="scale-[0.65] transform text-purple-600/80 dark:text-purple-400/80" | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (title === 'Current Context') { | ||
| return ( | ||
| <div className="relative flex h-10 w-10 items-center justify-center"> | ||
| <div className="absolute inset-0 rounded-full border-2 border-amber-500/30 bg-amber-500/10 dark:border-amber-400/30 dark:bg-amber-400/10"></div> | ||
| <div className="absolute inset-0 rounded-full border-2 border-dashed border-amber-500/40 dark:border-amber-400/40"></div> | ||
| <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-amber-500/20 to-amber-600/30 dark:from-amber-400/20 dark:to-amber-500/30"> | ||
| <Activity size={16} className="text-amber-600 dark:text-amber-400" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| }; |
There was a problem hiding this comment.
The getIndicator function hardcodes checks for specific title values like 'Total Clusters', 'Active Clusters', 'Binding Policies', and 'Current Context'. Since this component is now being reused in PluginManager with different titles ('plugins.list.total', 'plugins.list.active', 'plugins.list.inactive'), the indicators will never render for plugin stats. Consider making indicators more flexible through a prop or using a more generic approach.
There was a problem hiding this comment.
This was same in the original implementation. Do we need to change this?
There was a problem hiding this comment.
@Abhishek-Punhani Create a issue to Fix Hardcoded strings in dashboard.
feat: add StatCard component for plugin statistics display in PluginManager Fixes kubestellar#2268
Abhishek-Punhani
force-pushed
the
Issue2268
branch
from
f34d051 to
509aba5
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| : 'text-sm font-medium text-gray-500 dark:text-gray-400' | ||
| } | ||
| > | ||
| {Math.abs(change)}% {isPositive ? 'increase' : isNegative ? 'decrease' : 'change'} |
There was a problem hiding this comment.
The change percentage display text ('increase', 'decrease', 'change') is hardcoded in English and not internationalized. These strings should be wrapped with the translation function to support multiple languages, similar to how titles are handled elsewhere in the application.
…timize PluginManager stats calculation Signed-off-by: Abhishek-Punhani <[email protected]>
|
@btwshivam PTAL. I have reused the existing card styles from the home page in the plugin manager. Should I also add i18 internationalisation as suggested by Copilot in the review? Also, please let me know if there is any other component whose styling differs from what's expected. |
|
/ok-to-test |
|
@Abhishek-Punhani could please update branch with latest changes ? |
Just Crete a issue to fix hardcoded string in dashboard |
|
/ok-to-test |
|
LGTM label has been added. DetailsGit tree hash: 10aaf2d1c0d9b1ab0b450b346e832d71c4799e6d |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: btwshivam The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
github-project-automation
bot
moved this from In Progress
to Done
in KubeStellar UI Project
3 participants
Description
Improved Plugin Manager Cards to Match Dashboard Card Style
dashboard.tsxfor plugin statistics display in PluginManagerRelated Issue
Fixes #2268
Changes Made
Dashboard.tsxandPluginManager.tsxStatCard.tsxChecklist
Please ensure the following before submitting your PR:
Screenshots or Logs (if applicable)
Screencast.from.12-24-2025.02.47.35.PM.webm
Additional Notes