From 807c66b4ea25a6aed5685e9c4d7359b8165b857a Mon Sep 17 00:00:00 2001 From: Jonathan Victor Goklas Date: Fri, 17 May 2024 11:03:32 +0700 Subject: [PATCH 1/8] first initialization of projectinfo with codecov integration --- .github/workflows/ci-pipeline.yml | 9 +++++- .../src/project_setting/ProjectInfoSetting.js | 29 +++++++++++++++++++ .../app/src/project_setting/ProjectSetting.js | 6 ++++ 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 ui/packages/app/src/project_setting/ProjectInfoSetting.js diff --git a/.github/workflows/ci-pipeline.yml b/.github/workflows/ci-pipeline.yml index 3ad5daf2..a113d419 100644 --- a/.github/workflows/ci-pipeline.yml +++ b/.github/workflows/ci-pipeline.yml @@ -124,6 +124,13 @@ jobs: - name: Run Integration Test run: make it-test-api + - uses: codecov/codecov-action@v4 + with: + flags: api-test + name: api-test + token: ${{ secrets.CODECOV_TOKEN }} + working-directory: ./api + e2e-test: runs-on: ubuntu-latest needs: @@ -359,4 +366,4 @@ jobs: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} run: | yarn set-version-from-git - yarn lib publish + yarn lib publish \ No newline at end of file diff --git a/ui/packages/app/src/project_setting/ProjectInfoSetting.js b/ui/packages/app/src/project_setting/ProjectInfoSetting.js new file mode 100644 index 00000000..2e58cad5 --- /dev/null +++ b/ui/packages/app/src/project_setting/ProjectInfoSetting.js @@ -0,0 +1,29 @@ +import React, { useContext } from "react"; +import ProjectInfoForm from "./project_info/ProjectInfoForm"; +import { ProjectFormContextProvider } from "./form/context"; +import { ProjectsContext } from "@caraml-dev/ui-lib"; +import { Project } from "./form/project"; +import { EuiLoadingChart, EuiTextAlign } from "@elastic/eui"; + +const ProjectInfoSetting = () => { + const { currentProject, refresh } = useContext(ProjectsContext); + + return ( + <> + {!currentProject ? ( + + + + ) : ( + + + + )} + + ); +}; + +export default ProjectInfoSetting; diff --git a/ui/packages/app/src/project_setting/ProjectSetting.js b/ui/packages/app/src/project_setting/ProjectSetting.js index 7441652c..69b0367c 100644 --- a/ui/packages/app/src/project_setting/ProjectSetting.js +++ b/ui/packages/app/src/project_setting/ProjectSetting.js @@ -3,6 +3,7 @@ import { EuiSideNav, EuiIcon, EuiPageTemplate } from "@elastic/eui"; import { slugify } from "@caraml-dev/ui-lib/src/utils"; import UserRoleSetting from "./UserRoleSetting"; import SecretSetting from "./SecretSetting"; +import ProjectInfoSetting from "./ProjectInfoSetting"; import { Navigate, Route, @@ -16,6 +17,10 @@ const sections = { iconType: "user", name: "User Roles" }, + "project-info": { + iconType: "iInCircle", + name: "Project Info" + }, "secrets-management": { iconType: "lock", name: "Secrets" @@ -64,6 +69,7 @@ const ProjectSetting = () => { } /> } /> + } /> } /> Date: Fri, 17 May 2024 11:04:44 +0700 Subject: [PATCH 2/8] add project info form with submit --- .../project_info/ProjectInfoForm.js | 114 ++++++++++++++++++ .../project_info/SubmitProjectInfoForm.js | 42 +++++++ 2 files changed, 156 insertions(+) create mode 100644 ui/packages/app/src/project_setting/project_info/ProjectInfoForm.js create mode 100644 ui/packages/app/src/project_setting/project_info/SubmitProjectInfoForm.js diff --git a/ui/packages/app/src/project_setting/project_info/ProjectInfoForm.js b/ui/packages/app/src/project_setting/project_info/ProjectInfoForm.js new file mode 100644 index 00000000..9c77433b --- /dev/null +++ b/ui/packages/app/src/project_setting/project_info/ProjectInfoForm.js @@ -0,0 +1,114 @@ +import React, { useContext, useState } from "react"; +import { + EuiFlexItem, + EuiText, + EuiFlexGroup, + EuiForm, + EuiSpacer, + EuiTitle +} from "@elastic/eui"; +import SubmitProjectInfoForm from "./SubmitProjectInfoForm"; +import config from "../../config"; +import { isDNS1123Label } from "../../validation/validation"; +import { ProjectFormContext } from "../form/context"; +import { Labels } from "../form/Labels"; +import { Stream } from "../form/Stream"; +import { Team } from "../form/Team"; + +const ProjectInfoForm = ({ originalProject, fetchUpdates }) => { + const { project, setStream, setTeam, setLabels } = useContext( + ProjectFormContext + ); + + const [isValidStream, setIsValidStream] = useState( + isDNS1123Label(project.stream) + ); + const [isValidTeam, setIsValidTeam] = useState(isDNS1123Label(project.team)); + + const [isValidLabels, setIsValidLabels] = useState( + project.labels.length === 0 + ? true + : project.labels.reduce((labelsValid, label) => { + return ( + labelsValid && + isDNS1123Label(label.key) && + isDNS1123Label(label.value) + ); + }, true) + ); + + const isDisabled = !config.PROJECT_INFO_UPDATE_ENABLED; + + return ( + <> + + + + +

Stream

+ + + +

Product stream the project belongs to

+ + + + + +

Team

+ + + +

The owner of the project

+ + + + + +

Labels

+ + + +

Additional Labels

+ + + + + + + + + + + + ); +}; + +export default ProjectInfoForm; diff --git a/ui/packages/app/src/project_setting/project_info/SubmitProjectInfoForm.js b/ui/packages/app/src/project_setting/project_info/SubmitProjectInfoForm.js new file mode 100644 index 00000000..6b69dcb0 --- /dev/null +++ b/ui/packages/app/src/project_setting/project_info/SubmitProjectInfoForm.js @@ -0,0 +1,42 @@ +import React, { useState } from "react"; +import { EuiButton, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui"; +import UpdateProjectInfoModal from "./UpdateProjectInfoModal"; + +const SubmitProjectInfoForm = ({ + project, + isValidTeam, + isValidStream, + isValidLabels, + fetchUpdates, + isDisabled, + originalProject +}) => { + const [showUpdateModal, setShowUpdateModal] = useState(false); + + return ( + + + setShowUpdateModal(true)} + disabled={ + isDisabled || !(isValidTeam && isValidStream && isValidLabels) + } + fill> + Submit + + {showUpdateModal && ( + setShowUpdateModal(false)} + fetchUpdates={fetchUpdates} + originalProject={originalProject} + /> + )} + + + ); +}; + +export default SubmitProjectInfoForm; From dfcbbfe51c9503d8b8868ca47d58d78a19492a65 Mon Sep 17 00:00:00 2001 From: Jonathan Victor Goklas Date: Fri, 17 May 2024 11:05:29 +0700 Subject: [PATCH 3/8] add feature flag with update project info modal --- api/config/config.go | 5 +- api/config/config_test.go | 17 ++- api/config/testdata/config-2.yaml | 1 + ui/packages/app/src/config.js | 4 +- .../project_info/UpdateProjectInfoModal.js | 125 ++++++++++++++++++ .../form/combo_box/EuiComboBoxSelect.js | 1 + 6 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 ui/packages/app/src/project_setting/project_info/UpdateProjectInfoModal.js diff --git a/api/config/config.go b/api/config/config.go index f78994ef..9bb84c38 100644 --- a/api/config/config.go +++ b/api/config/config.go @@ -116,8 +116,9 @@ type UIConfig struct { StaticPath string `validated:"required"` IndexPath string `validated:"required"` - ClockworkUIHomepage string `json:"REACT_APP_CLOCKWORK_UI_HOMEPAGE"` - KubeflowUIHomepage string `json:"REACT_APP_KUBEFLOW_UI_HOMEPAGE"` + ClockworkUIHomepage string `json:"REACT_APP_CLOCKWORK_UI_HOMEPAGE"` + KubeflowUIHomepage string `json:"REACT_APP_KUBEFLOW_UI_HOMEPAGE"` + ProjectInfoUpdateEnabled bool `json:"REACT_APP_PROJECT_INFO_UPDATE_ENABLED"` } // Transform env variables to the format consumed by koanf. diff --git a/api/config/config_test.go b/api/config/config_test.go index 7a23cb20..0af09856 100644 --- a/api/config/config_test.go +++ b/api/config/config_test.go @@ -238,8 +238,9 @@ func TestLoad(t *testing.T) { StaticPath: "ui/build", IndexPath: "index.html", - ClockworkUIHomepage: "http://clockwork.dev", - KubeflowUIHomepage: "http://kubeflow.org", + ClockworkUIHomepage: "http://clockwork.dev", + KubeflowUIHomepage: "http://kubeflow.org", + ProjectInfoUpdateEnabled: true, }, DefaultSecretStorage: &config.SecretStorage{ Name: "default-secret-storage", @@ -322,6 +323,9 @@ func TestValidate(t *testing.T) { }, }, }, + UI: &config.UIConfig{ + ProjectInfoUpdateEnabled: true, + }, }, }, "extended | success": { @@ -366,6 +370,9 @@ func TestValidate(t *testing.T) { }, }, }, + UI: &config.UIConfig{ + ProjectInfoUpdateEnabled: true, + }, }, }, "default config | failure": { @@ -414,6 +421,9 @@ func TestValidate(t *testing.T) { }, }, }, + UI: &config.UIConfig{ + ProjectInfoUpdateEnabled: true, + }, }, error: errors.New( "failed to validate configuration: " + @@ -459,6 +469,9 @@ func TestValidate(t *testing.T) { }, }, }, + UI: &config.UIConfig{ + ProjectInfoUpdateEnabled: true, + }, }, error: errors.New( "failed to validate configuration: " + diff --git a/api/config/testdata/config-2.yaml b/api/config/testdata/config-2.yaml index 635b6f02..bce88425 100644 --- a/api/config/testdata/config-2.yaml +++ b/api/config/testdata/config-2.yaml @@ -28,6 +28,7 @@ authorization: ui: clockworkUIHomepage: http://clockwork.dev kubeflowUIHomepage: http://kubeflow.org + projectinfoUpdateEnabled: true defaultSecretStorage: name: default-secret-storage diff --git a/ui/packages/app/src/config.js b/ui/packages/app/src/config.js index 3ce499f5..a7151626 100644 --- a/ui/packages/app/src/config.js +++ b/ui/packages/app/src/config.js @@ -33,7 +33,9 @@ const config = { ), CLOCKWORK_UI_HOMEPAGE: getEnv("REACT_APP_CLOCKWORK_UI_HOMEPAGE"), - KUBEFLOW_UI_HOMEPAGE: getEnv("REACT_APP_KUBEFLOW_UI_HOMEPAGE") + KUBEFLOW_UI_HOMEPAGE: getEnv("REACT_APP_KUBEFLOW_UI_HOMEPAGE"), + PROJECT_INFO_UPDATE_ENABLED: + getEnv("REACT_APP_PROJECT_INFO_UPDATE_ENABLED") || false }; export default config; diff --git a/ui/packages/app/src/project_setting/project_info/UpdateProjectInfoModal.js b/ui/packages/app/src/project_setting/project_info/UpdateProjectInfoModal.js new file mode 100644 index 00000000..8dbd9cab --- /dev/null +++ b/ui/packages/app/src/project_setting/project_info/UpdateProjectInfoModal.js @@ -0,0 +1,125 @@ +import React, { useEffect } from "react"; +import { addToast, useMlpApi } from "@caraml-dev/ui-lib"; +import { + EuiConfirmModal, + EuiOverlayMask, + EuiCode, + EuiBasicTable, + EuiFlexItem, + EuiFlexGroup +} from "@elastic/eui"; +import { useNavigate } from "react-router-dom"; + +const UpdateProjectInfoModal = ({ + project, + closeModal, + fetchUpdates, + originalProject +}) => { + const [submissionResponse, submitForm] = useMlpApi( + `/v1/projects/${project.id}`, + { + method: "PUT", + headers: { "Content-Type": "application/json" } + }, + {}, + false + ); + + const navigate = useNavigate(); + + useEffect(() => { + if (submissionResponse.isLoaded && !submissionResponse.error) { + closeModal(); + addToast({ + id: "submit-success-create", + title: "Project Info Updated!", + color: "success", + iconType: "check" + }); + fetchUpdates(); + navigate(`/projects/${submissionResponse.data.id}/settings/project-info`); + } + }, [navigate, submissionResponse, project, fetchUpdates, closeModal]); + + const handleUpdate = () => { + const updatedProjectInfo = { + ...project, + stream: project.stream, + team: project.team, + labels: project.labels + }; + + submitForm({ body: JSON.stringify(updatedProjectInfo) }); + }; + + const columns = [ + { + field: "key", + name: "Key" + }, + { + field: "value", + name: "Value" + } + ]; + + const rows = project.labels.map(label => ({ + ...label + })); + + const originalRows = originalProject.labels.map(label => ({ + ...label + })); + + return ( + + closeModal()} + onConfirm={handleUpdate} + cancelButtonText="Cancel" + confirmButtonText="Update" + buttonColor="primary" + defaultFocusedButton="confirm"> +

+ You are about to update the project info for project{" "} + {project.name} + , are you sure? +
+ Note: Project info changes will take approximately 10 minutes. +

+ + +

Current Project Info

+

+ Stream: {originalProject.stream} +
+ Team: {originalProject.team} +
+ Labels: + +

+ + +

New Project Info

+

+ Stream: {project.stream} +
+ Team: {project.team} +
+ Labels: + +

+ + + + + ); +}; + +export default UpdateProjectInfoModal; diff --git a/ui/packages/lib/src/components/form/combo_box/EuiComboBoxSelect.js b/ui/packages/lib/src/components/form/combo_box/EuiComboBoxSelect.js index 8b1a5ccd..90dd95b7 100644 --- a/ui/packages/lib/src/components/form/combo_box/EuiComboBoxSelect.js +++ b/ui/packages/lib/src/components/form/combo_box/EuiComboBoxSelect.js @@ -32,6 +32,7 @@ export const EuiComboBoxSelect = ({ value, onChange, options, ...props }) => { onChange(selected.length ? selected[0].label : undefined); }} isClearable={props.isClearable || true} + isDisabled={props.isDisabled} selectedOptions={selected} rowHeight={EuiComboboxSuggestItemRowHeight} onCreateOption={props.onCreateOption} From 436f1d43101b0ace247ca5327c134b4fea07bd74 Mon Sep 17 00:00:00 2001 From: Jonathan Victor Goklas Date: Fri, 17 May 2024 11:06:09 +0700 Subject: [PATCH 4/8] reuse components for project creation and project info --- .../app/src/project_setting/form/Labels.js | 159 ++++++++++++------ .../src/project_setting/form/ProjectForm.js | 117 +++---------- .../app/src/project_setting/form/Stream.js | 47 ++++++ .../app/src/project_setting/form/Team.js | 53 ++++++ 4 files changed, 229 insertions(+), 147 deletions(-) create mode 100644 ui/packages/app/src/project_setting/form/Stream.js create mode 100644 ui/packages/app/src/project_setting/form/Team.js diff --git a/ui/packages/app/src/project_setting/form/Labels.js b/ui/packages/app/src/project_setting/form/Labels.js index 1e569f2c..15b06c41 100644 --- a/ui/packages/app/src/project_setting/form/Labels.js +++ b/ui/packages/app/src/project_setting/form/Labels.js @@ -5,12 +5,32 @@ import { EuiFieldText, EuiFlexGroup, EuiFlexItem, - EuiButton + EuiButton, + EuiFormRow } from "@elastic/eui"; import { isDNS1123Label } from "../../validation/validation"; -export const Labels = ({ onChange }) => { - const [items, setItems] = useState([]); +export const Labels = ({ + labels, + setLabels, + setIsValidLabels, + isValidLabels, + isDisabled = false +}) => { + const [items, setItems] = useState( + (e => { + if (e) { + return e.map((label, idx) => ({ + ...label, + idx, + isKeyValid: true, + isValueValid: true + })); + } else { + return []; + } + })(labels) + ); const addItem = () => { const newItems = [ @@ -62,57 +82,90 @@ export const Labels = ({ onChange }) => { }; }; + const [labelError, setLabelError] = useState(""); + const onChange = labels => { + const labelsValid = + labels.length === 0 + ? true + : labels.reduce((labelsValid, label) => { + return labelsValid && label.isKeyValid && label.isValueValid; + }, true); + setIsValidLabels(labelsValid); + if (!labelsValid) { + setLabelError( + "Invalid labels. Both key and value of a label must start and end with an alphanumeric character and must contain only alphanumeric and dash (-)" + ); + } + // } + + //deep copy + let newLabels = JSON.parse(JSON.stringify(labels)); + newLabels = newLabels.map(element => { + delete element.isKeyValid; + delete element.isValueValid; + delete element.idx; + return element; + }); + + setLabels(newLabels); + }; + return ( - - {items.map((element, idx) => { - return ( - - - - - - - - - - - - - - ); - })} + + + {items.map((element, idx) => { + return ( + + + + + + + + + + + + + + ); + })} - - { - return ( - addButtonDisabled || - !currentValue.isKeyValid || - !currentValue.isValueValid - ); - }, false) - } - /> - - + + { + return ( + addButtonDisabled || + !currentValue.isKeyValid || + !currentValue.isValueValid + ); + }, false) + } + /> + + + ); }; diff --git a/ui/packages/app/src/project_setting/form/ProjectForm.js b/ui/packages/app/src/project_setting/form/ProjectForm.js index 2a61f88a..82cfa37d 100644 --- a/ui/packages/app/src/project_setting/form/ProjectForm.js +++ b/ui/packages/app/src/project_setting/form/ProjectForm.js @@ -1,4 +1,4 @@ -import React, { useContext, useState, useEffect, useMemo } from "react"; +import React, { useContext, useState, useEffect } from "react"; import { EuiPanel, EuiFormRow, @@ -9,12 +9,13 @@ import { EuiButton, EuiForm } from "@elastic/eui"; -import { addToast, EuiComboBoxSelect, useMlpApi } from "@caraml-dev/ui-lib"; +import { addToast, useMlpApi } from "@caraml-dev/ui-lib"; import { ProjectFormContext } from "./context"; import { EmailTextArea } from "./EmailTextArea"; import { Labels } from "./Labels"; +import { Stream } from "./Stream"; +import { Team } from "./Team"; import { isDNS1123Label } from "../../validation/validation"; -import config from "../../config"; import { useNavigate } from "react-router-dom"; const ProjectForm = () => { @@ -30,19 +31,6 @@ const ProjectForm = () => { setLabels } = useContext(ProjectFormContext); - const streamOptions = useMemo(() => { - return Object.entries(config.STREAMS) - .map(([stream]) => stream.trim()) - .sort((a, b) => a.localeCompare(b)) - .map(stream => ({ label: stream })); - }, []); - - const teamOptions = useMemo(() => { - return (config.STREAMS[project.stream] || []) - .sort((a, b) => a.localeCompare(b)) - .map(team => ({ label: team.trim() })); - }, [project.stream]); - const [projectError, setProjectError] = useState(""); const [isValidProject, setIsValidProject] = useState(false); const onProjectChange = e => { @@ -57,41 +45,8 @@ const ProjectForm = () => { setName(newValue); }; - const [streamError, setStreamError] = useState(""); const [isValidStream, setIsValidStream] = useState(false); - const onStreamChange = selectedStream => { - if (selectedStream !== project.stream) { - let isValid = isDNS1123Label(selectedStream); - if (!isValid) { - setStreamError( - "Stream name is invalid. It should contain only lowercase alphanumeric and dash (-)" - ); - } - setIsValidStream(isValid); - setStream(selectedStream); - } - }; - - const [teamError, setTeamError] = useState(""); const [isValidTeam, setIsValidTeam] = useState(false); - const onTeamChange = selectedTeam => { - if (selectedTeam !== project.team) { - let isValid = isDNS1123Label(selectedTeam); - if (!isValid) { - setTeamError( - "Team name is invalid. It should contain only lowercase alphanumeric and dash (-)" - ); - } - setIsValidTeam(isValid); - setTeam(selectedTeam); - } - }; - - useEffect(() => { - if (!project.team) { - setIsValidTeam(false); - } - }, [project.team]); const onAdminValueChange = emails => { setAdmin(emails); @@ -118,32 +73,6 @@ const ProjectForm = () => { }; const [isValidLabels, setIsValidLabels] = useState(true); - const [labelError, setLabelError] = useState(""); - const onLabelChange = labels => { - const labelsValid = - labels.length === 0 - ? true - : labels.reduce((labelsValid, label) => { - return labelsValid && label.isKeyValid && label.isValueValid; - }, true); - setIsValidLabels(labelsValid); - if (!labelsValid) { - setLabelError( - "Invalid labels. Both key and value of a label must contain only alphanumeric and dash (-)" - ); - } - - //deep copy - let newLabels = JSON.parse(JSON.stringify(labels)); - newLabels = newLabels.map(element => { - delete element.isKeyValid; - delete element.isValueValid; - delete element.idx; - return element; - }); - - setLabels(newLabels); - }; const onSubmit = () => { submitForm({ body: JSON.stringify(project) }); @@ -192,26 +121,23 @@ const ProjectForm = () => { Stream} description="Product stream the project belongs to"> - - - + Team} description="Owner of the project"> - - - + Project Members} @@ -238,9 +164,12 @@ const ProjectForm = () => { Labels} description="Additional Labels"> - - - + diff --git a/ui/packages/app/src/project_setting/form/Stream.js b/ui/packages/app/src/project_setting/form/Stream.js new file mode 100644 index 00000000..f97c6f58 --- /dev/null +++ b/ui/packages/app/src/project_setting/form/Stream.js @@ -0,0 +1,47 @@ +import React, { useState, useMemo } from "react"; +import { EuiFormRow } from "@elastic/eui"; +import { EuiComboBoxSelect } from "@caraml-dev/ui-lib"; +import { isDNS1123Label } from "../../validation/validation"; +import config from "../../config"; + +export const Stream = ({ + stream, + setStream, + isValidStream, + setIsValidStream, + isDisabled = false +}) => { + const streamOptions = useMemo(() => { + return Object.entries(config.STREAMS) + .map(([stream]) => stream.trim()) + .sort((a, b) => a.localeCompare(b)) + .map(stream => ({ label: stream })); + }, []); + + const [streamError, setStreamError] = useState(""); + + const onStreamChange = stream => { + let isValid = isDNS1123Label(stream); + if (!isValid) { + setStreamError( + "Stream name is invalid. It should contain only lowercase alphanumeric and dash (-) and must start and end with an alphanumeric character" + ); + } + setIsValidStream(isValid); + setStream(stream); + }; + + return ( + + + + ); +}; + +export default Stream; diff --git a/ui/packages/app/src/project_setting/form/Team.js b/ui/packages/app/src/project_setting/form/Team.js new file mode 100644 index 00000000..4b7d03dd --- /dev/null +++ b/ui/packages/app/src/project_setting/form/Team.js @@ -0,0 +1,53 @@ +import React, { useState, useEffect, useMemo } from "react"; +import { EuiFormRow } from "@elastic/eui"; +import { EuiComboBoxSelect } from "@caraml-dev/ui-lib"; +import { isDNS1123Label } from "../../validation/validation"; +import config from "../../config"; + +export const Team = ({ + team, + setTeam, + stream, + isValidTeam, + setIsValidTeam, + isDisabled = false +}) => { + const teamOptions = useMemo(() => { + return (config.STREAMS[stream] || []) + .sort((a, b) => a.localeCompare(b)) + .map(team => ({ label: team.trim() })); + }, [stream]); + + const [teamError, setTeamError] = useState(""); + + const onTeamChange = team => { + let isValid = isDNS1123Label(team); + if (!isValid) { + setTeamError( + "Team name is invalid. It should contain only lowercase alphanumeric and dash (-) and must start and end with an alphanumeric character" + ); + } + setIsValidTeam(isValid); + setTeam(team); + }; + + useEffect(() => { + if (!team) { + setIsValidTeam(false); + } + }, [team, setIsValidTeam]); + + return ( + + + + ); +}; + +export default Team; From 7a7c9c49a92aff4c5fe8a2f19feb6e3b7d02dcd7 Mon Sep 17 00:00:00 2001 From: Jonathan Victor Goklas Date: Fri, 17 May 2024 13:32:18 +0700 Subject: [PATCH 5/8] change label error --- ui/packages/app/src/project_setting/form/Labels.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/packages/app/src/project_setting/form/Labels.js b/ui/packages/app/src/project_setting/form/Labels.js index 15b06c41..1a4309d0 100644 --- a/ui/packages/app/src/project_setting/form/Labels.js +++ b/ui/packages/app/src/project_setting/form/Labels.js @@ -93,7 +93,7 @@ export const Labels = ({ setIsValidLabels(labelsValid); if (!labelsValid) { setLabelError( - "Invalid labels. Both key and value of a label must start and end with an alphanumeric character and must contain only alphanumeric and dash (-)" + "Invalid labels. Both key and value of a label must contain only lowercase alphanumeric and dash (-) and must start and end with an alphanumeric character" ); } // } From d822b26c9c25965d672a81d02d2a4c1072b7f558 Mon Sep 17 00:00:00 2001 From: Jonathan Victor Goklas Date: Mon, 20 May 2024 10:36:03 +0700 Subject: [PATCH 6/8] update form fields error message --- ui/packages/app/src/project_setting/form/Labels.js | 2 +- ui/packages/app/src/project_setting/form/Stream.js | 2 +- ui/packages/app/src/project_setting/form/Team.js | 2 +- .../src/project_setting/project_info/UpdateProjectInfoModal.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/packages/app/src/project_setting/form/Labels.js b/ui/packages/app/src/project_setting/form/Labels.js index 1a4309d0..dec25921 100644 --- a/ui/packages/app/src/project_setting/form/Labels.js +++ b/ui/packages/app/src/project_setting/form/Labels.js @@ -93,7 +93,7 @@ export const Labels = ({ setIsValidLabels(labelsValid); if (!labelsValid) { setLabelError( - "Invalid labels. Both key and value of a label must contain only lowercase alphanumeric and dash (-) and must start and end with an alphanumeric character" + "Invalid labels. Both key and value of a label must contain only lowercase alphanumeric and dash (-), and must start and end with an alphanumeric character" ); } // } diff --git a/ui/packages/app/src/project_setting/form/Stream.js b/ui/packages/app/src/project_setting/form/Stream.js index f97c6f58..e11dd707 100644 --- a/ui/packages/app/src/project_setting/form/Stream.js +++ b/ui/packages/app/src/project_setting/form/Stream.js @@ -24,7 +24,7 @@ export const Stream = ({ let isValid = isDNS1123Label(stream); if (!isValid) { setStreamError( - "Stream name is invalid. It should contain only lowercase alphanumeric and dash (-) and must start and end with an alphanumeric character" + "Stream name is invalid. It should contain only lowercase alphanumeric and dash (-), and must start and end with an alphanumeric character" ); } setIsValidStream(isValid); diff --git a/ui/packages/app/src/project_setting/form/Team.js b/ui/packages/app/src/project_setting/form/Team.js index 4b7d03dd..307c75a6 100644 --- a/ui/packages/app/src/project_setting/form/Team.js +++ b/ui/packages/app/src/project_setting/form/Team.js @@ -24,7 +24,7 @@ export const Team = ({ let isValid = isDNS1123Label(team); if (!isValid) { setTeamError( - "Team name is invalid. It should contain only lowercase alphanumeric and dash (-) and must start and end with an alphanumeric character" + "Team name is invalid. It should contain only lowercase alphanumeric and dash (-), and must start and end with an alphanumeric character" ); } setIsValidTeam(isValid); diff --git a/ui/packages/app/src/project_setting/project_info/UpdateProjectInfoModal.js b/ui/packages/app/src/project_setting/project_info/UpdateProjectInfoModal.js index 8dbd9cab..d0b2b15c 100644 --- a/ui/packages/app/src/project_setting/project_info/UpdateProjectInfoModal.js +++ b/ui/packages/app/src/project_setting/project_info/UpdateProjectInfoModal.js @@ -83,7 +83,7 @@ const UpdateProjectInfoModal = ({ buttonColor="primary" defaultFocusedButton="confirm">

- You are about to update the project info for project{" "} + You are about to update the project info for the project{" "} {project.name} , are you sure?
From 4dd52a70c601b97f5c326912b65c6f01baf3ffc8 Mon Sep 17 00:00:00 2001 From: Jonathan Victor Goklas Date: Mon, 20 May 2024 14:26:04 +0700 Subject: [PATCH 7/8] fix feature flag for labels' add button --- ui/packages/app/src/project_setting/form/Labels.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/packages/app/src/project_setting/form/Labels.js b/ui/packages/app/src/project_setting/form/Labels.js index dec25921..fc9b5962 100644 --- a/ui/packages/app/src/project_setting/form/Labels.js +++ b/ui/packages/app/src/project_setting/form/Labels.js @@ -96,7 +96,6 @@ export const Labels = ({ "Invalid labels. Both key and value of a label must contain only lowercase alphanumeric and dash (-), and must start and end with an alphanumeric character" ); } - // } //deep copy let newLabels = JSON.parse(JSON.stringify(labels)); @@ -147,13 +146,14 @@ export const Labels = ({ ); })} - { return ( From daeb712a7cf61f1abe3975643d6b5518db32bcdf Mon Sep 17 00:00:00 2001 From: Jonathan Victor Goklas Date: Mon, 20 May 2024 15:06:46 +0700 Subject: [PATCH 8/8] fix feature flag for update labels' add button --- ui/packages/app/src/project_setting/form/Labels.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/packages/app/src/project_setting/form/Labels.js b/ui/packages/app/src/project_setting/form/Labels.js index fc9b5962..660d83a2 100644 --- a/ui/packages/app/src/project_setting/form/Labels.js +++ b/ui/packages/app/src/project_setting/form/Labels.js @@ -107,6 +107,8 @@ export const Labels = ({ }); setLabels(newLabels); + + console.log(isDisabled || items.length === 0); }; return ( @@ -151,9 +153,8 @@ export const Labels = ({ iconType="plusInCircle" onClick={addItem} disabled={ - isDisabled - ? true - : items.length === 0 + isDisabled || + (items.length === 0 ? false : items.reduce((addButtonDisabled, currentValue) => { return ( @@ -161,7 +162,7 @@ export const Labels = ({ !currentValue.isKeyValid || !currentValue.isValueValid ); - }, false) + }, false)) } />