fix(dashboard): improve JSON metadata editor usability and enable resizable modal

Author: Mayankaggarwal8055

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

@@ -41,6 +41,8 @@ interface StandardModalProps {
   maskClosable?: boolean;
   wrapProps?: object;
   contentLoading?: boolean;
+  resizable?: boolean;
+  draggable?: boolean;
 }
 
 // Standard modal widths
@@ -50,10 +52,9 @@ export const MODAL_LARGE_WIDTH = 900;
 
 const StyledModal = styled(Modal)`
   .ant-modal-body {
-    max-height: 60vh;
+    max-height: 80vh;
     height: auto;
     overflow-y: auto;
-    padding: 0;
   }
 
   .ant-modal-header {
@@ -116,6 +117,8 @@ export function StandardModal({
   maskClosable = false,
   wrapProps,
   contentLoading = false,
+  resizable = false,
+  draggable = false,
 }: StandardModalProps) {
   const primaryButtonName = saveText || (isEditMode ? t('Save') : t('Add'));
 
@@ -141,6 +144,8 @@ export function StandardModal({
           title
         )
       }
+      resizable={resizable}
+      draggable={draggable}
     >
       {contentLoading ? (
         <Flex justify="center" align="center" style={{ minHeight: 200 }}>

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

@@ -626,6 +626,9 @@ const PropertiesModal = ({
           form.submit();
         }
       }}
+      resizable
+      draggable
+      width={900}
       title={t('Dashboard properties')}
       isEditMode
       saveDisabled={dashboardInfo?.isManagedExternally || hasErrors}

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

@@ -75,18 +75,20 @@ const AdvancedSection = ({
     }
     bottomSpacing={false}
   >
-    <StyledEditorHost
-      id="dashboard-json-metadata"
-      data-test="dashboard-metadata-editor"
-      value={jsonMetadata}
-      onChange={onJsonMetadataChange}
-      language="json"
-      tabSize={2}
-      wordWrap
-      width="100%"
-      height="200px"
-      annotations={toEditorAnnotations(jsonAnnotations)}
-    />
+    <div style={{ minHeight: 300, height: '60vh' }}>
+      <StyledEditorHost
+        id="dashboard-json-metadata"
+        data-test="dashboard-metadata-editor"
+        value={jsonMetadata}
+        onChange={onJsonMetadataChange}
+        language="json"
+        tabSize={2}
+        wordWrap
+        width="100%"
+        height="100%"
+        annotations={toEditorAnnotations(jsonAnnotations)}
+      />
+    </div>
   </ModalFormField>
 );