Create dashboard form validation errors messages

client/src/actions/ConfigurationsActions.ts

@@ -8,7 +8,7 @@ interface IConfigurationsActions {
   createDashboard(dashboard: IDashboardConfig): any;
   loadTemplate(id: string): any;
   saveConfiguration(dashboard: IDashboardConfig): any;
-  failure(error: any): void;
+  failure(error: any): any;
   submitDashboardFile(content: string, fileName: string): void;
   convertDashboardToString(dashboard: IDashboardConfig): string;
   deleteDashboard(id: string): any;

client/src/components/Home/index.tsx

@@ -43,6 +43,7 @@ const styles = {
 
 interface IHomeState extends ISetupConfig {
   loaded?: boolean;
+  errors?: any;
   templates?: IDashboardConfig[];
   selectedTemplateId?: string;
   template?: IDashboardConfig;
@@ -68,6 +69,7 @@ export default class Home extends React.Component<any, IHomeState> {
     clientSecret: '',
     issuer: '',
     loaded: false,
+    errors: null,
 
     templates: [],
     selectedTemplateId: null,
@@ -106,11 +108,17 @@ export default class Home extends React.Component<any, IHomeState> {
     this.downloadTemplate = this.downloadTemplate.bind(this);
   }
 
-  updateConfiguration(state: {templates: IDashboardConfig[], template: IDashboardConfig, creationState: string}) {
+  updateConfiguration(state: {
+    templates: IDashboardConfig[],
+    template: IDashboardConfig,
+    creationState: string,
+    errors: any
+  }) {
     this.setState({
       templates: state.templates || [],
       template: state.template,
-      creationState: state.creationState
+      creationState: state.creationState,
+      errors: state.errors,
     });
     if (this.state.stage === 'requestDownloadTemplate') {
       this.downloadTemplate(this.state.template);
@@ -235,7 +243,7 @@ export default class Home extends React.Component<any, IHomeState> {
   }
 
   render() {
-    let { loaded, redirectUrl, templates, selectedTemplateId, template } = this.state;
+    let { errors, loaded, redirectUrl, templates, selectedTemplateId, template } = this.state;
     let { importVisible } = this.state;
     let { importedFileContent, fileName } = this.state;
     let { infoVisible, infoHtml, infoTitle } = this.state;
@@ -252,6 +260,14 @@ export default class Home extends React.Component<any, IHomeState> {
       return null;
     }
 
+    let error = false;
+    let errorText = null;
+    const isBadId = errors && errors.error && errors.error.message && errors.error.type && errors.error.type === 'id';
+    if (isBadId) {
+      errorText = errors.error.message;
+      error = true;
+    }
+
     let createCard = (tmpl, index) => (
       <div key={index} className="md-cell" style={styles.card}>
         <Card 
@@ -391,6 +407,8 @@ export default class Home extends React.Component<any, IHomeState> {
             defaultValue={template && template.id || ''}
             lineDirection="center"
             placeholder="Choose an ID for the dashboard (will be used in the url)"
+            error={error}
+            errorText={errorText}
           />
           <TextField
             id="name"

client/src/stores/ConfigurationsStore.ts

@@ -14,6 +14,7 @@ export interface IConfigurationsStoreState {
   connections: IDictionary;
   connectionsMissing: boolean;
   loaded: boolean;
+  errors: any;
 }
 
 class ConfigurationsStore extends AbstractStoreModel<IConfigurationsStoreState> implements IConfigurationsStoreState {
@@ -26,6 +27,7 @@ class ConfigurationsStore extends AbstractStoreModel<IConfigurationsStoreState>
   connections: IDictionary;
   connectionsMissing: boolean;
   loaded: boolean;
+  errors: any;
 
   constructor() {
     super();
@@ -38,12 +40,14 @@ class ConfigurationsStore extends AbstractStoreModel<IConfigurationsStoreState>
     this.connections = {};
     this.connectionsMissing = false;
     this.loaded = false;
+    this.errors = null;
 
     this.bindListeners({
       loadConfiguration: configurationActions.loadConfiguration,
       loadDashboard: configurationActions.loadDashboard,
       loadTemplate: configurationActions.loadTemplate,
-      createDashboard: configurationActions.createDashboard
+      createDashboard: configurationActions.createDashboard,
+      failure: configurationActions.failure
     });
 
     configurationActions.loadConfiguration();
@@ -84,6 +88,7 @@ class ConfigurationsStore extends AbstractStoreModel<IConfigurationsStoreState>
   }
 
   createDashboard(result: { dashboard: IDashboardConfig }) {
+    this.errors = null;
     this.creationState = 'successful';
   }
 
@@ -103,6 +108,10 @@ class ConfigurationsStore extends AbstractStoreModel<IConfigurationsStoreState>
     }
   }
 
+  failure(errors: any) {
+    this.errors = errors;
+  }
+
   private getConnections(dashboard: IDashboardConfig): any {
     let requiredParameters = {};
     let dataSources = DataSourceConnector.getDataSources();

server/routes/api.js

@@ -269,12 +269,12 @@ router.put('/templates/:id', (req, res) => {
   });
 });
 
-router.put('/dashboards/:id', (req, res) => {
+router.put('/dashboards/:id?', (req, res) => {
   let { id } = req.params || {};
   let { script } = req.body || {};
 
   if (!id || !script) {
-    return res.end({ error: 'No id or script were supplied for the new dashboard' });
+    return res.json({ errors: {message: 'No id or script were supplied for the new dashboard', type: 'id'}} );
   }
 
   const { privateDashboard } = paths();
@@ -283,7 +283,7 @@ router.put('/dashboards/:id', (req, res) => {
   let dashboardExists = fs.existsSync(dashboardPath);
 
   if (dashboardFile || dashboardExists) {
-    return res.json({ errors: ['Dashboard id or filename already exists'] });
+    return res.json({ errors: {message: 'Dashboard id or filename already exists', type: 'id'}} );
   }
 
   fs.writeFile(dashboardPath, script, err => {