Refactor func args to use getters instead of ternary

Cleaning up the render function

ui/src/flux/components/FuncArgs.tsx

@@ -21,31 +21,47 @@ interface Props {
 @ErrorHandling
 export default class FuncArgs extends PureComponent<Props> {
   public render() {
+    const {onDeleteFunc} = this.props
+
+    return (
+      <div className="func-node--tooltip">
+        <div className="func-args">{this.renderJoinOrArgs}</div>
+        <div className="func-arg--buttons">
+          <div
+            className="btn btn-sm btn-danger btn-square"
+            onClick={onDeleteFunc}
+          >
+            <span className="icon trash" />
+          </div>
+          {this.build}
+        </div>
+      </div>
+    )
+  }
+
+  get renderJoinOrArgs(): JSX.Element | JSX.Element[] {
+    const {func} = this.props
+    const {name: funcName} = func
+
+    if (funcName === funcNames.JOIN) {
+      return this.renderJoin
+    }
+
+    return this.renderArguments
+  }
+
+  get renderArguments(): JSX.Element | JSX.Element[] {
     const {
       func,
       bodyID,
       service,
       onChangeArg,
-      onDeleteFunc,
       declarationID,
       onGenerateScript,
-      declarationsFromBody,
     } = this.props
     const {name: funcName, id: funcID} = func
-    return (
-      <div className="func-node--tooltip">
-        <div className="func-args">
-          {funcName === funcNames.JOIN ? (
-            <Join
-              func={func}
-              bodyID={bodyID}
-              declarationID={declarationID}
-              onChangeArg={onChangeArg}
-              declarationsFromBody={declarationsFromBody}
-              onGenerateScript={onGenerateScript}
-            />
-          ) : (
-            func.args.map(({key, value, type}) => (
+
+    return func.args.map(({key, value, type}) => (
       <FuncArg
         key={key}
         type={type}
@@ -60,18 +76,27 @@ export default class FuncArgs extends PureComponent<Props> {
         onGenerateScript={onGenerateScript}
       />
     ))
-          )}
-        </div>
-        <div className="func-arg--buttons">
-          <div
-            className="btn btn-sm btn-danger btn-square"
-            onClick={onDeleteFunc}
-          >
-            <span className="icon trash" />
-          </div>
-          {this.build}
-        </div>
-      </div>
+  }
+
+  get renderJoin(): JSX.Element {
+    const {
+      func,
+      bodyID,
+      onChangeArg,
+      declarationID,
+      onGenerateScript,
+      declarationsFromBody,
+    } = this.props
+
+    return (
+      <Join
+        func={func}
+        bodyID={bodyID}
+        declarationID={declarationID}
+        onChangeArg={onChangeArg}
+        declarationsFromBody={declarationsFromBody}
+        onGenerateScript={onGenerateScript}
+      />
     )
   }