Merge pull request #2058 from influxdata/dataloaders/red-x-for-invalid-plugins-in-sidebar

Display red x in sidebar when plugin config is invalid

ui/src/onboarding/components/OnboardingSideBar.tsx

@@ -34,6 +34,8 @@ const configStateToTabStatus = (cs: ConfigurationState): TabStatus => {
   switch (cs) {
     case ConfigurationState.Unconfigured:
       return TabStatus.Default
+    case ConfigurationState.InvalidConfiguration:
+      return TabStatus.Error
     case ConfigurationState.Configured:
       return TabStatus.Success
   }

ui/src/onboarding/reducers/dataLoaders.test.ts

@@ -148,7 +148,7 @@ describe('dataLoader reducer', () => {
         },
         {
           name: TelegrafPluginInputFile.NameEnum.File,
-          configured: ConfigurationState.Unconfigured,
+          configured: ConfigurationState.InvalidConfiguration,
           active: false,
           plugin: {
             name: TelegrafPluginInputFile.NameEnum.File,

ui/src/onboarding/reducers/dataLoaders.ts

@@ -248,7 +248,10 @@ export default (state = INITIAL_STATE, action: Action): DataLoadersState => {
             )
 
             if (!isValidConfig || _.isEmpty(config)) {
-              return {...tp, configured: ConfigurationState.Unconfigured}
+              return {
+                ...tp,
+                configured: ConfigurationState.InvalidConfiguration,
+              }
             } else {
               return {...tp, configured: ConfigurationState.Configured}
             }

ui/src/types/v2/dataLoaders.ts

@@ -50,6 +50,7 @@ export interface DataLoadersState {
 
 export enum ConfigurationState {
   Unconfigured = 'unconfigured',
+  InvalidConfiguration = 'invalid',
   Configured = 'configured',
 }