feat: adapt new mgmt backend and protobuf (#337)

Because

- mgmt-backend and protobuf had been updated

This commit

- adapt new mgmt backend and protobuf

integration-test/common/mgmt.ts

@@ -10,7 +10,7 @@ export const removeRegisteredUser = async () => {
   try {
     const client = createInstillAxiosTestClient();
 
-    await client.patch(`${env("NEXT_PUBLIC_API_VERSION")}/users/local-user`, {
+    await client.patch(`${env("NEXT_PUBLIC_API_VERSION")}/user`, {
       cookie_token: "",
     });
   } catch (err) {
@@ -22,7 +22,7 @@ export const addRegisteredUser = async () => {
   try {
     const client = createInstillAxiosTestClient();
 
-    await client.patch(`${env("NEXT_PUBLIC_API_VERSION")}/users/local-user`, {
+    await client.patch(`${env("NEXT_PUBLIC_API_VERSION")}/user`, {
       cookie_token: uuidv4(),
     });
   } catch (err) {

src/components/onboarding/OnboardingForm/OnboardingForm.tsx

@@ -26,14 +26,14 @@ export type OnboardingFormProps = {
 
 export type OnboardingFormValues = {
   email: Nullable<string>;
-  companyName: Nullable<string>;
+  orgName: Nullable<string>;
   role: Nullable<string>;
   newsletterSubscription: Nullable<boolean>;
 };
 
 type OnboardingFormErrors = {
   email: Nullable<string>;
-  companyName: Nullable<string>;
+  orgName: Nullable<string>;
   role: Nullable<string>;
 };
 
@@ -44,7 +44,7 @@ export const OnboardingForm = ({ user }: OnboardingFormProps) => {
 
   const [fieldValues, setFieldValues] = useState<OnboardingFormValues>({
     email: null,
-    companyName: null,
+    orgName: null,
     role: null,
     newsletterSubscription: true,
   });
@@ -95,7 +95,7 @@ export const OnboardingForm = ({ user }: OnboardingFormProps) => {
 
   const [fieldErrors, setFieldErrors] = useState<OnboardingFormErrors>({
     email: null,
-    companyName: null,
+    orgName: null,
     role: null,
   });
   const [formIsValid, setFormIsValid] = useState(false);
@@ -114,8 +114,8 @@ export const OnboardingForm = ({ user }: OnboardingFormProps) => {
       }
     }
 
-    if (!fieldValues.companyName) {
-      errors["companyName"] = "Company name is required";
+    if (!fieldValues.orgName) {
+      errors["orgName"] = "Company name is required";
     }
 
     if (!fieldValues.role) {
@@ -130,8 +130,7 @@ export const OnboardingForm = ({ user }: OnboardingFormProps) => {
   }, [fieldValues, formIsDirty]);
 
   const handleSubmit = useCallback(() => {
-    if (!fieldValues.email || !fieldValues.companyName || !fieldValues.role)
-      return;
+    if (!fieldValues.email || !fieldValues.orgName || !fieldValues.role) return;
 
     let token: string | undefined = undefined;
 
@@ -143,8 +142,9 @@ export const OnboardingForm = ({ user }: OnboardingFormProps) => {
 
     const payload: Partial<User> = {
       id: "local-user",
+      name: "users/local-user",
       email: fieldValues.email,
-      company_name: fieldValues.companyName ?? undefined,
+      org_name: fieldValues.orgName ?? undefined,
       role: fieldValues.role as string,
       newsletter_subscription: fieldValues.newsletterSubscription
         ? fieldValues.newsletterSubscription
@@ -222,9 +222,9 @@ export const OnboardingForm = ({ user }: OnboardingFormProps) => {
           label="Your company"
           required={true}
           description="Fill your company name"
-          value={fieldValues.companyName}
-          onChange={(event) => handleFieldChange("companyName", event)}
-          error={fieldErrors.companyName}
+          value={fieldValues.orgName}
+          onChange={(event) => handleFieldChange("orgName", event)}
+          error={fieldErrors.orgName}
         />
         <BasicSingleSelect
           id="role"

src/lib/instill/mgmt/mocks.ts

@@ -3,34 +3,34 @@ import { SingleSelectOption } from "@instill-ai/design-system";
 export const mockMgmtRoles: SingleSelectOption[] = [
   {
     label: "Manager (who makes decisions)",
-    value: "Manager",
+    value: "manager",
   },
   {
     label:
       "AI Researcher (who devises ML algorithms, trains and evaluates models)",
-    value: "AI Researcher",
+    value: "ai-researcher",
   },
   {
     label:
       "AI Engineer (who prepares dataset and makes models delivered by AI Researchers production-ready)",
-    value: "AI Engineer",
+    value: "ai-engineer",
   },
   {
     label:
       "Data Engineer (who builds data pipeline for data analytics or applications)",
-    value: "Data Engineer",
+    value: "data-engineer",
   },
   {
     label: "Data Scientist (who analyses data for distilling business value)",
-    value: "Data Scientist",
+    value: "data-scientist",
   },
   {
     label:
       "Analytics Engineer (who possesses skills of both Data Scientist and Data Engineer)",
-    value: "Analytics Engineer",
+    value: "analytics-engineer",
   },
   {
     label: "Hobbyist (I love AI!)",
-    value: "Hobbyist",
+    value: "hobbyist",
   },
 ];

src/lib/instill/mgmt/mutations.ts

@@ -13,7 +13,7 @@ export const updateLocalUserMutation = async (
     const client = createInstillAxiosClient();
 
     const { data } = await client.patch(
-      `${env("NEXT_PUBLIC_API_VERSION")}/users/local-user`,
+      `${env("NEXT_PUBLIC_API_VERSION")}/user`,
       payload
     );
 

src/lib/instill/mgmt/queries.ts

@@ -6,12 +6,12 @@ export type GetUserResponse = {
   user: User;
 };
 
-export const getUserQuery = async (userName: string): Promise<User> => {
+export const getUserQuery = async (): Promise<User> => {
   try {
     const client = createInstillAxiosClient();
 
     const { data } = await client.get<GetUserResponse>(
-      `${env("NEXT_PUBLIC_API_VERSION")}/${userName}`
+      `${env("NEXT_PUBLIC_API_VERSION")}/user`
     );
 
     return Promise.resolve(data.user);

src/lib/instill/mgmt/types.ts

@@ -3,7 +3,7 @@ export type User = {
   uid: string;
   email: string;
   id: string;
-  company_name: string;
+  org_name: string;
   role: string;
   usage_data_collection: boolean;
   newsletter_subscription: boolean;

src/pages/onboarding.tsx

@@ -48,7 +48,7 @@ const OnBoardingPage: FC<OnBoardingPageProps> & {
   useEffect(() => {
     const fetchUser = async () => {
       try {
-        const user = await getUserQuery("users/local-user");
+        const user = await getUserQuery();
         setFetched(true);
         setUser(user);
       } catch (err) {

src/services/mgmt/useTrackingToken.ts

@@ -15,7 +15,7 @@ export const useTrackingToken = () => {
         "/api/get-user-cookie"
       );
 
-      const user = await getUserQuery("users/local-user");
+      const user = await getUserQuery();
 
       // Both backend and cookie have user tracking token that means backend haven't been made down during the session.
 
@@ -50,6 +50,7 @@ export const useTrackingToken = () => {
 
       // We only have tracking token inside the cookie that means our backend had been made down.
       await updateLocalUserMutation({
+        name: "users/local-user",
         cookie_token: instillAiUserCookie.data.cookie_token,
       });
       setTrackingToken(instillAiUserCookie.data.cookie_token);