buildListing()

in source/idea/idea-cluster-manager/webapp/src/pages/cluster-admin/projects.tsx [610:779]

• 133 lines of code
• 9 McCabe index (conditional complexity)

    buildListing() {
        return (
            <IdeaListView
                ref={this.listing}
                preferencesKey={"projects"}
                showPreferences={false}
                title="Projects"
                description={`Environment Project Management.${this.isAdmin() ? "" : " These are the projects of which you are a part of."}`}
                selectionType="single"
                primaryAction={{
                    id: "create-project",
                    text: "Create Project",
                    onClick: () => {
                        this.props.navigate("/cluster/projects/configure")
                    },
                }}
                primaryActionDisabled={!this.isAdmin()}
                secondaryActionsDisabled={!this.isSelected()}
                secondaryActions={[
                    {
                        id: "edit-project",
                        text: "Edit Project",
                        onClick: () => {
                            const selectedProject = this.getSelected();
                            AppContext.get().client().authz().listRoleAssignments({
                              resource_key: `${selectedProject!.project_id!}:project`,
                            })
                            .then((result) => {
                              this.props.navigate("/cluster/projects/configure", { state: {
                                isUpdate: true,
                                project: selectedProject, projectRoles: result.items,
                                projectPermission: this.isAdmin() ? undefined : this.state.projectPermissions.get(selectedProject!.project_id!)
                              }})
                            });
                        },
                        // based on if the user is admin or has update_personnel permission for selected project
                        disabled: !this.canEditProjectDetails(),
                    },
                    {
                        id: "toggle-enable-project",
                        text: this.isSelectedProjectEnabled() ? "Disable Project" : "Enable Project",
                        onClick: async () => {
                            const projectId = this.getSelected()?.project_id;
                            const isProjectEnabled = this.isSelectedProjectEnabled();
                            const operationType = isProjectEnabled ? "disable" : "enable";

                            try {
                                let enableOrDisable;
                                let successMessage;
                                if (isProjectEnabled) {
                                    enableOrDisable = (request: any) => this.projects().disableProject(request);
                                    successMessage = `Successfully ${operationType}d project with ID: ${projectId}, and all associated sessions will be stopped`
                                } else {
                                    enableOrDisable = (request: any) => this.projects().enableProject(request);
                                    successMessage = `Successfully ${operationType}d project with ID: ${projectId}`
                                }

                                await enableOrDisable({ project_id: projectId });
                                await this.getListing().fetchRecords();

                                this.props.onFlashbarChange({
                                    items: [{
                                        type: "success",
                                        content: successMessage,
                                        dismissible: true,
                                    }],
                                });
                            } catch (error: any) {
                                this.props.onFlashbarChange({
                                    items: [{
                                        type: "error",
                                        content: `Failed to ${operationType} project with ID: ${projectId} because ${error.message}`,
                                        dismissible: true,
                                    }],
                                });
                            }
                        },
                        disabled: !this.canUpdateProjectStatus(),
                    },
                    {
                        id: "update-tags",
                        text: "Update Tags",
                        onClick: () => {
                            this.showTagEditor();
                        },
                        disabled: !this.canEditProjectTags(),
                    },
                    {
                        id: "toggle-delete-project",
                        text: "Delete Project",
                        onClick: () => {
                            this.showDeleteProjectConfirmModal();
                        }
                    }
                ]}
                showPaginator={true}
                showFilters={true}
                filters={[
                    {
                        key: "name",
                        like: this.state.defaultFilteringText,
                    },
                ]}
                defaultFilteringText={this.state.defaultFilteringText}
                onFilter={(filters) => {
                    const projectNameToken = Utils.asString(filters[0].value).trim().toLowerCase();
                    this.setState(
                        {
                            projectSelected: false,
                            splitPanelOpen: false,
                        }
                    );
                    if (Utils.isEmpty(projectNameToken)) {
                        return [];
                    } else {
                        return [
                            {
                                key: "name",
                                like: projectNameToken,
                            },
                        ];
                    }
                }}
                onRefresh={() => {
                    this.setState(
                        {
                            projectSelected: false,
                            defaultFilteringText: "",
                        },
                        () => {
                            this.getListing().resetState();
                            this.getListing().fetchRecords();
                        }
                    );
                }}
                onSelectionChange={() => {
                    this.setState(
                        {
                            projectSelected: true,
                        },
                        () => {
                            if (!this.isAdmin())
                              return;
                            this.getFileSystemListing().fetchRecords();
                        }
                    );
                }}
                onFetchRecords={async () => {
                  const context = AppContext.get();
                  if (this.isAdmin()) {
                    let projects = (await Promise.resolve(this.projects().listProjects({
                        filters: this.getListing().getFilters(),
                        paginator: this.getListing().getPaginator(),
                        date_range: this.getListing().getDateRange(),
                    }))).listing ?? [];

                    projects = await this.getProjectsWithRoles(projects);
                    return { listing: projects };
                  }
                  let projects = (await Promise.resolve(this.projects().getUserProjects({
                      username: context.auth().getUsername(),
                      exclude_disabled: false
                    }))).projects ?? [];
                  projects = await this.getProjectsWithPermissions(context, projects);
                  return { listing: projects};
                }}
                columnDefinitions={PROJECT_TABLE_COLUMN_DEFINITIONS}
            />
        );
    }