From 532e87f6dc589b5e6e5ecd92a110b1083d59dfd2 Mon Sep 17 00:00:00 2001
From: Sudheer <sudheer.105@gmail.com>
Date: Thu, 6 Sep 2018 19:56:26 +0530
Subject: [PATCH] MM-11942 Add deactivate user state to more users modal
 (#2079)

---
 .../__snapshots__/user_list_test.test.js.snap | 1378 +++++++++++++++++
 .../user_list_row/user_list_row.js            |   11 +-
 .../user_list_row/user_list_test.test.js      |   89 ++
 3 files changed, 1475 insertions(+), 3 deletions(-)
 create mode 100644 app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
 create mode 100644 app/components/custom_list/user_list_row/user_list_test.test.js

diff --git a/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap b/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
new file mode 100644
index 000000000..3c2fe827d
--- /dev/null
+++ b/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
@@ -0,0 +1,1378 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserListRow should match snapshot 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <UserListRow
+    id="123455"
+    isMyUser={false}
+    teammateNameDisplay="test"
+    theme={Object {}}
+    user={
+      Object {
+        "delete_at": 0,
+        "id": "21345",
+        "username": "user",
+      }
+    }
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": Array [
+        <Connect(ProfilePicture)
+          size={32}
+          userId="21345"
+        />,
+        <Component
+          style={
+            Object {
+              "flexDirection": "row",
+              "marginLeft": 5,
+            }
+          }
+        >
+          <Component>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                }
+              }
+            >
+              user
+            </Text>
+          </Component>
+          <Component>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                  "marginLeft": 5,
+                }
+              }
+            >
+              (@user)
+            </Text>
+          </Component>
+        </Component>,
+      ],
+      "enabled": true,
+      "id": "21345",
+      "onPress": [Function],
+      "selectable": undefined,
+      "selected": undefined,
+      "theme": Object {},
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "size": 32,
+          "userId": "21345",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "children": Array [
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>
+            </Component>,
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              >
+                (@user)
+              </Text>
+            </Component>,
+          ],
+          "style": Object {
+            "flexDirection": "row",
+            "marginLeft": 5,
+          },
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "class",
+            "props": Object {
+              "children": <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>,
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "accessible": true,
+                "allowFontScaling": true,
+                "children": "user",
+                "ellipsizeMode": "tail",
+                "style": Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                },
+              },
+              "ref": null,
+              "rendered": "user",
+              "type": [Function],
+            },
+            "type": [Function],
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "class",
+            "props": Object {
+              "children": <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              >
+                (@user)
+              </Text>,
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "accessible": true,
+                "allowFontScaling": true,
+                "children": "(@user)",
+                "ellipsizeMode": "tail",
+                "numberOfLines": 1,
+                "style": Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                  "marginLeft": 5,
+                },
+              },
+              "ref": null,
+              "rendered": "(@user)",
+              "type": [Function],
+            },
+            "type": [Function],
+          },
+        ],
+        "type": [Function],
+      },
+    ],
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": Array [
+          <Connect(ProfilePicture)
+            size={32}
+            userId="21345"
+          />,
+          <Component
+            style={
+              Object {
+                "flexDirection": "row",
+                "marginLeft": 5,
+              }
+            }
+          >
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>
+            </Component>
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              >
+                (@user)
+              </Text>
+            </Component>
+          </Component>,
+        ],
+        "enabled": true,
+        "id": "21345",
+        "onPress": [Function],
+        "selectable": undefined,
+        "selected": undefined,
+        "theme": Object {},
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "size": 32,
+            "userId": "21345",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "children": Array [
+              <Component>
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                    }
+                  }
+                >
+                  user
+                </Text>
+              </Component>,
+              <Component>
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                      "marginLeft": 5,
+                    }
+                  }
+                >
+                  (@user)
+                </Text>
+              </Component>,
+            ],
+            "style": Object {
+              "flexDirection": "row",
+              "marginLeft": 5,
+            },
+          },
+          "ref": null,
+          "rendered": Array [
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "children": <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                    }
+                  }
+                >
+                  user
+                </Text>,
+              },
+              "ref": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": "user",
+                  "ellipsizeMode": "tail",
+                  "style": Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  },
+                },
+                "ref": null,
+                "rendered": "user",
+                "type": [Function],
+              },
+              "type": [Function],
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "children": <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                      "marginLeft": 5,
+                    }
+                  }
+                >
+                  (@user)
+                </Text>,
+              },
+              "ref": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": "(@user)",
+                  "ellipsizeMode": "tail",
+                  "numberOfLines": 1,
+                  "style": Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  },
+                },
+                "ref": null,
+                "rendered": "(@user)",
+                "type": [Function],
+              },
+              "type": [Function],
+            },
+          ],
+          "type": [Function],
+        },
+      ],
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+      },
+    },
+    "context": Object {
+      "intl": Object {
+        "formatMessage": [MockFunction],
+      },
+    },
+  },
+}
+`;
+
+exports[`UserListRow should match snapshot for  currentUser with (you) populated in list 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <UserListRow
+    id="123455"
+    isMyUser={true}
+    teammateNameDisplay="test"
+    theme={Object {}}
+    user={
+      Object {
+        "delete_at": 0,
+        "id": "21345",
+        "username": "user",
+      }
+    }
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": Array [
+        <Connect(ProfilePicture)
+          size={32}
+          userId="21345"
+        />,
+        <Component
+          style={
+            Object {
+              "flexDirection": "row",
+              "marginLeft": 5,
+            }
+          }
+        >
+          <Component>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                }
+              }
+            >
+              user
+            </Text>
+          </Component>
+          <Component>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                  "marginLeft": 5,
+                }
+              }
+            />
+          </Component>
+        </Component>,
+      ],
+      "enabled": true,
+      "id": "21345",
+      "onPress": [Function],
+      "selectable": undefined,
+      "selected": undefined,
+      "theme": Object {},
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "size": 32,
+          "userId": "21345",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "children": Array [
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>
+            </Component>,
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              />
+            </Component>,
+          ],
+          "style": Object {
+            "flexDirection": "row",
+            "marginLeft": 5,
+          },
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "class",
+            "props": Object {
+              "children": <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>,
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "accessible": true,
+                "allowFontScaling": true,
+                "children": "user",
+                "ellipsizeMode": "tail",
+                "style": Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                },
+              },
+              "ref": null,
+              "rendered": "user",
+              "type": [Function],
+            },
+            "type": [Function],
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "class",
+            "props": Object {
+              "children": <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              />,
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "accessible": true,
+                "allowFontScaling": true,
+                "children": undefined,
+                "ellipsizeMode": "tail",
+                "numberOfLines": 1,
+                "style": Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                  "marginLeft": 5,
+                },
+              },
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
+            "type": [Function],
+          },
+        ],
+        "type": [Function],
+      },
+    ],
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": Array [
+          <Connect(ProfilePicture)
+            size={32}
+            userId="21345"
+          />,
+          <Component
+            style={
+              Object {
+                "flexDirection": "row",
+                "marginLeft": 5,
+              }
+            }
+          >
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>
+            </Component>
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              />
+            </Component>
+          </Component>,
+        ],
+        "enabled": true,
+        "id": "21345",
+        "onPress": [Function],
+        "selectable": undefined,
+        "selected": undefined,
+        "theme": Object {},
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "size": 32,
+            "userId": "21345",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "children": Array [
+              <Component>
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                    }
+                  }
+                >
+                  user
+                </Text>
+              </Component>,
+              <Component>
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                      "marginLeft": 5,
+                    }
+                  }
+                />
+              </Component>,
+            ],
+            "style": Object {
+              "flexDirection": "row",
+              "marginLeft": 5,
+            },
+          },
+          "ref": null,
+          "rendered": Array [
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "children": <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                    }
+                  }
+                >
+                  user
+                </Text>,
+              },
+              "ref": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": "user",
+                  "ellipsizeMode": "tail",
+                  "style": Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  },
+                },
+                "ref": null,
+                "rendered": "user",
+                "type": [Function],
+              },
+              "type": [Function],
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "children": <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                      "marginLeft": 5,
+                    }
+                  }
+                />,
+              },
+              "ref": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": undefined,
+                  "ellipsizeMode": "tail",
+                  "numberOfLines": 1,
+                  "style": Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  },
+                },
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
+              },
+              "type": [Function],
+            },
+          ],
+          "type": [Function],
+        },
+      ],
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+      },
+    },
+    "context": Object {
+      "intl": Object {
+        "formatMessage": [MockFunction] {
+          "calls": Array [
+            Array [
+              Object {
+                "defaultMessage": "(@{username} - you)",
+                "id": "mobile.more_dms.you",
+              },
+              Object {
+                "username": "user",
+              },
+            ],
+          ],
+        },
+      },
+    },
+  },
+}
+`;
+
+exports[`UserListRow should match snapshot for deactivated user 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <UserListRow
+    id="123455"
+    isMyUser={false}
+    teammateNameDisplay="test"
+    theme={Object {}}
+    user={
+      Object {
+        "delete_at": 100,
+        "id": "21345",
+        "username": "user",
+      }
+    }
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": Array [
+        <Connect(ProfilePicture)
+          size={32}
+          userId="21345"
+        />,
+        <Component
+          style={
+            Object {
+              "flexDirection": "row",
+              "marginLeft": 5,
+            }
+          }
+        >
+          <Component>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                }
+              }
+            >
+              user
+            </Text>
+          </Component>
+          <Component>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                  "marginLeft": 5,
+                }
+              }
+            />
+          </Component>
+        </Component>,
+      ],
+      "enabled": true,
+      "id": "21345",
+      "onPress": [Function],
+      "selectable": undefined,
+      "selected": undefined,
+      "theme": Object {},
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "size": 32,
+          "userId": "21345",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "children": Array [
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>
+            </Component>,
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              />
+            </Component>,
+          ],
+          "style": Object {
+            "flexDirection": "row",
+            "marginLeft": 5,
+          },
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "class",
+            "props": Object {
+              "children": <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>,
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "accessible": true,
+                "allowFontScaling": true,
+                "children": "user",
+                "ellipsizeMode": "tail",
+                "style": Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                },
+              },
+              "ref": null,
+              "rendered": "user",
+              "type": [Function],
+            },
+            "type": [Function],
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "class",
+            "props": Object {
+              "children": <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              />,
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "accessible": true,
+                "allowFontScaling": true,
+                "children": undefined,
+                "ellipsizeMode": "tail",
+                "numberOfLines": 1,
+                "style": Object {
+                  "color": undefined,
+                  "fontSize": 15,
+                  "marginLeft": 5,
+                },
+              },
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
+            "type": [Function],
+          },
+        ],
+        "type": [Function],
+      },
+    ],
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": Array [
+          <Connect(ProfilePicture)
+            size={32}
+            userId="21345"
+          />,
+          <Component
+            style={
+              Object {
+                "flexDirection": "row",
+                "marginLeft": 5,
+              }
+            }
+          >
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  }
+                }
+              >
+                user
+              </Text>
+            </Component>
+            <Component>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  }
+                }
+              />
+            </Component>
+          </Component>,
+        ],
+        "enabled": true,
+        "id": "21345",
+        "onPress": [Function],
+        "selectable": undefined,
+        "selected": undefined,
+        "theme": Object {},
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "size": 32,
+            "userId": "21345",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "children": Array [
+              <Component>
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                    }
+                  }
+                >
+                  user
+                </Text>
+              </Component>,
+              <Component>
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                      "marginLeft": 5,
+                    }
+                  }
+                />
+              </Component>,
+            ],
+            "style": Object {
+              "flexDirection": "row",
+              "marginLeft": 5,
+            },
+          },
+          "ref": null,
+          "rendered": Array [
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "children": <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                    }
+                  }
+                >
+                  user
+                </Text>,
+              },
+              "ref": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": "user",
+                  "ellipsizeMode": "tail",
+                  "style": Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                  },
+                },
+                "ref": null,
+                "rendered": "user",
+                "type": [Function],
+              },
+              "type": [Function],
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "children": <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 15,
+                      "marginLeft": 5,
+                    }
+                  }
+                />,
+              },
+              "ref": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": undefined,
+                  "ellipsizeMode": "tail",
+                  "numberOfLines": 1,
+                  "style": Object {
+                    "color": undefined,
+                    "fontSize": 15,
+                    "marginLeft": 5,
+                  },
+                },
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
+              },
+              "type": [Function],
+            },
+          ],
+          "type": [Function],
+        },
+      ],
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+      },
+    },
+    "context": Object {
+      "intl": Object {
+        "formatMessage": [MockFunction] {
+          "calls": Array [
+            Array [
+              Object {
+                "defaultMessage": "{displayname} - Deactivated",
+                "id": "more_direct_channels.directchannel.deactivated",
+              },
+              Object {
+                "displayname": "(@user)",
+              },
+            ],
+          ],
+        },
+      },
+    },
+  },
+}
+`;
diff --git a/app/components/custom_list/user_list_row/user_list_row.js b/app/components/custom_list/user_list_row/user_list_row.js
index 6b9b2f466..f98784c67 100644
--- a/app/components/custom_list/user_list_row/user_list_row.js
+++ b/app/components/custom_list/user_list_row/user_list_row.js
@@ -8,13 +8,11 @@ import {
     Text,
     View,
 } from 'react-native';
+import {displayUsername} from 'mattermost-redux/utils/user_utils';
 import ProfilePicture from 'app/components/profile_picture';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
-
 import CustomListRow from 'app/components/custom_list/custom_list_row';
 
-import {displayUsername} from 'mattermost-redux/utils/user_utils';
-
 export default class UserListRow extends React.PureComponent {
     static propTypes = {
         id: PropTypes.string.isRequired,
@@ -58,6 +56,13 @@ export default class UserListRow extends React.PureComponent {
             }, {username});
         }
 
+        if (user.delete_at > 0) {
+            usernameDisplay = formatMessage({
+                id: 'more_direct_channels.directchannel.deactivated',
+                defaultMessage: '{displayname} - Deactivated',
+            }, {displayname: usernameDisplay});
+        }
+
         return (
             <CustomListRow
                 id={id}
diff --git a/app/components/custom_list/user_list_row/user_list_test.test.js b/app/components/custom_list/user_list_row/user_list_test.test.js
new file mode 100644
index 000000000..1698dd802
--- /dev/null
+++ b/app/components/custom_list/user_list_row/user_list_test.test.js
@@ -0,0 +1,89 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {configure, shallow} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import UserListRow from './user_list_row';
+
+configure({adapter: new Adapter()});
+
+jest.mock('react-intl');
+jest.mock('app/utils/theme', () => {
+    const original = require.requireActual('app/utils/theme');
+    return {
+        ...original,
+        changeOpacity: jest.fn(),
+    };
+});
+
+jest.mock('rn-fetch-blob', () => ({
+    fs: {
+        dirs: {
+            DocumentDir: () => jest.fn(),
+            CacheDir: () => jest.fn(),
+        },
+    },
+}));
+
+jest.mock('rn-fetch-blob/fs', () => ({
+    dirs: {
+        DocumentDir: () => jest.fn(),
+        CacheDir: () => jest.fn(),
+    },
+}));
+
+describe('UserListRow', () => {
+    const formatMessage = jest.fn();
+    const baseProps = {
+        id: '123455',
+        isMyUser: false,
+        user: {
+            id: '21345',
+            username: 'user',
+            delete_at: 0,
+        },
+        theme: {},
+        teammateNameDisplay: 'test',
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <UserListRow {...baseProps}/>,
+            {context: {intl: {formatMessage}}},
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot for deactivated user', () => {
+        const deactivatedUser = {
+            id: '21345',
+            username: 'user',
+            delete_at: 100,
+        };
+
+        const newProps = {
+            ...baseProps,
+            user: deactivatedUser,
+        };
+
+        const wrapper = shallow(
+            <UserListRow {...newProps}/>,
+            {context: {intl: {formatMessage}}},
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot for  currentUser with (you) populated in list', () => {
+        const newProps = {
+            ...baseProps,
+            isMyUser: true,
+        };
+
+        const wrapper = shallow(
+            <UserListRow {...newProps}/>,
+            {context: {intl: {formatMessage}}},
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+});