From 4c82f732ce620a2f7fc61377dae76fde041033fc Mon Sep 17 00:00:00 2001 From: Ian Bolton Date: Wed, 8 Feb 2023 10:19:25 -0500 Subject: [PATCH] A few small changes --- .../run-addon-form/run-addon-form.tsx | 86 +++++++-------- .../run-addon-form/run-addon-modal.tsx | 5 +- .../applications-table-addons.tsx | 100 ++++++++---------- .../applications-table-addons/index.ts | 2 +- 4 files changed, 89 insertions(+), 104 deletions(-) diff --git a/client/src/app/pages/addons/components/run-addon-form/run-addon-form.tsx b/client/src/app/pages/addons/components/run-addon-form/run-addon-form.tsx index ed8ce92336..dcc74327c5 100644 --- a/client/src/app/pages/addons/components/run-addon-form/run-addon-form.tsx +++ b/client/src/app/pages/addons/components/run-addon-form/run-addon-form.tsx @@ -1,18 +1,15 @@ -import React, { useEffect, useState } from "react"; -import YAML from 'yaml' -import { CodeEditor, Language } from '@patternfly/react-code-editor'; +import React from "react"; +import YAML from "yaml"; +import { CodeEditor, Language } from "@patternfly/react-code-editor"; import { useTranslation } from "react-i18next"; -import { AxiosError, AxiosResponse } from "axios"; import * as yup from "yup"; import { ActionGroup, - Alert, Button, ButtonVariant, - FileUpload, Form, } from "@patternfly/react-core"; -import { FormState, useForm } from "react-hook-form"; +import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import { @@ -21,7 +18,7 @@ import { } from "@app/queries/taskgroups"; import { SimpleSelect } from "@app/shared/components"; import { Application, Addon, Taskgroup, TaskgroupTask } from "@app/api/models"; -import { getAxiosErrorMessage, getValidatedFromErrorTouched } from "@app/utils/utils"; +import { getValidatedFromErrorTouched } from "@app/utils/utils"; import { toAddonDropdownOptionWithValue } from "@app/utils/model-utils"; import { NotificationsContext } from "@app/shared/notifications-context"; import { HookFormPFGroupController } from "@app/shared/components/hook-form-pf-fields"; @@ -74,14 +71,14 @@ export const RunAddonForm: React.FC = ({ variant: "info", }); onSaved(); - } + }; const onSubmitTaskgroupError = (error: Error | unknown) => { pushNotification({ title: "Taskgroup submit failed", variant: "danger", }); - } + }; const { mutate: submitTaskgroup } = useSubmitTaskgroupMutation( onSubmitTaskgroupSuccess, @@ -97,7 +94,7 @@ export const RunAddonForm: React.FC = ({ }; const onSubmit = (formValues: RunAddonFormValues) => { - const addon = formValues.addon.trim() + const addon = formValues.addon.trim(); const data = YAML.parse(formValues.data.trim()); var payload: Taskgroup; if (!applications?.length || applications.length < 1) { @@ -109,7 +106,7 @@ export const RunAddonForm: React.FC = ({ name: `${formValues.addon.trim()}`, addon: addon, data: data, - tasks: applications?.map((application) => initTask(addon, application)) + tasks: applications?.map((application) => initTask(addon, application)), }; createTaskgroup(payload); }; @@ -118,14 +115,17 @@ export const RunAddonForm: React.FC = ({ if (!applications?.length || applications.length < 1) { return false; } - const addonTasks = tasks.filter((task) => task.addon === addon) + const addonTasks = tasks.filter((task) => task.addon === addon); const runningTasks = addonTasks.filter((task) => { return applications.some((app) => { - return task.application?.id === app.id && task.state?.match(/(Created|Running|Ready|Pending)/) - }) - }) + return ( + task.application?.id === app.id && + task.state?.match(/(Created|Running|Ready|Pending)/) + ); + }); + }); return runningTasks.length !== 0; - } + }; const validationSchema: yup.SchemaOf = yup .object() @@ -139,9 +139,7 @@ export const RunAddonForm: React.FC = ({ "Task(s) running for at least one of selected applications.", (value) => !isAppRunningAddon(value || "") ), - data: yup - .string() - .required(t("validation.required")), + data: yup.string().required(t("validation.required")), }); const { @@ -159,32 +157,32 @@ export const RunAddonForm: React.FC = ({ return (
- ( - toAddonDropdownOptionWithValue(addon))} - onChange={(value) => { - onChange(value); - onBlur(); - }} - validated={getValidatedFromErrorTouched(error, isTouched)} - /> - )} + renderInput={({ + field: { onChange, onBlur, value, name }, + fieldState: { isTouched, error }, + }) => ( + + toAddonDropdownOptionWithValue(addon) + )} + onChange={(value) => { + onChange(value); + onBlur(); + }} + validated={getValidatedFromErrorTouched(error, isTouched)} + /> + )} /> = ({ editor.focus(); monaco.editor.getModels()[0].updateOptions({ tabSize: 4 }); }} - height="sizeToFit" + height="20em" /> )} /> @@ -213,9 +211,7 @@ export const RunAddonForm: React.FC = ({ type="submit" aria-label="submit" variant={ButtonVariant.primary} - isDisabled={ - !isValid || isSubmitting || isValidating - } + isDisabled={!isValid || isSubmitting || isValidating} > {"Run"} @@ -229,6 +225,6 @@ export const RunAddonForm: React.FC = ({ Cancel - + ); }; diff --git a/client/src/app/pages/addons/components/run-addon-form/run-addon-modal.tsx b/client/src/app/pages/addons/components/run-addon-form/run-addon-modal.tsx index b744aff5bc..7d858ec2ed 100644 --- a/client/src/app/pages/addons/components/run-addon-form/run-addon-modal.tsx +++ b/client/src/app/pages/addons/components/run-addon-form/run-addon-modal.tsx @@ -1,15 +1,14 @@ import React from "react"; -import { AxiosResponse } from "axios"; import { Modal, ModalVariant } from "@patternfly/react-core"; import { RunAddonForm } from "./run-addon-form"; -import { Application, Addon, Taskgroup } from "@app/api/models"; +import { Application, Addon } from "@app/api/models"; export interface RunAddonModalProps { applications?: Application[]; addons: Addon[]; isOpen: boolean; - onSaved: (response: AxiosResponse) => void; + onSaved: () => void; onCancel: () => void; } diff --git a/client/src/app/pages/applications/applications-table-addons/applications-table-addons.tsx b/client/src/app/pages/applications/applications-table-addons/applications-table-addons.tsx index afe6ba288c..30ba07a0db 100644 --- a/client/src/app/pages/applications/applications-table-addons/applications-table-addons.tsx +++ b/client/src/app/pages/applications/applications-table-addons/applications-table-addons.tsx @@ -2,18 +2,14 @@ import React, { useState } from "react"; import { useHistory } from "react-router-dom"; import { AxiosError, AxiosResponse } from "axios"; import { useTranslation, Trans } from "react-i18next"; -import WarningTriangleIcon from "@patternfly/react-icons/dist/esm/icons/warning-triangle-icon"; import { ApplicationAnalysisStatus } from "../components/application-analysis-status"; import { Button, ButtonVariant, DropdownItem, - Dropdown, - DropdownToggle, Modal, ToolbarGroup, ToolbarItem, - InputGroup, } from "@patternfly/react-core"; import { cellWidth, @@ -35,21 +31,19 @@ import { AppTableWithControls, ConditionalRender, NoDataEmptyState, - StatusIcon, KebabDropdown, - SimpleFilterDropdown, ToolbarBulkSelector, ConfirmDialog, } from "@app/shared/components"; import { ApplicationDependenciesFormContainer } from "@app/shared/containers"; -import { formatPath, Paths } from "@app/Paths"; +import { Paths } from "@app/Paths"; import { Application, Task } from "@app/api/models"; import { getAxiosErrorMessage } from "@app/utils/utils"; import { ApplicationForm } from "../components/application-form"; -import { RunAddonModal } from "@app/pages/addons/components/run-addon-form" +import { RunAddonModal } from "@app/pages/addons/components/run-addon-form"; import { ApplicationListExpandedAreaAddons } from "../components/application-list-expanded-area/application-list-expanded-area-addons"; import { ImportApplicationsForm } from "../components/import-applications-form"; @@ -61,7 +55,7 @@ import { RBAC, RBAC_TYPE, } from "@app/rbac"; -import { checkAccess, checkAccessAll } from "@app/common/rbac-utils"; +import { checkAccess } from "@app/common/rbac-utils"; import keycloak from "@app/keycloak"; import { useBulkDeleteApplicationMutation, @@ -85,7 +79,7 @@ const getRow = (rowData: IRowData): Application => { return rowData[ENTITY_FIELD]; }; -export const ApplicationsTable: React.FC = () => { +export const ApplicationsTableAddons: React.FC = () => { //RBAC const token = keycloak.tokenParsed; // i18 @@ -130,10 +124,7 @@ export const ApplicationsTable: React.FC = () => { expandAll, areAllExpanded, setPageNumber, - } = useApplicationsFilterValues( - applications, - ApplicationTableType.Addons - ); + } = useApplicationsFilterValues(applications, ApplicationTableType.Addons); // Create and update modal const { @@ -144,20 +135,19 @@ export const ApplicationsTable: React.FC = () => { close: closeApplicationModal, } = useEntityModal(); - // Here we want all tasks that don't belong to admin/windup const { tasks } = useFetchAllTasks({ notAddons: ["admin", "windup"] }); const getTasksForApplication = (application: Application) => { tasks.filter((task: Task) => { - task.application?.id === application.id + task.application?.id === application.id; }); return tasks.sort((a, b) => { if (a?.createTime && b?.createTime) { - return (a.createTime > b.createTime) ? 1 : -1; + return a.createTime > b.createTime ? 1 : -1; } - return 0 + return 0; }); - } + }; const { addons } = useFetchAddons({ includeBundled: false }); @@ -205,7 +195,7 @@ export const ApplicationsTable: React.FC = () => { { key: "item1", name: "item1", - } + }, ]; // Run addon modal @@ -248,11 +238,15 @@ export const ApplicationsTable: React.FC = () => { // Table const columns: ICell[] = [ - { title: t("terms.name"), transforms: [sortable, cellWidth(20)], cellFormatters: [expandable] }, + { + title: t("terms.name"), + transforms: [sortable, cellWidth(20)], + cellFormatters: [expandable], + }, { title: t("terms.description"), transforms: [cellWidth(25)] }, { title: t("terms.lastRun"), transforms: [cellWidth(10)] }, { title: t("terms.tagCount"), transforms: [sortable, cellWidth(10)] }, - { title: "", props: { className: "pf-c-table__inline-edit-action", }, }, + { title: "", props: { className: "pf-c-table__inline-edit-action" } }, ]; const rows: IRow[] = []; @@ -261,15 +255,14 @@ export const ApplicationsTable: React.FC = () => { const isSelected = isRowSelected(item); const appTasks = getTasksForApplication(item); - const lastRunState = (application: Application) => { const t = getTasksForApplication(application); - if (t.length === 0) return "No task" + if (t.length === 0) return "No task"; const task = t[0]; if (task && task.state) return task.state; return "No task"; - } + }; rows.push({ [ENTITY_FIELD]: item, @@ -285,9 +278,7 @@ export const ApplicationsTable: React.FC = () => { ), }, { - title: ( - - ), + title: , }, { title: ( @@ -337,7 +328,6 @@ export const ApplicationsTable: React.FC = () => { return []; } - const userScopes: string[] = token?.scope.split(" ") || [], dependenciesWriteAccess = checkAccess( userScopes, @@ -411,35 +401,35 @@ export const ApplicationsTable: React.FC = () => { const importDropdownItems = importWriteAccess ? [ - setIsApplicationImportModalOpen(true)} - > - {t("actions.import")} - , - { - history.push(Paths.applicationsImports); - }} - > - {t("actions.manageImports")} - , - ] + setIsApplicationImportModalOpen(true)} + > + {t("actions.import")} + , + { + history.push(Paths.applicationsImports); + }} + > + {t("actions.manageImports")} + , + ] : []; const applicationDeleteDropdown = applicationWriteAccess ? [ - { - openBulkDeleteModal(selectedRows); - }} - > - {t("actions.delete")} - , - ] + { + openBulkDeleteModal(selectedRows); + }} + > + {t("actions.delete")} + , + ] : []; const dropdownItems = [...importDropdownItems, ...applicationDeleteDropdown]; diff --git a/client/src/app/pages/applications/applications-table-addons/index.ts b/client/src/app/pages/applications/applications-table-addons/index.ts index 851f3a1de7..1dcdd6ad4d 100644 --- a/client/src/app/pages/applications/applications-table-addons/index.ts +++ b/client/src/app/pages/applications/applications-table-addons/index.ts @@ -1 +1 @@ -export { ApplicationsTable as default } from "./applications-table-addons"; +export { ApplicationsTableAddons as default } from "./applications-table-addons";