feat(wren-ui): Integrate API to implement instructions UI

wren-ui/src/apollo/client/graphql/__types__.ts

@@ -117,6 +117,12 @@ export type CreateDashboardItemInput = {
   responseId: Scalars['Int'];
 };
 
+export type CreateInstructionInput = {
+  instruction: Scalars['String'];
+  isDefault: Scalars['Boolean'];
+  questions: Array<Scalars['String']>;
+};
+
 export type CreateModelInput = {
   fields: Array<Scalars['String']>;
   primaryKey?: InputMaybe<Scalars['String']>;
@@ -481,6 +487,21 @@ export type InstantRecommendedQuestionsInput = {
   previousQuestions?: InputMaybe<Array<Scalars['String']>>;
 };
 
+export type Instruction = {
+  __typename?: 'Instruction';
+  createdAt: Scalars['String'];
+  id: Scalars['Int'];
+  instruction: Scalars['String'];
+  isDefault: Scalars['Boolean'];
+  projectId: Scalars['Int'];
+  questions: Array<Scalars['String']>;
+  updatedAt: Scalars['String'];
+};
+
+export type InstructionWhereInput = {
+  id: Scalars['Int'];
+};
+
 export type ItemLayoutInput = {
   h: Scalars['Int'];
   itemId: Scalars['Int'];
@@ -532,6 +553,7 @@ export type Mutation = {
   createCalculatedField: Scalars['JSON'];
   createDashboardItem: DashboardItem;
   createInstantRecommendedQuestions: Task;
+  createInstruction: Instruction;
   createModel: Scalars['JSON'];
   createRelation: Scalars['JSON'];
   createSqlPair: SqlPair;
@@ -540,6 +562,7 @@ export type Mutation = {
   createView: ViewInfo;
   deleteCalculatedField: Scalars['Boolean'];
   deleteDashboardItem: Scalars['Boolean'];
+  deleteInstruction: Scalars['Boolean'];
   deleteModel: Scalars['Boolean'];
   deleteRelation: Scalars['Boolean'];
   deleteSqlPair: Scalars['Boolean'];
@@ -571,6 +594,7 @@ export type Mutation = {
   updateCurrentProject: Scalars['Boolean'];
   updateDashboardItemLayouts: Array<DashboardItem>;
   updateDataSource: DataSource;
+  updateInstruction: Instruction;
   updateModel: Scalars['JSON'];
   updateModelMetadata: Scalars['Boolean'];
   updateRelation: Scalars['JSON'];
@@ -613,6 +637,11 @@ export type MutationCreateInstantRecommendedQuestionsArgs = {
 };
 
 
+export type MutationCreateInstructionArgs = {
+  data: CreateInstructionInput;
+};
+
+
 export type MutationCreateModelArgs = {
   data: CreateModelInput;
 };
@@ -654,6 +683,11 @@ export type MutationDeleteDashboardItemArgs = {
 };
 
 
+export type MutationDeleteInstructionArgs = {
+  where: InstructionWhereInput;
+};
+
+
 export type MutationDeleteModelArgs = {
   where: ModelWhereInput;
 };
@@ -795,6 +829,12 @@ export type MutationUpdateDataSourceArgs = {
 };
 
 
+export type MutationUpdateInstructionArgs = {
+  data: UpdateInstructionInput;
+  where: InstructionWhereInput;
+};
+
+
 export type MutationUpdateModelArgs = {
   data: UpdateModelInput;
   where: ModelWhereInput;
@@ -918,6 +958,7 @@ export type Query = {
   getProjectRecommendationQuestions: RecommendedQuestionsTask;
   getThreadRecommendationQuestions: RecommendedQuestionsTask;
   instantRecommendedQuestions: RecommendedQuestionsTask;
+  instructions: Array<Maybe<Instruction>>;
   learningRecord: LearningRecord;
   listDataSourceTables: Array<CompactTable>;
   listModels: Array<ModelInfo>;
@@ -1243,6 +1284,12 @@ export type UpdateDataSourceInput = {
   properties: Scalars['JSON'];
 };
 
+export type UpdateInstructionInput = {
+  instruction?: InputMaybe<Scalars['String']>;
+  isDefault?: InputMaybe<Scalars['Boolean']>;
+  questions?: InputMaybe<Array<Scalars['String']>>;
+};
+
 export type UpdateModelInput = {
   fields: Array<Scalars['String']>;
   primaryKey?: InputMaybe<Scalars['String']>;

wren-ui/src/apollo/client/graphql/instructions.generated.ts

@@ -0,0 +1,177 @@
+import * as Types from './__types__';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type InstructionFragment = { __typename?: 'Instruction', id: number, projectId: number, instruction: string, questions: Array<string>, isDefault: boolean, createdAt: string, updatedAt: string };
+
+export type InstructionsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type InstructionsQuery = { __typename?: 'Query', instructions: Array<{ __typename?: 'Instruction', id: number, projectId: number, instruction: string, questions: Array<string>, isDefault: boolean, createdAt: string, updatedAt: string } | null> };
+
+export type CreateInstructionMutationVariables = Types.Exact<{
+  data: Types.CreateInstructionInput;
+}>;
+
+
+export type CreateInstructionMutation = { __typename?: 'Mutation', createInstruction: { __typename?: 'Instruction', id: number, projectId: number, instruction: string, questions: Array<string>, isDefault: boolean, createdAt: string, updatedAt: string } };
+
+export type UpdateInstructionMutationVariables = Types.Exact<{
+  where: Types.InstructionWhereInput;
+  data: Types.UpdateInstructionInput;
+}>;
+
+
+export type UpdateInstructionMutation = { __typename?: 'Mutation', updateInstruction: { __typename?: 'Instruction', id: number, projectId: number, instruction: string, questions: Array<string>, isDefault: boolean, createdAt: string, updatedAt: string } };
+
+export type DeleteInstructionMutationVariables = Types.Exact<{
+  where: Types.InstructionWhereInput;
+}>;
+
+
+export type DeleteInstructionMutation = { __typename?: 'Mutation', deleteInstruction: boolean };
+
+export const InstructionFragmentDoc = gql`
+    fragment Instruction on Instruction {
+  id
+  projectId
+  instruction
+  questions
+  isDefault
+  createdAt
+  updatedAt
+}
+    `;
+export const InstructionsDocument = gql`
+    query Instructions {
+  instructions {
+    ...Instruction
+  }
+}
+    ${InstructionFragmentDoc}`;
+
+/**
+ * __useInstructionsQuery__
+ *
+ * To run a query within a React component, call `useInstructionsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useInstructionsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useInstructionsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useInstructionsQuery(baseOptions?: Apollo.QueryHookOptions<InstructionsQuery, InstructionsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<InstructionsQuery, InstructionsQueryVariables>(InstructionsDocument, options);
+      }
+export function useInstructionsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<InstructionsQuery, InstructionsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<InstructionsQuery, InstructionsQueryVariables>(InstructionsDocument, options);
+        }
+export type InstructionsQueryHookResult = ReturnType<typeof useInstructionsQuery>;
+export type InstructionsLazyQueryHookResult = ReturnType<typeof useInstructionsLazyQuery>;
+export type InstructionsQueryResult = Apollo.QueryResult<InstructionsQuery, InstructionsQueryVariables>;
+export const CreateInstructionDocument = gql`
+    mutation CreateInstruction($data: CreateInstructionInput!) {
+  createInstruction(data: $data) {
+    ...Instruction
+  }
+}
+    ${InstructionFragmentDoc}`;
+export type CreateInstructionMutationFn = Apollo.MutationFunction<CreateInstructionMutation, CreateInstructionMutationVariables>;
+
+/**
+ * __useCreateInstructionMutation__
+ *
+ * To run a mutation, you first call `useCreateInstructionMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateInstructionMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createInstructionMutation, { data, loading, error }] = useCreateInstructionMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useCreateInstructionMutation(baseOptions?: Apollo.MutationHookOptions<CreateInstructionMutation, CreateInstructionMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateInstructionMutation, CreateInstructionMutationVariables>(CreateInstructionDocument, options);
+      }
+export type CreateInstructionMutationHookResult = ReturnType<typeof useCreateInstructionMutation>;
+export type CreateInstructionMutationResult = Apollo.MutationResult<CreateInstructionMutation>;
+export type CreateInstructionMutationOptions = Apollo.BaseMutationOptions<CreateInstructionMutation, CreateInstructionMutationVariables>;
+export const UpdateInstructionDocument = gql`
+    mutation UpdateInstruction($where: InstructionWhereInput!, $data: UpdateInstructionInput!) {
+  updateInstruction(where: $where, data: $data) {
+    ...Instruction
+  }
+}
+    ${InstructionFragmentDoc}`;
+export type UpdateInstructionMutationFn = Apollo.MutationFunction<UpdateInstructionMutation, UpdateInstructionMutationVariables>;
+
+/**
+ * __useUpdateInstructionMutation__
+ *
+ * To run a mutation, you first call `useUpdateInstructionMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateInstructionMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateInstructionMutation, { data, loading, error }] = useUpdateInstructionMutation({
+ *   variables: {
+ *      where: // value for 'where'
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useUpdateInstructionMutation(baseOptions?: Apollo.MutationHookOptions<UpdateInstructionMutation, UpdateInstructionMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateInstructionMutation, UpdateInstructionMutationVariables>(UpdateInstructionDocument, options);
+      }
+export type UpdateInstructionMutationHookResult = ReturnType<typeof useUpdateInstructionMutation>;
+export type UpdateInstructionMutationResult = Apollo.MutationResult<UpdateInstructionMutation>;
+export type UpdateInstructionMutationOptions = Apollo.BaseMutationOptions<UpdateInstructionMutation, UpdateInstructionMutationVariables>;
+export const DeleteInstructionDocument = gql`
+    mutation DeleteInstruction($where: InstructionWhereInput!) {
+  deleteInstruction(where: $where)
+}
+    `;
+export type DeleteInstructionMutationFn = Apollo.MutationFunction<DeleteInstructionMutation, DeleteInstructionMutationVariables>;
+
+/**
+ * __useDeleteInstructionMutation__
+ *
+ * To run a mutation, you first call `useDeleteInstructionMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteInstructionMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteInstructionMutation, { data, loading, error }] = useDeleteInstructionMutation({
+ *   variables: {
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function useDeleteInstructionMutation(baseOptions?: Apollo.MutationHookOptions<DeleteInstructionMutation, DeleteInstructionMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteInstructionMutation, DeleteInstructionMutationVariables>(DeleteInstructionDocument, options);
+      }
+export type DeleteInstructionMutationHookResult = ReturnType<typeof useDeleteInstructionMutation>;
+export type DeleteInstructionMutationResult = Apollo.MutationResult<DeleteInstructionMutation>;
+export type DeleteInstructionMutationOptions = Apollo.BaseMutationOptions<DeleteInstructionMutation, DeleteInstructionMutationVariables>;

wren-ui/src/apollo/client/graphql/instructions.ts

@@ -0,0 +1,52 @@
+import { gql } from '@apollo/client';
+
+const INSTRUCTION = gql`
+  fragment Instruction on Instruction {
+    id
+    projectId
+    instruction
+    questions
+    isDefault
+    createdAt
+    updatedAt
+  }
+`;
+
+export const LIST_INSTRUCTIONS = gql`
+  query Instructions {
+    instructions {
+      ...Instruction
+    }
+  }
+
+  ${INSTRUCTION}
+`;
+
+export const CREATE_INSTRUCTION = gql`
+  mutation CreateInstruction($data: CreateInstructionInput!) {
+    createInstruction(data: $data) {
+      ...Instruction
+    }
+  }
+
+  ${INSTRUCTION}
+`;
+
+export const UPDATE_INSTRUCTION = gql`
+  mutation UpdateInstruction(
+    $where: InstructionWhereInput!
+    $data: UpdateInstructionInput!
+  ) {
+    updateInstruction(where: $where, data: $data) {
+      ...Instruction
+    }
+  }
+
+  ${INSTRUCTION}
+`;
+
+export const DELETE_INSTRUCTION = gql`
+  mutation DeleteInstruction($where: InstructionWhereInput!) {
+    deleteInstruction(where: $where)
+  }
+`;

wren-ui/src/apollo/server/services/instructionService.ts

@@ -1,4 +1,4 @@
-import { merge, pick } from 'lodash';
+import { pick } from 'lodash';
 import { IWrenAIAdaptor } from '@server/adaptors';
 import { InstructionInput, UpdateInstructionInput } from '@server/models';
 import {