private async setupClusterListItemHandler()

in src/Sfx-Standalone/modules/main-window/cluster-list/cluster-list.script.ts [187:306]
103 lines of code
18 McCabe index (conditional complexity)

    private async setupClusterListItemHandler($item, endpoint: string, name: string) {
        $("button.bowtie-icon", $item).click(async (e) => {
            e.stopPropagation();

            if ($(e.target).next().hasClass("dropdown-menu-show")) {
                $(e.target).next().removeClass("dropdown-menu-show");
            } else {
                $(".dropdown-menu-show").removeClass("dropdown-menu-show");
                $(e.target).next().addClass("dropdown-menu-show");
            }

            $(document).mouseup((e) => {
                let container = $(".dropdown-menu-show");
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    $(".dropdown-menu-show").removeClass("dropdown-menu-show");
                }
            });
        });

        $("a.cluster-action", $item).click(async (e) => {
            e.stopPropagation();

            $(".dropdown-menu-show").removeClass("dropdown-menu-show");
            if (this.clusterListDataModel.getCluster(endpoint, "endpoint").displayName !== name) {
                name = this.clusterListDataModel.getCluster(endpoint, "endpoint").displayName;
            }

            const action = $(e.target).data("action");
            switch (action) {
                case "connect":
                    let $button = $('#cluster-list li[data-endpoint="' + endpoint + '"]');
                    if (!$button.hasClass("current")) {
                        $("#cluster-list li").removeClass("current");
                        $button.addClass("current");
                    }

                    await this.sfxContainer.reloadSfxAsync(endpoint);
                    break;
                case "remove":
                    await this.dialogService.showInlineDialogAsync({
                        title: `Remove cluster`,
                        bodyHtml: `<p>Are you sure you want to remove ${name}?</p>`,                        
                        footerButtons: <IDialogFooterButtonOption[]>[
                            <IDialogFooterButtonOption>{ text: "Remove", type: "submit", cssClass: "btn btn-primary", id: "btn-delete-cluster", attributes: { "data-target": `${name}` } },
                            <IDialogFooterButtonOption>{ text: "Cancel", type: "button", cssClass: "btn btn-default" }
                        ],
                        height: 200
                    });

                    const targetCluster = $("#btn-delete-cluster").data("target");
                    $("#btn-delete-cluster").click(async () => {
                        try {
                            await this.removeClusterListItem(targetCluster);
                            $("#main-modal-dialog").modal("hide");
                        } catch (error) {
                            alert(error);
                        }
                    });

                    break;
                case "rename":
                    const url = Url.parse(endpoint);
                    await this.dialogService.showInlineDialogAsync({
                        title: `Rename cluster`,
                        bodyHtml: `<p>New friendly name for cluster ${name}</p><p><i>Leave it blank to use the default name.</i></p><input id="input-cluster-label" type="text" class = "input-flat" placeholder="${url.host}" value="${name}"/>`,
                        footerButtons: <IDialogFooterButtonOption[]>[
                            <IDialogFooterButtonOption>{ text: "Rename", type: "submit", cssClass: "btn btn-primary", id: "btn-new-label", attributes: { "data-target": `${name}` } },
                            <IDialogFooterButtonOption>{ text: "Cancel", type: "button", cssClass: "btn btn-default" }
                        ],
                        height: 200
                    });

                    $("#btn-new-label").click(async (e) => {
                        try {
                            let label: string = $("#input-cluster-label").val();
                            if (label === "") {
                                label = $("#input-cluster-label").attr("placeholder");
                            }

                            await this.renameClusterListItem($("#btn-new-label").data("target"), label);
                            $("#main-modal-dialog").modal("hide");
                        } catch (error) {
                            alert(error.message);
                        }
                    });

                    break;
                default:
                    break;
            }
        });

        $($item).keyup(($event) => {
            const keyboardEvent = <KeyboardEvent>$event.originalEvent;

            if (keyboardEvent.code === "Enter" || keyboardEvent.code === "Space") {
                $($item).click();
            }
        });

        $($item).click(async (e) => {
            let $target = $(e.target);
            if ($target.is("span") || $target.is("img")) {
                $target = $target.parent();
            }

            const endpoint = $target.data("endpoint");
            const cluster = this.clusterListDataModel.getCluster(endpoint, "endpoint");

            if ($target.hasClass("current")) {
                return;
            }

            $(".current").removeClass("current");
            await this.sfxContainer.loadSfxAsync(endpoint);
            cluster.currentInView = true;
            await this.settings.setAsync<string>("cluster-list-folders", JSON.stringify(this.clusterListDataModel));
            $target.addClass("current");
        });
    }