Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OPIK-347]: FE prompts list #546

Merged
merged 46 commits into from
Nov 7, 2024
Merged

[OPIK-347]: FE prompts list #546

merged 46 commits into from
Nov 7, 2024

Conversation

aadereiko
Copy link
Contributor

Details

  • Added the table view for Prompts
  • Added the creation
  • Added the deletion
  • Not integrated to the Back-end yet, since there is no access to endpoints
image

Issues

Resolves #

Testing

Documentation

@aadereiko aadereiko requested a review from a team as a code owner November 4, 2024 10:49
@aadereiko aadereiko changed the title [OPIK-347]: prompts list [OPIK-347]: FE prompts list Nov 4, 2024
@aadereiko aadereiko requested review from a team as code owners November 6, 2024 09:51
@aadereiko aadereiko changed the base branch from sasha/OPIK-319/fe-prompts to main November 6, 2024 11:59
Copy link
Collaborator

@ferc ferc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks great, nice work! left some minor comments

}: UsePromptCreateMutationParams) => {
const { data } = await api.post(PROMPTS_REST_ENDPOINT, {
...prompt,
workspace_name: workspaceName,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is needed, we're sending the comet-workspace request header on each request so the BE already knows the workspace without any extra parameter

It's okay to have it in the query key of react-query for invalidations since it's needed but no need to send it in the POST (probably copy/paste from old code where before the parameter was needed)

return useMutation({
mutationFn: async () => {
const { data } = await api.post(`${PROMPTS_REST_ENDPOINT}/versions`, {
...prompt,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just send the prompt?


const PromptPage: React.FunctionComponent = () => {
const [tab, setTab] = useQueryParam("tab", StringParam, {
updateType: "replaceIn",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if replaceIn is the one here, probably the default pushIn (basically removing this third parameter) is okay (so back button in the browser will work), maybe in setting the default to prompt is okay to do setTab("prompt", "replaceIn")

@andriidudar what do you think?

const { id: promptId, ...restPrompt } = prompt;

const { data } = await api.put(`${PROMPTS_REST_ENDPOINT}${promptId}`, {
...restPrompt,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just send restPrompt

const { data } = await api.get(PROMPTS_REST_ENDPOINT, {
signal,
params: {
workspace_name: workspaceName,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need of workspace_name here, it's okay for the dependency but no need in the endpoint

const { data } = usePromptVersionsById(
{
promptId: prompt?.id || "",
page: 1,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we won't have any sort of pagination in this component to load more in this page, right?

Copy link
Contributor Author

@aadereiko aadereiko Nov 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ferc we have the same data in Commits tab - there is a full flow of it with pagination
here we will show first 25 commits

Comment on lines 55 to 56
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [name, description, template, promptCreateMutation.mutate]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should start destructuring the mutation like const { mutate: createPrompt } = usePromptCreateMutation(); so we can use it as dependency here

Comment on lines 79 to 82
<Button variant="outline" onClick={() => setOpenUseThisPrompt(true)}>
<Info className="mr-2 size-4" />
Use this prompt
</Button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's hide it until we have the snippets so we can merge without depending on the SDK

@aadereiko aadereiko requested a review from ferc November 6, 2024 17:32
Copy link
Collaborator

@ferc ferc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the misunderstanding about the workspace name in the project, since it's not sent the header inside the query it could be confusing that we still need the dependency in the query, therefore sent in the useQuery query key but not in the request body/parameters (automatically added in the header in a global state)

The rest looks great, nice work!

@@ -216,7 +216,6 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({

const { data: promptsData } = usePromptsList(
{
workspaceName,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the misunderstanding here but you need the workspaceName as parameter, what you don't need is to send it in the request (it's automatically sent in the request header)

You have to pass it to the query because it should be part of the query key (otherwise on changing workspace name it'll display the cache from previous workspace)

@@ -72,7 +72,6 @@ const PromptsPage: React.FunctionComponent = () => {
const [size, setSize] = useState(10);
const { data, isPending } = usePromptsList(
{
workspaceName,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

Copy link
Collaborator

@ferc ferc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also minor behavior improvement, when you have a prompt test 1 edit it to test 2, save it and then you edit it again, you still see the test 1 in the textarea (in other parts in the UI is updated to test 2 but not there

@aadereiko aadereiko requested a review from ferc November 7, 2024 08:33
@ferc ferc merged commit 31d620a into main Nov 7, 2024
1 check passed
@ferc ferc deleted the sasha/OPIK-347/prompts-list branch November 7, 2024 08:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants