korbit-ai[bot] commented on code in PR #33090:
URL: https://github.com/apache/superset/pull/33090#discussion_r2053790612


##########
superset-frontend/src/components/Divider/index.tsx:
##########
@@ -16,12 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import { css } from '@superset-ui/core';
 import { Divider as AntdDivider } from 'antd-v5';
 import type { DividerProps } from './types';
 
 export function Divider(props: DividerProps) {

Review Comment:
   ### Missing custom behavior documentation <sub>![category 
Documentation](https://img.shields.io/badge/Documentation-7c3aed)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The Divider component modifies the default antd Divider with custom margin 
styling, but this behavior is not documented.
   
   ###### Why this matters
   Without documenting the custom margin behavior, other developers might be 
unaware of this deviation from the default antd component, leading to 
unexpected styling issues.
   
   ###### Suggested change ∙ *Feature Preview*
   /**
    * A wrapper around antd's Divider that applies consistent margin spacing 
based on the theme.
    */
   export function Divider(props: DividerProps) {
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/fb9a1954-4897-4125-8809-a2d3d6d0eea1/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/fb9a1954-4897-4125-8809-a2d3d6d0eea1?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/fb9a1954-4897-4125-8809-a2d3d6d0eea1?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/fb9a1954-4897-4125-8809-a2d3d6d0eea1?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/fb9a1954-4897-4125-8809-a2d3d6d0eea1)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:f1c3f1e9-cae4-4ae1-81d5-1fdf8294b006 -->
   
   
   [](f1c3f1e9-cae4-4ae1-81d5-1fdf8294b006)



##########
superset-frontend/src/components/Divider/index.tsx:
##########
@@ -16,12 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import { css } from '@superset-ui/core';
 import { Divider as AntdDivider } from 'antd-v5';
 import type { DividerProps } from './types';
 
 export function Divider(props: DividerProps) {
-  return <AntdDivider {...props} />;
+  return (
+    <AntdDivider
+      css={theme => css`
+        margin: ${theme.margin}px 0;
+      `}

Review Comment:
   ### Inefficient Dynamic CSS-in-JS <sub>![category 
Performance](https://img.shields.io/badge/Performance-4f46e5)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   Dynamic CSS-in-JS generation on every render creates new style objects and 
triggers unnecessary style recalculations.
   
   ###### Why this matters
   Each render will create a new CSS object, causing potential performance 
overhead due to style recalculation and garbage collection, especially if this 
component is used frequently in the application.
   
   ###### Suggested change ∙ *Feature Preview*
   Move the CSS definition outside the component or memoize it if 
theme-dependent styles are necessary:
   ```tsx
   const getDividerStyle = memoize((margin: number) => css`
     margin: ${margin}px 0;
   `);
   
   export function Divider(props: DividerProps) {
     return <AntdDivider css={getDividerStyle(theme.margin)} {...props} />;
   }
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/23dfed8d-80dd-477f-acf0-d80616bee0b2/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/23dfed8d-80dd-477f-acf0-d80616bee0b2?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/23dfed8d-80dd-477f-acf0-d80616bee0b2?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/23dfed8d-80dd-477f-acf0-d80616bee0b2?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/23dfed8d-80dd-477f-acf0-d80616bee0b2)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:7b764aa3-8a81-4c7f-810e-b0a8a202416b -->
   
   
   [](7b764aa3-8a81-4c7f-810e-b0a8a202416b)



##########
superset-frontend/src/features/home/LanguagePicker.tsx:
##########
@@ -82,7 +83,9 @@ export default function LanguagePicker(props: 
LanguagePickerProps) {
         >
           <StyledLabel className="f16">
             <i className={`flag ${languages[langKey].flag}`} />
-            <a href={languages[langKey].url}>{languages[langKey].name}</a>
+            <Typography.Link href={languages[langKey].url}>

Review Comment:
   ### Unsanitized URL in href attribute <sub>![category 
Security](https://img.shields.io/badge/Security-e11d48)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The URL from languages object is directly used in the href attribute without 
validation or sanitization.
   
   ###### Why this matters
   If the languages object contains malicious URLs (e.g., javascript: 
protocol), it could lead to XSS attacks when users click on the language links.
   
   ###### Suggested change ∙ *Feature Preview*
   Sanitize URLs before using them in href attributes. Add a URL validation 
helper:
   ```typescript
   const isValidUrl = (url: string): boolean => {
     try {
       const parsed = new URL(url);
       return ['http:', 'https:'].includes(parsed.protocol);
     } catch {
       return false;
     }
   };
   
   // Usage
   <Typography.Link href={isValidUrl(languages[langKey].url) ? 
languages[langKey].url : '#'}>
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4a72131a-243c-4eda-9281-bfcdc1105875/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4a72131a-243c-4eda-9281-bfcdc1105875?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4a72131a-243c-4eda-9281-bfcdc1105875?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4a72131a-243c-4eda-9281-bfcdc1105875?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4a72131a-243c-4eda-9281-bfcdc1105875)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:9c7a6051-f4f1-460f-8923-4572171a237e -->
   
   
   [](9c7a6051-f4f1-460f-8923-4572171a237e)



##########
superset-frontend/src/components/ErrorMessage/MarshmallowErrorMessage.tsx:
##########
@@ -32,11 +33,6 @@ interface MarshmallowErrorExtra {
   }[];
 }
 
-const StyledUl = styled.ul`
-  padding-left: ${({ theme }) => theme.sizeUnit * 5}px;
-  padding-top: ${({ theme }) => theme.sizeUnit * 4}px;
-`;
-
 const extractInvalidValues = (messages: object, payload: object): string[] => {

Review Comment:
   ### Generic object type reduces type safety <sub>![category 
Design](https://img.shields.io/badge/Design-0d9488)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The parameter types are declared as 'object' which is too generic and 
provides no type safety. The function actually expects Record<string, any>.
   
   ###### Why this matters
   Using 'object' type bypasses TypeScript's type checking benefits and 
requires type assertions inside the function. This reduces code reliability and 
makes refactoring more difficult.
   
   ###### Suggested change ∙ *Feature Preview*
   ```typescript
   const extractInvalidValues = (
     messages: Record<string, any>,
     payload: Record<string, any>
   ): string[] => {
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d81bf01a-f739-4cb0-a467-2e419d65ae27/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d81bf01a-f739-4cb0-a467-2e419d65ae27?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d81bf01a-f739-4cb0-a467-2e419d65ae27?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d81bf01a-f739-4cb0-a467-2e419d65ae27?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d81bf01a-f739-4cb0-a467-2e419d65ae27)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:66cd38a3-8a01-4035-aafd-4c18ef8132dc -->
   
   
   [](66cd38a3-8a01-4035-aafd-4c18ef8132dc)



##########
superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx:
##########
@@ -60,13 +60,22 @@ export const DependenciesRow = memo(({ filter }: 
FilterCardRowProps) => {
   const tooltipText = useMemo(
     () =>
       elementsTruncated > 0 && dependencies ? (
-        <TooltipList>
-          {dependencies.map(dependency => (
-            <li>
-              <DependencyValue dependency={dependency} />
-            </li>
-          ))}
-        </TooltipList>
+        <List
+          dataSource={dependencies}
+          renderItem={dependency => (
+            <List.Item
+              compact
+              css={theme => css`
+                span[role='button'] {
+                  color: ${theme.colorWhite};
+                }
+              `}

Review Comment:
   ### Inline Styles Reducing Component Clarity <sub>![category 
Readability](https://img.shields.io/badge/Readability-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   Inline CSS-in-JS within the render function makes the component harder to 
read and understand at a glance.
   
   ###### Why this matters
   Mixing component logic with styling concerns increases cognitive load. 
Moving styles outside the component improves code organization and 
maintainability.
   
   ###### Suggested change ∙ *Feature Preview*
   ```typescript
   const listItemStyles = (theme: Theme) => css`
     span[role='button'] {
       color: ${theme.colorWhite};
     }
   `;
   
   // In component:
   <List.Item compact css={listItemStyles}>
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/93389a0d-55d7-42de-bb07-d4163b77235e/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/93389a0d-55d7-42de-bb07-d4163b77235e?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/93389a0d-55d7-42de-bb07-d4163b77235e?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/93389a0d-55d7-42de-bb07-d4163b77235e?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/93389a0d-55d7-42de-bb07-d4163b77235e)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:c51dd24f-984a-4f57-a797-4334fdece54b -->
   
   
   [](c51dd24f-984a-4f57-a797-4334fdece54b)



##########
superset-frontend/src/components/List/index.ts:
##########
@@ -16,11 +16,41 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { css, styled } from '@superset-ui/core';
 import { List as AntdList } from 'antd-v5';
+import type { ListProps, ListItemProps, ListItemMetaProps } from './types';
+
+interface CompactListItemProps extends ListItemProps {
+  compact?: boolean;
+}

Review Comment:
   ### Missing interface property documentation <sub>![category 
Documentation](https://img.shields.io/badge/Documentation-7c3aed)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The CompactListItemProps interface lacks documentation explaining the 
purpose and effect of the 'compact' prop.
   
   ###### Why this matters
   Future developers may not understand when to use the compact prop and its 
visual implications without proper documentation.
   
   ###### Suggested change ∙ *Feature Preview*
   interface CompactListItemProps extends ListItemProps {
     /** When true, reduces padding around the list item for a more condensed 
appearance */
     compact?: boolean;
   }
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/775b0c52-8759-4cde-bc11-2af41e06720a/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/775b0c52-8759-4cde-bc11-2af41e06720a?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/775b0c52-8759-4cde-bc11-2af41e06720a?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/775b0c52-8759-4cde-bc11-2af41e06720a?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/775b0c52-8759-4cde-bc11-2af41e06720a)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:90ad158f-6ca4-48f0-8066-2020e7d20971 -->
   
   
   [](90ad158f-6ca4-48f0-8066-2020e7d20971)



##########
superset-frontend/src/components/Divider/index.tsx:
##########
@@ -16,12 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import { css } from '@superset-ui/core';
 import { Divider as AntdDivider } from 'antd-v5';
 import type { DividerProps } from './types';
 
 export function Divider(props: DividerProps) {
-  return <AntdDivider {...props} />;
+  return (
+    <AntdDivider
+      css={theme => css`
+        margin: ${theme.margin}px 0;
+      `}
+      {...props}
+    />
+  );
 }

Review Comment:
   ### Inline CSS-in-JS reduces style maintainability <sub>![category 
Design](https://img.shields.io/badge/Design-0d9488)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The component hardcodes styling logic within the component itself rather 
than using a separate styled component or style constant.
   
   ###### Why this matters
   This approach reduces reusability and makes style maintenance more 
difficult. If the same styling needs to be applied elsewhere or modified 
globally, it would require changes in multiple places.
   
   ###### Suggested change ∙ *Feature Preview*
   Create a styled component or constant:
   ```typescript
   const StyledDivider = styled(AntdDivider)`
     margin: ${({ theme }) => theme.margin}px 0;
   `;
   
   export function Divider(props: DividerProps) {
     return <StyledDivider {...props} />;
   }
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4fff99c9-8514-46dc-b082-6bf75cfa0362/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4fff99c9-8514-46dc-b082-6bf75cfa0362?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4fff99c9-8514-46dc-b082-6bf75cfa0362?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4fff99c9-8514-46dc-b082-6bf75cfa0362?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4fff99c9-8514-46dc-b082-6bf75cfa0362)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:0539dae1-1b63-47b6-9763-88f585a5f479 -->
   
   
   [](0539dae1-1b63-47b6-9763-88f585a5f479)



##########
superset-frontend/src/components/List/index.ts:
##########
@@ -16,11 +16,41 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { css, styled } from '@superset-ui/core';
 import { List as AntdList } from 'antd-v5';
+import type { ListProps, ListItemProps, ListItemMetaProps } from './types';
+
+interface CompactListItemProps extends ListItemProps {
+  compact?: boolean;
+}
+
+const CompactListItem = styled(AntdList.Item)<CompactListItemProps>`
+  && {
+    ${({ compact, theme }) =>
+      compact &&
+      css`
+        padding: ${theme.sizeUnit / 2}px ${theme.sizeUnit * 3}px
+          ${theme.sizeUnit / 2}px ${theme.sizeUnit}px;
+      `}
+    ${({ theme }) => css`
+      && a {
+        color: ${theme.colorLink};
+        &:hover {
+          color: ${theme.colorLinkHover};
+        }
+      }
+    `}
+  }
+`;
+
+type CompactListItemWithMeta = typeof CompactListItem & {
+  Meta: typeof AntdList.Item.Meta;
+};
+
+(CompactListItem as CompactListItemWithMeta).Meta = AntdList.Item.Meta;

Review Comment:
   ### Brittle component composition through property assignment 
<sub>![category Design](https://img.shields.io/badge/Design-0d9488)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   Direct property assignment to add Meta to CompactListItem creates a brittle 
type assertion and side-effect based design.
   
   ###### Why this matters
   This approach makes the component structure harder to understand, maintain, 
and could break with TypeScript strict mode or future React versions.
   
   ###### Suggested change ∙ *Feature Preview*
   Create a proper compound component structure:
   ```typescript
   const CompactListItem = Object.assign(
     styled(AntdList.Item)<CompactListItemProps>`...`,
     { Meta: AntdList.Item.Meta }
   );
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/bfafd89a-5ca7-47b6-9fa8-4523d93ea4d4/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/bfafd89a-5ca7-47b6-9fa8-4523d93ea4d4?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/bfafd89a-5ca7-47b6-9fa8-4523d93ea4d4?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/bfafd89a-5ca7-47b6-9fa8-4523d93ea4d4?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/bfafd89a-5ca7-47b6-9fa8-4523d93ea4d4)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:047e095e-27be-4ac1-9c2b-2ddb7daaec8d -->
   
   
   [](047e095e-27be-4ac1-9c2b-2ddb7daaec8d)



##########
superset-frontend/src/components/Typography/index.tsx:
##########
@@ -16,6 +16,31 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Typography } from 'antd-v5';
+import { styled, css } from '@superset-ui/core';
+import { Typography as AntdTypography } from 'antd-v5';
 
-export default Typography;
+const StyledLink = styled(AntdTypography.Link)`
+    ${({ theme }) =>
+      css`
+      && {
+        color: ${theme.colorLink};
+        &:hover {
+          color: ${theme.colorLinkHover};
+        }
+    `}
+  }
+`;
+
+export const Typography: typeof AntdTypography & {
+  Text: typeof AntdTypography.Text;
+  Link: typeof StyledLink;
+  Title: typeof AntdTypography.Title;
+  Paragraph: typeof AntdTypography.Paragraph;
+} = Object.assign(AntdTypography, {
+  Text: AntdTypography.Text,
+  Link: StyledLink,
+  Title: AntdTypography.Title,
+  Paragraph: AntdTypography.Paragraph,
+});

Review Comment:
   ### Inefficient Static Object Creation <sub>![category 
Performance](https://img.shields.io/badge/Performance-4f46e5)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   Object.assign creates a new object on every module import, which is 
unnecessary since the components are static.
   
   ###### Why this matters
   Creating objects during module initialization adds to the application's 
startup time and memory usage, especially if the module is imported frequently.
   
   ###### Suggested change ∙ *Feature Preview*
   Define the Typography object directly without Object.assign:
   ```typescript
   export const Typography = {
     ...AntdTypography,
     Text: AntdTypography.Text,
     Link: StyledLink,
     Title: AntdTypography.Title,
     Paragraph: AntdTypography.Paragraph,
   } as typeof AntdTypography & {
     Text: typeof AntdTypography.Text;
     Link: typeof StyledLink;
     Title: typeof AntdTypography.Title;
     Paragraph: typeof AntdTypography.Paragraph;
   };
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/f1384cdd-2a4c-41bf-9972-a54984d41b70/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/f1384cdd-2a4c-41bf-9972-a54984d41b70?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/f1384cdd-2a4c-41bf-9972-a54984d41b70?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/f1384cdd-2a4c-41bf-9972-a54984d41b70?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/f1384cdd-2a4c-41bf-9972-a54984d41b70)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:95103fc2-526f-4a63-8fa6-a425c03a2a25 -->
   
   
   [](95103fc2-526f-4a63-8fa6-a425c03a2a25)



##########
superset-frontend/src/components/index.ts:
##########
@@ -187,3 +187,7 @@ export {
   type LabeledValue,
   type RefSelectProps,
 } from './Select';
+
+export { Image, type ImageProps } from './Image';
+
+export { Upload, type UploadFile, type UploadChangeParam } from './Upload';

Review Comment:
   ### Export ordering inconsistency <sub>![category 
Readability](https://img.shields.io/badge/Readability-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The new exports are added at the end of the file without following the 
existing alphabetical ordering pattern used throughout the file.
   
   ###### Why this matters
   Breaking the alphabetical ordering pattern makes it harder to quickly locate 
exports and maintain consistency in the codebase. This is particularly 
important in index files that serve as the main export point.
   
   ###### Suggested change ∙ *Feature Preview*
   Move the exports to maintain alphabetical ordering:
   ```typescript
   // Move Image export between IconTooltip and ImportModal
   export { Image, type ImageProps } from './Image';
   
   // Move Upload export after Typography (or at the appropriate alphabetical 
position)
   export { Upload, type UploadFile, type UploadChangeParam } from './Upload';
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/37c48621-07a6-4a75-87a6-b28751b6757b/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/37c48621-07a6-4a75-87a6-b28751b6757b?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/37c48621-07a6-4a75-87a6-b28751b6757b?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/37c48621-07a6-4a75-87a6-b28751b6757b?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/37c48621-07a6-4a75-87a6-b28751b6757b)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:201167d8-96ed-4720-858c-3c4865742f33 -->
   
   
   [](201167d8-96ed-4720-858c-3c4865742f33)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to