Merge pull request #149 from glific/task/remove_expired_category

disabled expired category from `enter a flow` node

Author: akanshaaa19

package.json

@@ -2,7 +2,7 @@
   "name": "@glific/flow-editor",
   "license": "AGPL-3.0",
   "repository": "git://github.com/glific/floweditor.git",
-  "version": "1.26.3-23",
+  "version": "1.26.3-24",
   "description": "'Standalone flow editing tool designed for use within the Glific suite of messaging tools'",
   "browser": "umd/flow-editor.min.js",
   "unpkg": "umd/flow-editor.min.js",

src/components/flow/exit/Exit.module.scss

@@ -103,6 +103,28 @@
       }
     }
   }
+
+  &.disabled {
+    opacity: 0.5;
+    color: $red;
+    pointer-events: none;
+  }
+
+  &.disabled::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 100;
+    cursor: not-allowed;
+  }
+
+  &.disabled::before {
+    pointer-events: all;
+  }
+
+  &.disabled > * {
+    pointer-events: none;
+  }
 }
 
 .activity {
@@ -167,7 +189,7 @@
     text-align: left;
     padding: 8px 10px;
     border-top: 1px solid $light_gray;
-    
+
     .operand {
       padding-top: 3px;
       font-size: 12px;

src/components/flow/exit/Exit.tsx

@@ -6,7 +6,7 @@ import { getExitActivityKey } from 'components/flow/exit/helpers';
 import Loading from 'components/loading/Loading';
 import { fakePropType } from 'config/ConfigProvider';
 import { Cancel, getRecentMessages } from 'external';
-import { Category, Exit, FlowNode, LocalizationMap } from 'flowTypes';
+import { Category, Exit, FlowNode, LocalizationMap, StartFlowExitNames } from 'flowTypes';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -252,7 +252,17 @@ export class ExitComp extends React.PureComponent<ExitProps, ExitState> {
     }
   }
 
-  public getName(): { name: string; localized?: boolean } {
+  public getName(): { name: string; localized?: boolean; disabled?: boolean } {
+    let disabled = false;
+    if (
+      this.props.categories &&
+      this.props.categories.some(
+        (category: Category) => category.name === StartFlowExitNames.Expired
+      )
+    ) {
+      disabled = true;
+    }
+
     if (this.props.translating) {
       let name = '';
       let delim = '';
@@ -272,15 +282,16 @@ export class ExitComp extends React.PureComponent<ExitProps, ExitState> {
         delim = ', ';
       });
 
-      return { name, localized };
+      return { name, localized, disabled };
     } else {
       const names: string[] = [];
       this.props.categories.forEach((cat: Category) => {
         names.push(cat.name);
       });
 
       return {
-        name: names.join(', ')
+        name: names.join(', '),
+        disabled
       };
     }
   }
@@ -389,7 +400,7 @@ export class ExitComp extends React.PureComponent<ExitProps, ExitState> {
   }
 
   public render(): JSX.Element {
-    const { name, localized } = this.getName();
+    const { name, localized, disabled } = this.getName();
 
     const nameStyle = name ? styles.name : '';
     const connected = this.props.exit.destination_uuid ? ' jtk-connected' : '';
@@ -411,7 +422,8 @@ export class ExitComp extends React.PureComponent<ExitProps, ExitState> {
       [styles.translating]: this.props.translating,
       [styles.unnamed_exit]: name == null,
       [styles.missing_localization]: name && this.props.translating && !localized,
-      [styles.confirm_delete]: confirmDelete
+      [styles.confirm_delete]: confirmDelete,
+      [styles.disabled]: disabled
     });
 
     const activity = this.getSegmentCount();