Merge branch 'master' into fileupload

Rajesh-Nagarajan-11 · web-flow · commit e3d33e4dda7a · 2026-04-25T09:56:40.000+05:30
diff --git a/README.md b/README.md
@@ -2,6 +2,10 @@
 
 The Sistent Design System provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences. Visit the <a href="https://layer5.io/projects/sistent">project website</a> for more information.
 
+## Naming conventions
+
+Sistent components that surface API data (tables, form fields, charts) must use the camelCase-on-the-wire identifiers defined by the Meshery / Layer5 ecosystem contract. See the [identifier-naming contributor guide](https://github.com/meshery/schemas/blob/master/docs/identifier-naming-contributor-guide.md) in `meshery/schemas` — the reader-friendly 26-row naming directory with before/after and do/don't examples — before adding props, column keys, or query-arg types that map to a Meshery or Layer5 Cloud response shape.
+
 ## Contributing to Sistent
 
 ### Prerequisites
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sistent/sistent",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Reusable React Components and SVG Icons library",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "@emotion/cache": "^11.14.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@meshery/schemas": "^1.1.1",
+    "@meshery/schemas": "^1.2.0",
     "@mui/icons-material": "^7.3.9",
     "@reduxjs/toolkit": "^2.11.2",
     "@testing-library/dom": "^10.4.1",
diff --git a/src/custom/CatalogCard/CatalogCard.tsx b/src/custom/CatalogCard/CatalogCard.tsx
@@ -91,23 +91,23 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
         <MetricsContainerFront>
           <MetricsDiv>
             <DownloadIcon width={18} height={18} />
-            <MetricsCount>{pattern.download_count}</MetricsCount>
+            <MetricsCount>{pattern.downloadCount}</MetricsCount>
           </MetricsDiv>
           <MetricsDiv>
             <CloneIcon width={18} height={18} fill={'#51636B'} />
-            <MetricsCount>{pattern.clone_count}</MetricsCount>
+            <MetricsCount>{pattern.cloneCount}</MetricsCount>
           </MetricsDiv>
           <MetricsDiv>
             <OpenIcon width={18} height={18} fill={'#51636B'} />
-            <MetricsCount>{pattern.view_count}</MetricsCount>
+            <MetricsCount>{pattern.viewCount}</MetricsCount>
           </MetricsDiv>
           <MetricsDiv>
             <DeploymentsIcon width={18} height={18} />
-            <MetricsCount>{pattern.deployment_count}</MetricsCount>
+            <MetricsCount>{pattern.deploymentCount}</MetricsCount>
           </MetricsDiv>
           <MetricsDiv>
             <ShareIcon width={18} height={18} fill={'#51636B'} />
-            <MetricsCount>{pattern.share_count}</MetricsCount>
+            <MetricsCount>{pattern.shareCount}</MetricsCount>
           </MetricsDiv>
         </MetricsContainerFront>
       </DesignInnerCard>
diff --git a/src/custom/CatalogDesignTable/columnConfig.tsx b/src/custom/CatalogDesignTable/columnConfig.tsx
@@ -29,13 +29,13 @@ export const colViews: ColView[] = [
   ['lastName', 'na'],
   ['createdAt', 'na'],
   ['updatedAt', 'l'],
-  ['design_type', 'xs'],
+  ['designType', 'xs'],
   ['class', 'l'],
-  ['view_count', 'na'],
-  ['download_count', 'na'],
-  ['clone_count', 'na'],
-  ['deployment_count', 'na'],
-  ['share_count', 'na'],
+  ['viewCount', 'na'],
+  ['downloadCount', 'na'],
+  ['cloneCount', 'na'],
+  ['deploymentCount', 'na'],
+  ['shareCount', 'na'],
   ['actions', 'xs']
 ];
 
@@ -169,7 +169,7 @@ export const createDesignColumns = ({
       }
     },
     {
-      name: 'design_type',
+      name: 'designType',
       label: 'Type',
       options: {
         filter: true,
@@ -187,39 +187,39 @@ export const createDesignColumns = ({
       }
     },
     {
-      name: 'view_count',
+      name: 'viewCount',
       label: 'Opens',
       options: {
         filter: false,
         sort: true
       }
     },
     {
-      name: 'download_count',
+      name: 'downloadCount',
       label: 'Downloads',
       options: {
         filter: false,
         sort: true
       }
     },
     {
-      name: 'clone_count',
+      name: 'cloneCount',
       label: 'Clones',
       options: {
         filter: false,
         sort: true
       }
     },
     {
-      name: 'deployment_count',
+      name: 'deploymentCount',
       label: 'Deploys',
       options: {
         filter: false,
         sort: true
       }
     },
     {
-      name: 'share_count',
+      name: 'shareCount',
       label: 'Shares',
       options: {
         filter: false,
diff --git a/src/custom/CatalogDetail/MetricsDisplay.tsx b/src/custom/CatalogDetail/MetricsDisplay.tsx
@@ -14,11 +14,11 @@ interface MetricsDisplayProps {
 
 const MetricsDisplay: React.FC<MetricsDisplayProps> = ({ details }) => {
   const metrics: MetricItem[] = [
-    { label: 'Opens', value: details.view_count },
-    { label: 'Downloads', value: details.download_count },
-    { label: 'Deploys', value: details.deployment_count },
-    { label: 'Clones', value: details.clone_count },
-    { label: 'Shares', value: details.share_count }
+    { label: 'Opens', value: details.viewCount },
+    { label: 'Downloads', value: details.downloadCount },
+    { label: 'Deploys', value: details.deploymentCount },
+    { label: 'Clones', value: details.cloneCount },
+    { label: 'Shares', value: details.shareCount }
   ];
 
   return (
diff --git a/src/custom/CatalogDetail/RightPanel.tsx b/src/custom/CatalogDetail/RightPanel.tsx
@@ -61,9 +61,13 @@ const RightPanel: React.FC<RightPanelProps> = ({
   handleVisibilityChange
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
-  const { data: userProfile } = useGetUserProfileByIdQuery({
-    id: details.userId
-  });
+  // Skip the lookup when the card has no owner id — firing with an empty or
+  // undefined id reaches the server and surfaces a 400/404 that, upstream,
+  // leaks a plain-text body which RTK Query cannot parse as JSON.
+  const { data: userProfile } = useGetUserProfileByIdQuery(
+    { id: details.userId },
+    { skip: !details.userId }
+  );
 
   return (
     <div>
diff --git a/src/custom/CustomCatalog/CustomCard.tsx b/src/custom/CustomCatalog/CustomCard.tsx
@@ -49,11 +49,11 @@ export interface Pattern {
   lastName?: string;
   avatarUrl: string;
   name: string;
-  download_count: number;
-  clone_count: number;
-  view_count: number;
-  deployment_count: number;
-  share_count: number;
+  downloadCount: number;
+  cloneCount: number;
+  viewCount: number;
+  deploymentCount: number;
+  shareCount: number;
   userData?: {
     version?: string;
     avatarUrl?: string;
@@ -198,11 +198,11 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
           {isDetailed && (
             <MetricsContainerFront isDetailed={isDetailed}>
               {[
-                { Icon: DownloadIcon, count: pattern.download_count },
-                { Icon: CloneIcon, count: pattern.clone_count },
-                { Icon: OpenIcon, count: pattern.view_count },
-                { Icon: DeploymentsIcon, count: pattern.deployment_count },
-                { Icon: ShareIcon, count: pattern.share_count }
+                { Icon: DownloadIcon, count: pattern.downloadCount },
+                { Icon: CloneIcon, count: pattern.cloneCount },
+                { Icon: OpenIcon, count: pattern.viewCount },
+                { Icon: DeploymentsIcon, count: pattern.deploymentCount },
+                { Icon: ShareIcon, count: pattern.shareCount }
               ].map(({ Icon, count }, index) => (
                 <MetricsDiv key={index}>
                   <Icon
diff --git a/src/custom/PerformersSection/PerformersSection.tsx b/src/custom/PerformersSection/PerformersSection.tsx
@@ -76,27 +76,27 @@ const METRICS: Record<MetricType, MetricConfig> = {
   view: {
     label: 'Most Opens',
     id: 'open',
-    countKey: 'view_count'
+    countKey: 'viewCount'
   },
   clone: {
     label: 'Most Clones',
     id: 'clone',
-    countKey: 'clone_count'
+    countKey: 'cloneCount'
   },
   download: {
     label: 'Most Downloads',
     id: 'download',
-    countKey: 'download_count'
+    countKey: 'downloadCount'
   },
   deployment: {
     label: 'Most Deploys',
     id: 'deployments',
-    countKey: 'deployment_count'
+    countKey: 'deploymentCount'
   },
   share: {
     label: 'Most Shares',
     id: 'share',
-    countKey: 'share_count'
+    countKey: 'shareCount'
   }
 };
 
diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
@@ -212,9 +212,9 @@ const ResponsiveDataTable = ({
             'createdAt',
             'deletedAt',
             'lastLoginTime',
-            'joined_at',
-            'last_run',
-            'next_run'
+            'joinedAt',
+            'lastRun',
+            'nextRun'
           ].includes(col.name)
         ) {
           col.options.customBodyRender = (value: string | number | boolean | object) => {
diff --git a/src/custom/TeamTable/TeamTableConfiguration.tsx b/src/custom/TeamTable/TeamTableConfiguration.tsx
@@ -21,6 +21,10 @@ import {
 import { Team } from '../Workspaces/types';
 
 // currently team does not support bulk team delete
+// TODO(meshery-cloud#?): flip `team_ids` / `team_names` to camelCase once the
+// server's bulk-delete handler lands dual-accept (camel + legacy snake).
+// Deferred from Phase 2.K cascade to avoid a client-only flip that would break
+// the outbound POST body.
 interface DeleteTeamsBtnProps {
   selected: any;
   teams: Team[];
diff --git a/src/custom/UsersTable/UsersTable.tsx b/src/custom/UsersTable/UsersTable.tsx
@@ -265,7 +265,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
     ['lastName', 'na'],
     ['roleNames', 'xs'],
     ['status', 'na'],
-    ['joined_at', 'l'],
+    ['joinedAt', 'l'],
     ['lastLoginTime', 'l'],
     ['deletedAt', 'na']
     // ["actions", "xs"]
@@ -393,7 +393,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
       }
     },
     {
-      name: 'joined_at',
+      name: 'joinedAt',
       label: 'Joined At',
       options: {
         filter: false,
diff --git a/src/custom/Workspaces/types.ts b/src/custom/Workspaces/types.ts
@@ -41,6 +41,9 @@ export interface Team {
   name: string;
   teamId: string;
   description?: string;
+  // TODO(meshery-cloud#?): flip to `teamName` once server renames the SQL alias
+  // (currently aliased to `Team.name`; flipping here without the server rename
+  // would break the wire contract). Deferred from Phase 2.K cascade.
   team_name: string;
   deletedAt: {
     Valid: boolean;
diff --git a/src/icons/ArrowUpward/ArrowUpwardIcon.tsx b/src/icons/ArrowUpward/ArrowUpwardIcon.tsx
@@ -0,0 +1,23 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const ArrowUpwardIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  ...props
+}: IconProps): JSX.Element => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" fill={fill} />
+    </svg>
+  );
+};
+
+export default ArrowUpwardIcon;
diff --git a/src/icons/ArrowUpward/index.ts b/src/icons/ArrowUpward/index.ts
@@ -0,0 +1 @@
+export {default as ArrowUpwardIcon} from "./ArrowUpwardIcon";
diff --git a/src/icons/ChevronRight/ChevronRight.tsx b/src/icons/ChevronRight/ChevronRight.tsx
@@ -0,0 +1,28 @@
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH,DEFAULT_FILL_NONE } from 
+'../../constants/constants';
+import { IconProps } from '../types';
+
+export const ChevronRight = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  ...props
+}: IconProps): JSX.Element => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      {...props}
+    >
+      <path
+        d="M8 16.997a1 1 0 01-.707-1.707l5-5a.999.999 0 000-1.414l-5-5a.999.999 
+        0 111.414-1.414l5 5a3 3 0 010 4.243l-5 5A.997.997 0 018 16.997z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default ChevronRight;
diff --git a/src/icons/ChevronRight/index.ts b/src/icons/ChevronRight/index.ts
@@ -0,0 +1 @@
+export { default as ChevronRight } from './ChevronRight';
diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -10,6 +10,7 @@ export * from './ArrowCompress';
 export * from "./ArrowDownward";
 export * from './ArrowDropDown';
 export * from './ArrowExpand';
+export * from './ArrowUpward';
 export * from './Article';
 export * from './Bell';
 export * from './BuildRounded';
@@ -26,6 +27,7 @@ export * from './CheckCircleOutline';
 export * from './Check';
 export * from './Chevron';
 export * from './ChevronLeft';
+export * from './ChevronRight';
 export * from './Circle';
 export * from './Clone';
 export * from './Close';
