diff --git a/client/src/features/ProjectPageV2/ProjectPageContent/Settings/ProjectSettings.tsx b/client/src/features/ProjectPageV2/ProjectPageContent/Settings/ProjectSettings.tsx index 48e5b693d1..6a8580853f 100644 --- a/client/src/features/ProjectPageV2/ProjectPageContent/Settings/ProjectSettings.tsx +++ b/client/src/features/ProjectPageV2/ProjectPageContent/Settings/ProjectSettings.tsx @@ -46,7 +46,7 @@ import PermissionsGuard from "../../../permissionsV2/PermissionsGuard"; import type { Project } from "../../../projectsV2/api/projectV2.api"; import { usePatchProjectsByProjectIdMutation } from "../../../projectsV2/api/projectV2.enhanced-api"; import ProjectDescriptionFormField from "../../../projectsV2/fields/ProjectDescriptionFormField"; -import ProjectNameFormField from "../../../projectsV2/fields/ProjectNameFormField"; +// import ProjectNameFormField from "../../../projectsV2/fields/ProjectNameFormField"; import ProjectNamespaceFormField from "../../../projectsV2/fields/ProjectNamespaceFormField"; import ProjectVisibilityFormField from "../../../projectsV2/fields/ProjectVisibilityFormField"; @@ -56,6 +56,7 @@ import useProjectPermissions from "../../utils/useProjectPermissions.hook"; import ProjectPageDelete from "./ProjectDelete"; import ProjectPageSettingsMembers from "./ProjectSettingsMembers"; +import NameFormField from "../../../entitiesV2/fields/NameFormField"; function notificationProjectUpdated( notifications: NotificationsManager, @@ -194,7 +195,13 @@ function ProjectSettingsEditForm({ project }: ProjectPageSettingsProps) { )}
- + {/* */} + diff --git a/client/src/features/entitiesV2/entities.types.ts b/client/src/features/entitiesV2/entities.types.ts new file mode 100644 index 0000000000..bd1f77675c --- /dev/null +++ b/client/src/features/entitiesV2/entities.types.ts @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 - Swiss Data Science Center (SDSC) + * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and + * Eidgenössische Technische Hochschule Zürich (ETHZ). + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export type RenkuEntityType = "group" | "user" | "project" | "data-connector"; diff --git a/client/src/features/entitiesV2/entities.utils.ts b/client/src/features/entitiesV2/entities.utils.ts new file mode 100644 index 0000000000..b21ff4edc4 --- /dev/null +++ b/client/src/features/entitiesV2/entities.utils.ts @@ -0,0 +1,26 @@ +/*! + * Copyright 2024 - Swiss Data Science Center (SDSC) + * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and + * Eidgenössische Technische Hochschule Zürich (ETHZ). + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { RenkuEntityType } from "./entities.types"; + +export function displayEntityType(t: RenkuEntityType): string { + if (t === "data-connector") { + return "data connector"; + } + return t; +} diff --git a/client/src/features/entitiesV2/fields/GenericInputText.tsx b/client/src/features/entitiesV2/fields/GenericInputText.tsx new file mode 100644 index 0000000000..30942d91cc --- /dev/null +++ b/client/src/features/entitiesV2/fields/GenericInputText.tsx @@ -0,0 +1,73 @@ +/*! + * Copyright 2024 - Swiss Data Science Center (SDSC) + * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and + * Eidgenössische Technische Hochschule Zürich (ETHZ). + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import cx from "classnames"; +import type { FieldValues } from "react-hook-form"; +import { Controller } from "react-hook-form"; + +import { FormText, Input, Label } from "reactstrap"; +import type { GenericFormFieldProps } from "./forms.types"; + +export default function GenericInputText({ + className, + control, + dataCy, + defaultErrorMessage, + defaultValue, + disabled, + name, + helpText, + inputDataCy, + inputId, + label, + rules, + shouldUnregister, // eslint-disable-line spellcheck/spell-checker +}: GenericFormFieldProps) { + const inputHelpId = `${inputId}-help`; + + return ( +
+ {label && } + ( + <> + +
+ {error?.message ?? defaultErrorMessage} +
+ + )} + rules={rules} + shouldUnregister={shouldUnregister} // eslint-disable-line spellcheck/spell-checker + /> + {helpText && {helpText}} +
+ ); +} diff --git a/client/src/features/entitiesV2/fields/NameFormField.tsx b/client/src/features/entitiesV2/fields/NameFormField.tsx new file mode 100644 index 0000000000..40f52a571b --- /dev/null +++ b/client/src/features/entitiesV2/fields/NameFormField.tsx @@ -0,0 +1,64 @@ +/*! + * Copyright 2024 - Swiss Data Science Center (SDSC) + * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and + * Eidgenössische Technische Hochschule Zürich (ETHZ). + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useMemo } from "react"; +import type { FieldValues } from "react-hook-form"; + +import { displayEntityType } from "../entities.utils"; +import type { EntityFormFieldProps } from "./forms.types"; +import GenericInputText from "./GenericInputText"; + +export default function NameFormField({ + entityType, + defaultErrorMessage: defaultErrorMessage_, + helpText: helpText_, + inputId: inputId_, + inputIdPrefix, + label: label_, + ...props +}: EntityFormFieldProps) { + const inputId = useMemo( + () => + inputId_ || + (inputIdPrefix + ? `${inputIdPrefix}-${entityType}-${props.name}` + : `$${entityType}-${props.name}`), + [entityType, inputIdPrefix, inputId_, props.name] + ); + const defaultErrorMessage = useMemo( + () => defaultErrorMessage_ ?? "Please provide a valid name.", + [defaultErrorMessage_] + ); + const helpText = useMemo( + () => + helpText_ ?? + `The name you will use to refer to the ${displayEntityType(entityType)}.`, + [entityType, helpText_] + ); + const label = useMemo(() => label_ ?? "Name", [label_]); + + return ( + + ); +} diff --git a/client/src/features/entitiesV2/fields/forms.types.ts b/client/src/features/entitiesV2/fields/forms.types.ts new file mode 100644 index 0000000000..82b1471f70 --- /dev/null +++ b/client/src/features/entitiesV2/fields/forms.types.ts @@ -0,0 +1,46 @@ +/*! + * Copyright 2024 - Swiss Data Science Center (SDSC) + * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and + * Eidgenössische Technische Hochschule Zürich (ETHZ). + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ReactNode } from "react"; +import type { FieldValues, UseControllerProps } from "react-hook-form"; +import { RenkuEntityType } from "../entities.types"; + +/** Most generic type for a form field in the Renku 2.0 UI. */ +export interface GenericFormFieldProps + extends UseControllerProps { + className?: string; + dataCy?: string; + defaultErrorMessage?: ReactNode; + helpText?: ReactNode; + inputDataCy?: string; + inputId: string; + label?: ReactNode; +} + +type GenericFormFieldPropsWithOptionalInputId = Omit< + GenericFormFieldProps, + "inputId" +> & + Partial, "inputId">>; + +/** Type for an entity's form field in the Renku 2.0 UI. */ +export interface EntityFormFieldProps + extends GenericFormFieldPropsWithOptionalInputId { + entityType: RenkuEntityType; + inputIdPrefix?: string; +} diff --git a/client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx b/client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx index 5095e26503..42774b0bf9 100644 --- a/client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx +++ b/client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx @@ -42,8 +42,9 @@ import { usePatchGroupsByGroupSlugMutation, } from "../../projectsV2/api/projectV2.enhanced-api"; import DescriptionFormField from "../../projectsV2/fields/DescriptionFormField"; -import NameFormField from "../../projectsV2/fields/NameFormField"; +// import NameFormField from "../../projectsV2/fields/NameFormField"; import SlugFormField from "../../projectsV2/fields/SlugFormField"; +import NameFormField from "../../entitiesV2/fields/NameFormField"; type GroupMetadata = Omit; @@ -166,9 +167,13 @@ export default function GroupMetadataForm({ group }: GroupMetadataFormProps) {

Describe the project

- + {/* */} +