Update role-management page in UI (#751)

ui/package.json

@@ -8,6 +8,7 @@
     "antd": "^4.20.2",
     "axios": "^0.27.2",
     "dagre": "^0.8.5",
+    "dayjs": "^1.11.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-flow-renderer": "^9.7.4",

ui/src/pages/home/home.css

@@ -1,23 +1,23 @@
-.home .ant-card {
-  box-shadow: 5px 8px 15px 5px rgba(208, 216, 243, 0.6);
-  border-radius: 8px;
-}
-
-.home .card-meta {
-  display: flex;
-}
-
-.home .card-meta .ant-card-meta-avatar {
-  max-width: 80px;
-  flex-basis: 30%;
-  box-sizing: border-box;
-}
-
-.home .card-meta .ant-card-meta-avatar > span {
-  width: 100%;
-}
-
-.home .card-meta .ant-card-meta-avatar svg {
-  width: 100%;
-  height: auto;
-}
+.home .ant-card {
+  box-shadow: 5px 8px 15px 5px rgba(208, 216, 243, 0.6);
+  border-radius: 8px;
+}
+
+.home .card-meta {
+  display: flex;
+}
+
+.home .card-meta .ant-card-meta-avatar {
+  max-width: 80px;
+  flex-basis: 30%;
+  box-sizing: border-box;
+}
+
+.home .card-meta .ant-card-meta-avatar > span {
+  width: 100%;
+}
+
+.home .card-meta .ant-card-meta-avatar svg {
+  width: 100%;
+  height: auto;
+}

ui/src/pages/management/components/RoleForm/index.tsx

@@ -0,0 +1,126 @@
+import React, { forwardRef, useCallback, useEffect, useState } from "react";
+import { Form, Select, Input, Button, message } from "antd";
+import { listUserRole, addUserRole } from "../../../../api";
+
+export interface RoleFormProps {
+  getRole?: (isAdmin: boolean) => void;
+}
+
+const { Item } = Form;
+const { TextArea } = Input;
+
+const RoleOptions = [
+  { label: "Admin", value: "admin" },
+  { label: "Producer", value: "producer" },
+  { label: "Consumer", value: "consumer" },
+];
+
+const ValidateRule = {
+  scope: [{ required: true, message: "Please select scope!" }],
+  userName: [{ required: true, message: "Please input user name!" }],
+  roleName: [{ required: true, message: "Please select role name!" }],
+  reason: [{ required: true, message: "Please input reason!" }],
+};
+
+const RoleForm = (props: RoleFormProps, ref: any) => {
+  const [form] = Form.useForm();
+  const { getRole } = props;
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const [scopeOptions, setScopeOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+
+  const handleFinish = useCallback(
+    async (values) => {
+      try {
+        setLoading(true);
+        await addUserRole(values);
+        form.resetFields();
+        message.success("User role is created successfully.");
+      } catch {
+        message.error("Failed to create user role.");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [form]
+  );
+
+  const handleInit = useCallback(async () => {
+    try {
+      const result = await listUserRole();
+      if (result.length) {
+        const dataset = new Set(
+          result.reduce(
+            (list: string[], item) => {
+              list.push(item.scope);
+              return list;
+            },
+            ["global"]
+          )
+        );
+        const options = Array.from(dataset).map((item) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+        setScopeOptions(options);
+        return true;
+      } else {
+        return false;
+      }
+    } catch {
+      return false;
+    }
+  }, []);
+
+  useEffect(() => {
+    handleInit().then((isAdmin: boolean) => {
+      getRole?.(isAdmin);
+    });
+  }, [handleInit, getRole]);
+
+  return (
+    <Form
+      layout="vertical"
+      form={form}
+      onFinish={handleFinish}
+      style={{ margin: "0 auto", maxWidth: 600 }}
+    >
+      <Item label="Scope" name="scope" rules={ValidateRule.scope}>
+        <Select
+          showSearch
+          placeholder="Select project Name or Global"
+          options={scopeOptions}
+          filterOption={(input: string, option?: any) => {
+            return (option!.value as unknown as string)
+              .toLowerCase()
+              .includes(input.toLowerCase());
+          }}
+        />
+      </Item>
+      <Item label="User Name" name="userName" rules={ValidateRule.userName}>
+        <Input placeholder="Email Account or App Id" maxLength={255} />
+      </Item>
+      <Item label="Role Name" name="roleName" rules={ValidateRule.roleName}>
+        <Select placeholder="Select a role to assign:" options={RoleOptions} />
+      </Item>
+      <Item label="Reason" name="reason" rules={ValidateRule.reason}>
+        <TextArea placeholder="For Audit Purpose" maxLength={50} />
+      </Item>
+      <Item>
+        <Button type="primary" htmlType="submit" loading={loading}>
+          Submit
+        </Button>
+      </Item>
+    </Form>
+  );
+};
+
+const RoleFormComponent = forwardRef<unknown, RoleFormProps>(RoleForm);
+
+RoleFormComponent.displayName = "RoleFormComponent";
+
+export default RoleFormComponent;

ui/src/pages/management/components/SearchBar/index.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef } from "react";
+import { Form, Select, Input, Button } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+
+export interface SearchBarProps {
+  onSearch: (values: any) => void;
+}
+
+const { Item } = Form;
+
+const RoleOptions = [
+  { label: "Admin", value: "admin" },
+  { label: "Producer", value: "producer" },
+  { label: "Consumer", value: "consumer" },
+];
+
+const SearchBar = (props: SearchBarProps, ref: any) => {
+  const [form] = Form.useForm();
+
+  const navigate = useNavigate();
+
+  const { onSearch } = props;
+
+  const onClickRoleAssign = () => {
+    navigate("/role-management");
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginBottom: 16,
+      }}
+    >
+      <Form layout="inline" form={form} onFinish={onSearch}>
+        <Item label="Scope" name="scope">
+          <Input
+            placeholder="Scope (Project / Global)"
+            autoComplete="off"
+            allowClear
+            style={{ width: 260 }}
+          />
+        </Item>
+        <Item name="roleName">
+          <Select
+            placeholder="Role Name"
+            allowClear
+            options={RoleOptions}
+            style={{ width: 200 }}
+          />
+        </Item>
+        <Item>
+          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+            Search
+          </Button>
+        </Item>
+      </Form>
+      <Button type="primary" onClick={onClickRoleAssign}>
+        + Create Role Assignment
+      </Button>
+    </div>
+  );
+};
+
+const SearchBarComponent = forwardRef<unknown, SearchBarProps>(SearchBar);
+
+SearchBarComponent.displayName = "SearchBarComponent";
+
+export default SearchBarComponent;