buildJobTemplatesSelectionModal()

in source/idea/idea-cluster-manager/webapp/src/pages/hpc/submit-job.tsx [467:586]
120 lines of code
4 McCabe index (conditional complexity)

    buildJobTemplatesSelectionModal() {
        const onCancel = () => {
            this.setState({
                selectedJobTemplateId: null,
                showJobTemplatesModal: false,
            });
        };
        const onDeleteJobTemplate = () => {
            AppContext.get()
                .jobTemplates()
                .deleteJobTemplate(this.state.selectedJobTemplateId!)
                .then(() => {
                    this.loadAllJobTemplates().finally(() => {
                        this.setState({
                            selectedJobTemplateId: null,
                        });
                    });
                })
                .finally();
        };
        const onLoadJobTemplate = () => {
            AppContext.get()
                .jobTemplates()
                .getJobTemplate(this.state.selectedJobTemplateId!)
                .then((jobTemplate) => {
                    this.setState(
                        {
                            selectedJobTemplateId: null,
                            showJobTemplatesModal: false,
                            errorMessage: "",
                        },
                        () => {
                            this.initialize(jobTemplate.template_data);
                        }
                    );
                });
        };
        return (
            <Modal
                visible={this.state.showJobTemplatesModal}
                size="large"
                onDismiss={onCancel}
                header="Select a saved Job Template"
                footer={
                    <div>
                        <Box float="left">
                            <SpaceBetween size="xs" direction="horizontal">
                                <Button variant="normal" disabled={this.state.selectedJobTemplateId == null} onClick={onDeleteJobTemplate}>
                                    Delete
                                </Button>
                            </SpaceBetween>
                        </Box>
                        <Box float="right">
                            <SpaceBetween size="xs" direction="horizontal">
                                <Button variant="normal" onClick={onCancel}>
                                    Cancel
                                </Button>
                                <Button variant="primary" disabled={this.state.selectedJobTemplateId == null} onClick={onLoadJobTemplate}>
                                    Load Job Template
                                </Button>
                            </SpaceBetween>
                        </Box>
                    </div>
                }
            >
                <div style={{ height: "60vh", overflow: "auto" }}>
                    <SpaceBetween size="m" direction="vertical">
                        <TextFilter
                            filteringText={this.state.jobTemplateFilterText}
                            filteringPlaceholder="Search Job Templates"
                            onChange={(event) => {
                                this.setState({
                                    jobTemplateFilterText: event.detail.filteringText,
                                });
                            }}
                            onDelayedChange={(event) => {
                                const filteringText = event.detail.filteringText.trim().toLowerCase();
                                let filteredJobTemplates: JobTemplate[] = [];
                                if (Utils.isEmpty(filteringText)) {
                                    filteredJobTemplates = [...this.state.jobTemplates];
                                } else {
                                    this.state.jobTemplates.forEach((jobTemplate) => {
                                        if (jobTemplate.title) {
                                            if (jobTemplate.title.trim().toLowerCase().includes(filteringText)) {
                                                filteredJobTemplates.push(jobTemplate);
                                            }
                                        }
                                    });
                                }
                                this.setState({
                                    filteredJobTemplates: filteredJobTemplates,
                                });
                            }}
                        />
                        <Tiles
                            value={this.state.selectedJobTemplateId}
                            onChange={(event) =>
                                this.setState({
                                    selectedJobTemplateId: event.detail.value,
                                })
                            }
                            columns={3}
                            items={this.state.filteredJobTemplates.map((jobTemplate) => {
                                return {
                                    label: (
                                        <div>
                                            <strong>{jobTemplate.title!}</strong>
                                            <br />
                                            <span>{jobTemplate.description}</span>
                                        </div>
                                    ),
                                    value: jobTemplate.id!,
                                };
                            })}
                        />
                    </SpaceBetween>
                </div>
            </Modal>
        );
    }