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.

Sign up for GitHub

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

fix(ui): Other languages for actions, border fix, nav arrows remov #731

Merged
merged 4 commits into from
Jan 6, 2025
Merged

fix(ui): Other languages for actions, border fix, nav arrows remov #731

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
708e45c
fix(ui): Other languages add for actions, small border fix & remove n…
billcookie Dec 24, 2024
70d6989
Merge branch 'main' into ui/small-ui-fixes
billcookie Jan 5, 2025
2f044ad
Merge branch 'main' into ui/small-ui-fixes
billcookie Jan 6, 2025
854c414
Merge branch 'main' into ui/small-ui-fixes
billcookie Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions ui/src/features/Editor/components/LeftPanel/components/Actions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { useDoubleClick } from "@flow/hooks";
import { useAction } from "@flow/lib/fetch";
import { fetcher } from "@flow/lib/fetch/transformers/useFetch";
import { useT } from "@flow/lib/i18n";
import i18n from "@flow/lib/i18n/i18n";
import type { Action, ActionsSegregated, Node, Segregated } from "@flow/types";
import { generateUUID } from "@flow/utils";

Expand All @@ -32,7 +33,7 @@ type Props = {

const ActionsList: React.FC<Props> = ({ nodes, onNodesChange }) => {
const t = useT();
const { useGetActions, useGetActionsSegregated } = useAction();
const { useGetActions, useGetActionsSegregated } = useAction(i18n.language);
Copy link
Member

Choose a reason for hiding this comment

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

Can you change the language while inside the editor and open the actions panel to see if i18n.language updates correctly? You might need to fetch me and check me's language

Copy link
Contributor Author

@billcookie billcookie Jan 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Language updates correctly when changed with AccountUpdateDialog. The issue I could see happening is that if a user doesnt have me.language (which is possible for current accounts due to when an account is created, but should not be an issue for any future accounts) it is possibly null and then it falls back on i18n.language (this was in PR 671)


const { screenToFlowPosition } = useReactFlow();

Expand Down Expand Up @@ -195,7 +196,7 @@ const ActionsList: React.FC<Props> = ({ nodes, onNodesChange }) => {
key={order}
value={order}>
{Array.isArray(actions) ? (
actions.map((action) => (
actions.map((action, index) => (
<Fragment key={action.name}>
<ActionComponent
action={action}
Expand All @@ -210,7 +211,7 @@ const ActionsList: React.FC<Props> = ({ nodes, onNodesChange }) => {
onDoubleClick={handleDoubleClick}
onSelect={() => handleActionSelect(action.name)}
/>
<div className="border-b" />
{index !== actions.length - 1 && <div className="border-b" />}
</Fragment>
))
) : (
Expand All @@ -222,7 +223,7 @@ const ActionsList: React.FC<Props> = ({ nodes, onNodesChange }) => {
<p className="capitalize">{key}</p>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-1">
{actions[key]?.map((action) => (
{actions[key]?.map((action, index) => (
<Fragment key={action.name}>
<ActionComponent
action={action}
Expand All @@ -239,7 +240,10 @@ const ActionsList: React.FC<Props> = ({ nodes, onNodesChange }) => {
onDoubleClick={handleDoubleClick}
onSelect={() => handleActionSelect(action.name)}
/>
<div className="border-b" />
{actions[key] &&
index !== actions[key].length - 1 && (
<div className="border-b" />
)}
</Fragment>
))}
</AccordionContent>
Expand Down
3 changes: 2 additions & 1 deletion ui/src/features/Editor/components/OverlayUI/components/NodePickerDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ActionItem from "@flow/components/ActionItem";
import { useDoubleClick } from "@flow/hooks";
import { useAction } from "@flow/lib/fetch";
import { useT } from "@flow/lib/i18n";
import i18n from "@flow/lib/i18n/i18n";
import type { Action, ActionNodeType, Node } from "@flow/types";

import useBatch from "../../../Canvas/useBatch";
Expand All @@ -29,7 +30,7 @@ const NodePickerDialog: React.FC<Props> = ({
onClose,
}) => {
const t = useT();
const { useGetActionsSegregated } = useAction();
const { useGetActionsSegregated } = useAction(i18n.language);
const { actions: rawActions } = useGetActionsSegregated();
const [actions, setActions] = useState<Action[] | undefined>();
const [selectedIndex, setSelectedIndex] = useState(0);
Expand Down
13 changes: 6 additions & 7 deletions ui/src/features/Editor/components/RightPanel/components/ParamEditor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { ArrowLeft, ArrowRight } from "@phosphor-icons/react";
import { RJSFSchema } from "@rjsf/utils";
import { JSONSchema7Definition } from "json-schema";
import { memo, useMemo } from "react";

import { IconButton, Tabs, TabsContent, SchemaForm } from "@flow/components";
import { Tabs, TabsContent, SchemaForm } from "@flow/components";
import { patchAnyOfType } from "@flow/components/SchemaForm/patchSchemaTypes";
import { useAction } from "@flow/lib/fetch";
import { useT } from "@flow/lib/i18n";
import i18n from "@flow/lib/i18n/i18n";
import type { NodeData } from "@flow/types";

type Props = {
Expand All @@ -17,7 +17,7 @@ type Props = {
onSubmit: (nodeId: string, data: any) => void;
};

const actionButtonClasses = "border h-[25px]";
// const actionButtonClasses = "border h-[25px]";

const ParamEditor: React.FC<Props> = ({
nodeId,
Expand All @@ -27,8 +27,7 @@ const ParamEditor: React.FC<Props> = ({
onSubmit,
}) => {
const t = useT();

const { useGetActionById } = useAction();
const { useGetActionById } = useAction(i18n.language);
const { action } = useGetActionById(nodeMeta.officialName);

// This is a patch for the `anyOf` type in JSON Schema.
Expand All @@ -45,7 +44,7 @@ const ParamEditor: React.FC<Props> = ({
return (
<div>
<div className="mb-3 flex justify-between gap-4">
<div className="flex gap-2">
{/* <div className="flex gap-2">
<IconButton
className={actionButtonClasses}
icon={<ArrowLeft />}
Expand All @@ -56,7 +55,7 @@ const ParamEditor: React.FC<Props> = ({
icon={<ArrowRight />}
tooltipText="Next selection"
/>
</div>
</div> */}
</div>
<Tabs defaultValue="params" className="w-full">
<div className="flex flex-col gap-2">
Expand Down
8 changes: 4 additions & 4 deletions ui/src/lib/fetch/transformers/useApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,31 @@ import { GetAction, GetActions, GetActionsSegregated } from "@flow/types";

import { useFetch } from "./useFetch";

export const useAction = () => {
export const useAction = (lang: string) => {
const {
useGetActionsFetch,
useGetActionsByIdFetch,
useGetActionsSegregatedFetch,
} = useFetch();

const useGetActions = (): GetActions => {
const { data, ...rest } = useGetActionsFetch();
const { data, ...rest } = useGetActionsFetch(lang);
return {
actions: data,
...rest,
};
};

const useGetActionById = (id: string): GetAction => {
const { data, ...rest } = useGetActionsByIdFetch(id);
const { data, ...rest } = useGetActionsByIdFetch(id, lang);
return {
action: data,
...rest,
};
};

const useGetActionsSegregated = (): GetActionsSegregated => {
const { data, ...rest } = useGetActionsSegregatedFetch();
const { data, ...rest } = useGetActionsSegregatedFetch(lang);
return {
actions: data,
...rest,
Expand Down
34 changes: 20 additions & 14 deletions ui/src/lib/fetch/transformers/useFetch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,30 +74,36 @@ export const fetcher = async <T extends Action[] | Segregated | Action>(
};

export const useFetch = () => {
const useGetActionsFetch = () =>
const useGetActionsFetch = (lang: string) =>
useQuery({
queryKey: [ActionFetchKeys.actions],
queryFn: async ({ signal }: { signal: AbortSignal }) =>
fetcher<Action[]>(`${BASE_URL}/actions`, signal),
queryKey: [ActionFetchKeys.actions, lang],
queryFn: async ({ signal }: { signal: AbortSignal }) => {
return fetcher<Action[]>(`${BASE_URL}/actions?lang=${lang}`, signal);
},
staleTime: Infinity,
});

const useGetActionsByIdFetch = (actionId: string) =>
const useGetActionsByIdFetch = (actionId: string, lang: string) =>
useQuery({
queryKey: [ActionFetchKeys.actions, actionId],
queryFn: async ({ signal }: { signal: AbortSignal }) =>
fetcher<Action>(`${BASE_URL}/actions/${actionId}`, signal),
queryKey: [ActionFetchKeys.actions, actionId, lang],
queryFn: async ({ signal }: { signal: AbortSignal }) => {
return fetcher<Action>(
`${BASE_URL}/actions/${actionId}?lang=${lang}`,
signal,
);
},
staleTime: Infinity,
});

const useGetActionsSegregatedFetch = () =>
const useGetActionsSegregatedFetch = (lang: string) =>
useQuery({
queryKey: [ActionFetchKeys.actions, ActionFetchKeys.segregated],
queryFn: async ({ signal }: { signal: AbortSignal }) =>
fetcher<Segregated>(
`${BASE_URL}/actions/${ActionFetchKeys.segregated}`,
queryKey: [ActionFetchKeys.actions, ActionFetchKeys.segregated, lang],
queryFn: async ({ signal }: { signal: AbortSignal }) => {
return fetcher<Segregated>(
`${BASE_URL}/actions/${ActionFetchKeys.segregated}?lang=${lang}`,
signal,
),
);
},
staleTime: Infinity,
});

Expand Down
Loading