feat(overmind-devtools): add error indication to actions list

Author: christianalfoni

packages/node_modules/overmind-devtools/src/components/ActionsList/index.tsx

@@ -13,6 +13,7 @@ const ActionsList: SFC = () => {
       {state.currentApp.actionsList.map((item) => {
         if (item.type === ActionsListItemType.ACTION) {
           const action = state.currentApp.actions[item.id]
+
           return (
             <div
               className={styles.actionItem}
@@ -32,6 +33,12 @@ const ActionsList: SFC = () => {
                   action.actionName
                 )}
               </span>
+              <span
+                className={styles.errorIndication}
+                style={{
+                  visibility: action.hasError ? 'visible' : 'hidden',
+                }}
+              />
             </div>
           )
         }

packages/node_modules/overmind-devtools/src/components/ActionsList/styles.ts

@@ -6,22 +6,31 @@ export const list = css`
 
 export const actionItem = css`
   position: relative;
+  display: flex;
+  align-items: center;
   padding: var(--padding-1);
   cursor: pointer;
-  text-indent: 30px;
   border-bottom: 1px solid var(--color-dark-3);
   :hover {
     background-color: var(--color-dark-3);
   }
 `
 
-export const actionColor = css`
-  position: absolute;
-  top: calc(50% - 5px);
-  left: 10px;
+export const errorIndication = css`
+  margin-left: auto;
+  background-color: var(--color-red);
   border-radius: 2px;
   width: 10px;
   height: 10px;
+  margin-right: 10px;
+`
+
+export const actionColor = css`
+  border-radius: 2px;
+  flex: 0 0 10px;
+  height: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
 `
 
 export const actionSubItem = css`

packages/node_modules/overmind-devtools/src/overmind/operators.ts

@@ -195,6 +195,7 @@ export const addAction: Operator<StartActionMessage> = action(
       ...action,
       isRunning: true,
       operators: [],
+      hasError: false,
     }
 
     if (
@@ -306,6 +307,7 @@ export const updateEffect: Operator<EffectMessage> = action(
   ({ value: message, state }) => {
     const effect = message.data
     const id = getActionId(effect)
+    const action = state.apps[message.appName].actions[id]
     const operator =
       state.apps[message.appName].actions[id].operators[effect.operatorId]
     const existingEvent = operator.events.find(
@@ -322,6 +324,10 @@ export const updateEffect: Operator<EffectMessage> = action(
         data: effect,
       })
     }
+
+    if (effect.error) {
+      action.hasError = true
+    }
   }
 )
 

packages/node_modules/overmind-devtools/src/overmind/types.ts

@@ -77,6 +77,7 @@ export type Action = {
   isRunning: boolean
   operators: Operator[]
   value: any
+  hasError: boolean
 }
 
 export type Actions = {

packages/node_modules/overmind-devtools/src/styles/text.ts

@@ -84,12 +84,12 @@ export const description = css`
   font-size: var(--font-size-2);
   text-transform: none;
   font-weight: normal;
-  padding: none;
+  padding: 0;
 `
 
 export const hint = css`
   font-size: var(--font-size-1);
   text-transform: none;
   font-weight: normal;
-  padding: none;
+  padding: 0;
 `

packages/node_modules/overmind-devtools/webpack.config.js

@@ -10,6 +10,9 @@ module.exports = {
     path: path.resolve('dist'),
     filename: 'bundle.js',
   },
+  devServer: {
+    disableHostCheck: true,
+  },
   module: {
     rules: [
       {