Add Edit Metadata Page & Codecov integration

.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

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.

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: " +

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

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;

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 ? (
+        <EuiTextAlign textAlign="center">
+          <EuiLoadingChart size="xl" mono />
+        </EuiTextAlign>
+      ) : (
+        <ProjectFormContextProvider project={Project.from(currentProject)}>
+          <ProjectInfoForm
+            originalProject={currentProject}
+            fetchUpdates={refresh}
+          />
+        </ProjectFormContextProvider>
+      )}
+    </>
+  );
+};
+
+export default ProjectInfoSetting;

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 = () => {
         <Routes>
           <Route index element={<Navigate to="user-roles" replace={true} />} />
           <Route path="user-roles" element={<UserRoleSetting />} />
+          <Route path="project-info" element={<ProjectInfoSetting />} />
           <Route path="secrets-management" element={<SecretSetting />} />
           <Route
             path="*"

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,91 @@ export const Labels = ({ onChange }) => {
     };
   };
 
-  return (
-    <EuiFlexGroup direction="column" gutterSize="m">
-      {items.map((element, idx) => {
-        return (
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem grow={1}>
-                <EuiFieldText
-                  placeholder="key"
-                  value={element.key}
-                  onChange={onKeyChange(idx)}
-                  isInvalid={!element.isKeyValid}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={1}>
-                <EuiFieldText
-                  placeholder="value"
-                  value={element.value}
-                  onChange={onValueChange(idx)}
-                  isInvalid={!element.isValueValid}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  iconType="trash"
-                  onClick={removeElement(idx)}
-                  color="danger"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        );
-      })}
+  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 contain only lowercase alphanumeric and dash (-), and must start and end with an alphanumeric character"
+      );
+    }
+
+    //deep copy
+    let newLabels = JSON.parse(JSON.stringify(labels));
+    newLabels = newLabels.map(element => {
+      delete element.isKeyValid;
+      delete element.isValueValid;
+      delete element.idx;
+      return element;
+    });
 
-      <EuiFlexItem>
-        <EuiButton
-          iconType="plusInCircle"
-          onClick={addItem}
-          disabled={
-            items.length === 0
-              ? false
-              : items.reduce((addButtonDisabled, currentValue) => {
-                  return (
-                    addButtonDisabled ||
-                    !currentValue.isKeyValid ||
-                    !currentValue.isValueValid
-                  );
-                }, false)
-          }
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    setLabels(newLabels);
+
+    console.log(isDisabled || items.length === 0);
+  };
+
+  return (
+    <EuiFormRow isInvalid={!isValidLabels} error={labelError}>
+      <EuiFlexGroup direction="column" gutterSize="m">
+        {items.map((element, idx) => {
+          return (
+            <EuiFlexItem>
+              <EuiFlexGroup gutterSize="s">
+                <EuiFlexItem grow={1}>
+                  <EuiFieldText
+                    placeholder="key"
+                    value={element.key}
+                    onChange={onKeyChange(idx)}
+                    isInvalid={!element.isKeyValid}
+                    disabled={isDisabled}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={1}>
+                  <EuiFieldText
+                    placeholder="value"
+                    value={element.value}
+                    onChange={onValueChange(idx)}
+                    isInvalid={!element.isValueValid}
+                    disabled={isDisabled}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    iconType="trash"
+                    onClick={removeElement(idx)}
+                    color="danger"
+                    disabled={isDisabled}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          );
+        })}
+        <EuiFlexItem>
+          <EuiButton
+            iconType="plusInCircle"
+            onClick={addItem}
+            disabled={
+              isDisabled ||
+              (items.length === 0
+                ? false
+                : items.reduce((addButtonDisabled, currentValue) => {
+                    return (
+                      addButtonDisabled ||
+                      !currentValue.isKeyValid ||
+                      !currentValue.isValueValid
+                    );
+                  }, false))
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFormRow>
   );
 };