Add preventSchemaEdits option to apps and hide or disable buttons to manipulate classes and columns (#960)

Author: cyrilchandelier

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -16,7 +16,7 @@ export default
 @DragDropContext(HTML5Backend)
 class DataBrowserHeaderBar extends React.Component {
   render() {
-    let { headers, onResize, selectAll, onAddColumn, updateOrdering, readonly } = this.props;
+    let { headers, onResize, selectAll, onAddColumn, updateOrdering, readonly, preventSchemaEdits } = this.props;
     let elements = [
       // Note: bulk checkbox is disabled as all rows are selected (not just visible ones due to current lazy loading implementation)
       // TODO: add bulk checking only visible rows
@@ -61,8 +61,9 @@ class DataBrowserHeaderBar extends React.Component {
     if (headers.length % 2) {
       finalStyle.background = 'rgba(224,224,234,0.10)';
     }
+
     elements.push(
-      readonly ? null : (
+      readonly || preventSchemaEdits ? null : (
         <div key='add' className={styles.addColumn} style={finalStyle}>
           <a
             href='javascript:;'

src/dashboard/Data/Browser/Browser.react.js

@@ -34,15 +34,16 @@ import subscribeTo                        from 'lib/subscribeTo';
 import * as ColumnPreferences             from 'lib/ColumnPreferences';
 import * as queryString                   from 'query-string';
 import { Helmet }                         from 'react-helmet';
+import PropTypes                          from 'lib/PropTypes';
+import ParseApp                           from 'lib/ParseApp';
 
 export default
 @subscribeTo('Schema', 'schema')
 class Browser extends DashboardView {
   constructor() {
     super();
     this.section = 'Core';
-    this.subsection = 'Browser'
-    this.action = new SidebarAction('Create a class', this.showCreateClass.bind(this));
+    this.subsection = 'Browser';
     this.noteTimeout = null;
 
     this.state = {
@@ -109,6 +110,11 @@ class Browser extends DashboardView {
   }
 
   componentWillMount() {
+    const { currentApp } = this.context;
+    if (!currentApp.preventSchemaEdits) {
+      this.action = new SidebarAction('Create a class', this.showCreateClass.bind(this));
+    }
+
     this.props.schema.dispatch(ActionTypes.FETCH)
     .then(() => this.handleFetchedSchema());
     if (!this.props.params.className && this.props.schema.data.get('classes')) {
@@ -1055,3 +1061,7 @@ class Browser extends DashboardView {
     );
   }
 }
+
+Browser.contextTypes = {
+  currentApp: PropTypes.instanceOf(ParseApp)
+};

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -15,6 +15,8 @@ import Parse                  from 'parse';
 import React                  from 'react';
 import styles                 from 'dashboard/Data/Browser/Browser.scss';
 import Button                 from 'components/Button/Button.react';
+import ParseApp               from 'lib/ParseApp';
+import PropTypes              from 'lib/PropTypes';
 
 const MAX_ROWS = 60; // Number of rows to render at any time
 const ROW_HEIGHT = 31;
@@ -325,8 +327,14 @@ export default class BrowserTable extends React.Component {
           readonly={!!this.props.relation}
           handleDragDrop={this.props.handleHeaderDragDrop}
           onResize={this.props.handleResize}
-          onAddColumn={this.props.onAddColumn} />
+          onAddColumn={this.props.onAddColumn}
+          preventSchemaEdits={this.context.currentApp.preventSchemaEdits} />
       </div>
     );
   }
 }
+
+BrowserTable.contextTypes = {
+  currentApp: PropTypes.instanceOf(ParseApp)
+};
+

src/dashboard/Data/Browser/BrowserToolbar.react.js

@@ -45,6 +45,8 @@ let BrowserToolbar = ({
   enableDeleteAllRows,
   enableExportClass,
   enableSecurityDialog,
+  enableColumnManipulation,
+  enableClassManipulation
 }) => {
   let selectionLength = Object.keys(selection).length;
   let details = [];
@@ -93,8 +95,8 @@ let BrowserToolbar = ({
     menu = (
       <BrowserMenu title='Edit' icon='edit-solid'>
         <MenuItem text='Add a row' onClick={onAddRow} />
-        <MenuItem text='Add a column' onClick={onAddColumn} />
-        <MenuItem text='Add a class' onClick={onAddClass} />
+        {enableColumnManipulation ? <MenuItem text='Add a column' onClick={onAddColumn} /> : <noscript />}
+        {enableClassManipulation ? <MenuItem text='Add a class' onClick={onAddClass} /> : <noscript />}
         <Separator />
         <MenuItem
           disabled={!selectionLength}
@@ -112,9 +114,9 @@ let BrowserToolbar = ({
           disabled={selectionLength === 0}
           text={selectionLength === 1 && !selection['*'] ? 'Delete this row' : 'Delete these rows'}
           onClick={() => onDeleteRows(selection)} />
-        <MenuItem text='Delete a column' onClick={onRemoveColumn} />
+        {enableColumnManipulation ? <MenuItem text='Delete a column' onClick={onRemoveColumn} /> : <noscript />}
         {enableDeleteAllRows ? <MenuItem text='Delete all rows' onClick={() => onDeleteRows({ '*': true })} /> : <noscript />}
-        <MenuItem text='Delete this class' onClick={onDropClass} />
+        {enableClassManipulation ? <MenuItem text='Delete this class' onClick={onDropClass} /> : <noscript />}
         {enableExportClass ? <Separator /> : <noscript />}
         {enableExportClass ? <MenuItem text='Export this data' onClick={onExport} /> : <noscript />}
       </BrowserMenu>

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -10,7 +10,7 @@ import BrowserToolbar         from 'dashboard/Data/Browser/BrowserToolbar.react'
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import ParseApp               from 'lib/ParseApp';
 import React                  from 'react';
-import PropTypes   from 'lib/PropTypes'; 
+import PropTypes              from 'lib/PropTypes';
 import { SpecialClasses }     from 'lib/Constants';
 
 /**
@@ -189,6 +189,7 @@ export default class DataBrowser extends React.Component {
 
   render() {
     let { className, ...other } = this.props;
+    const { preventSchemaEdits } = this.context.currentApp;
     return (
       <div>
         <BrowserTable
@@ -206,9 +207,11 @@ export default class DataBrowser extends React.Component {
           className={SpecialClasses[className] || className}
           classNameForPermissionsEditor={className}
           setCurrent={this.setCurrent.bind(this)}
-          enableDeleteAllRows={this.context.currentApp.serverInfo.features.schemas.clearAllDataFromClass}
-          enableExportClass={this.context.currentApp.serverInfo.features.schemas.exportClass}
-          enableSecurityDialog={this.context.currentApp.serverInfo.features.schemas.editClassLevelPermissions}
+          enableDeleteAllRows={this.context.currentApp.serverInfo.features.schemas.clearAllDataFromClass && !preventSchemaEdits}
+          enableExportClass={this.context.currentApp.serverInfo.features.schemas.exportClass && !preventSchemaEdits}
+          enableSecurityDialog={this.context.currentApp.serverInfo.features.schemas.editClassLevelPermissions && !preventSchemaEdits}
+          enableColumnManipulation={!preventSchemaEdits}
+          enableClassManipulation={!preventSchemaEdits}
           {...other}/>
       </div>
     );

src/lib/ParseApp.js

@@ -42,6 +42,7 @@ export default class ParseApp {
     primaryBackgroundColor,
     secondaryBackgroundColor,
     supportedPushLocales,
+    preventSchemaEdits
   }) {
     this.name = appName;
     this.createdAt = created_at ? new Date(created_at) : new Date();
@@ -65,6 +66,7 @@ export default class ParseApp {
     this.primaryBackgroundColor=primaryBackgroundColor;
     this.secondaryBackgroundColor=secondaryBackgroundColor;
     this.supportedPushLocales = supportedPushLocales ? supportedPushLocales : [];
+    this.preventSchemaEdits = preventSchemaEdits || false;
 
     if(!supportedPushLocales) {
       console.warn(`Missing push locales for '` + appName + `', see this link for details on setting localizations up. https://github.com/parse-community/parse-dashboard#configuring-localized-push-notifications`);