Add support for formatting .pgerd ERD project file. #8912

docs/en_US/preferences.rst

@@ -254,6 +254,12 @@ Use the fields on the *Options* panel to manage ERD preferences.
 * Use *Cardinality Notation* to change the cardinality notation format
   used to present relationship links.
 
+* Use *Format ERD Project File?* if you want to format the .pgerd ERD
+  project file. It's a JSON file which will be formatted.
+
+* Use *Image Download Resolution* to change the ERD image download
+  resolution. Higher values will use higher memory and slower rendering.
+
 * When the *SQL With DROP Table* switch is set to *True*, the SQL
   generated by the ERD Tool will add DROP table DDL before each CREATE
   table DDL.

web/pgadmin/tools/erd/__init__.py

@@ -457,6 +457,19 @@ class ERDModule(PgAdminModule):
             )
         )
 
+        self.preference.register(
+            'options',
+            'format_pgerd',
+            gettext('Format ERD Project File?'),
+            'boolean',
+            False,
+            category_label=PREF_LABEL_OPTIONS,
+            help_str=gettext(
+                'If enabled, the .pgerd project file of the ERD tool will '
+                'be formatted before saving.'
+            )
+        )
+
 
 blueprint = ERDModule(MODULE_NAME, __name__, static_url_path='/static')
 

web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx

@@ -677,9 +677,10 @@ export default class ERDTool extends React.Component {
 
   saveFile(fileName) {
     this.setLoading(gettext('Saving...'));
+    const serialFile = this.diagram.serialize(this.props.pgAdmin.Browser.utils.app_version_int);
     this.apiObj.post(url_for('file_manager.save_file'), {
       'file_name': decodeURI(fileName),
-      'file_content': JSON.stringify(this.diagram.serialize(this.props.pgAdmin.Browser.utils.app_version_int)),
+      'file_content': JSON.stringify(serialFile, null, this.state.preferences.format_pgerd ? 4 : null),
     }).then(()=>{
       this.props.pgAdmin.Browser.notifier.success(gettext('Project saved successfully.'));
       this.setState({