fix(dashboard): make JSON metadata editor resizable

Author: Mayankaggarwal8055

superset-frontend/src/components/Modal/StandardModal.tsx

@@ -41,16 +41,17 @@ interface StandardModalProps {
   maskClosable?: boolean;
   wrapProps?: object;
   contentLoading?: boolean;
+  resizable?: boolean;
 }
 
 // Standard modal widths
 export const MODAL_STANDARD_WIDTH = 500;
 export const MODAL_MEDIUM_WIDTH = 600;
 export const MODAL_LARGE_WIDTH = 900;
 
-const StyledModal = styled(Modal)`
+const StyledModal = styled(Modal)<{ $resizable?: boolean }>`
   .ant-modal-body {
-    max-height: 60vh;
+    max-height: ${({ $resizable }) => ($resizable ? 'none' : '60vh')};
     height: auto;
     overflow-y: auto;
     padding: 0;
@@ -116,6 +117,7 @@ export function StandardModal({
   maskClosable = false,
   wrapProps,
   contentLoading = false,
+  resizable = false,
 }: StandardModalProps) {
   const primaryButtonName = saveText || (isEditMode ? t('Save') : t('Add'));
 
@@ -130,6 +132,8 @@ export function StandardModal({
       show={show}
       width={`${width}px`}
       wrapProps={wrapProps}
+      $resizable={resizable}
+      resizable={resizable}
       title={
         icon ? (
           <ModalTitleWithIcon

superset-frontend/src/dashboard/components/PropertiesModal/index.tsx

@@ -138,7 +138,6 @@ const PropertiesModal = ({
     Array<{
       id: number;
       theme_name: string;
-      json_data?: string;
     }>
   >([]);
   const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
@@ -386,9 +385,7 @@ const PropertiesModal = ({
       colorNamespace,
       certifiedBy,
       certificationDetails,
-      theme: selectedThemeId
-        ? themes.find(t => t.id === selectedThemeId)
-        : null,
+      themeId: selectedThemeId,
       css: customCss,
       ...moreOnSubmitProps,
     };
@@ -444,7 +441,7 @@ const PropertiesModal = ({
 
       // Fetch themes (excluding system themes)
       const themeQuery = rison.encode({
-        columns: ['id', 'theme_name', 'is_system', 'json_data'],
+        columns: ['id', 'theme_name', 'is_system'],
         filters: [
           {
             col: 'is_system',
@@ -626,8 +623,10 @@ const PropertiesModal = ({
           form.submit();
         }
       }}
+      width={900}
       title={t('Dashboard properties')}
       isEditMode
+      resizable
       saveDisabled={dashboardInfo?.isManagedExternally || hasErrors}
       saveLoading={isApplying}
       contentLoading={isLoading}

superset-frontend/src/dashboard/components/PropertiesModal/sections/AdvancedSection.tsx

@@ -84,7 +84,7 @@ const AdvancedSection = ({
       tabSize={2}
       wordWrap
       width="100%"
-      height="200px"
+      height="60vh"
       annotations={toEditorAnnotations(jsonAnnotations)}
     />
   </ModalFormField>