Skip to content

Commit

Permalink
feat(ui): add select lang to AccountUpdateDialog (#671)
Browse files Browse the repository at this point in the history 
* feat(ui): add select lang to AccountUpdateDialog

* (review): moved select lang logic from workspaces to provider
  • Loading branch information
@billcookie
billcookie authored Dec 5, 2024
1 parent 0c3ea1a commit 7c6d1e1
Show file tree
Hide file tree
Showing 12 changed files with 91 additions and 17 deletions.
48 changes: 46 additions & 2 deletions ui/src/features/WorkspaceTopNavigation/components/AccountUpdateDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,22 @@ import {
DialogTitle,
Input,
Label,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@flow/components";
// import { ThemeToggle } from "@flow/features/ThemeToggle";
import { useUser } from "@flow/lib/gql";
import { useT } from "@flow/lib/i18n";
import { AvailableLanguage, localesWithLabel, useT } from "@flow/lib/i18n";
import i18n from "@flow/lib/i18n/i18n";

type Errors = "failed" | "passwordNotSame" | "passwordFailed";
type Errors =
| "failed"
| "passwordNotSame"
| "passwordFailed"
| "langUpdateFailed";

type Props = {
isOpen: boolean;
Expand All @@ -35,6 +45,9 @@ const AccountUpdateDialog: React.FC<Props> = ({ isOpen, onOpenChange }) => {
>();
const [showError, setShowError] = useState<Errors | undefined>(undefined);
const [loading, setLoading] = useState(false);
// For some users me.lang maybe lang: "und". Therefore, we can default to i18n.language.
const language = me?.lang && me.lang !== "und" ? me?.lang : i18n.language;
const [selectedLang, setSelectedLang] = useState<string>(language);

const handleUpdateMe = async () => {
setLoading(true);
Expand All @@ -60,6 +73,16 @@ const AccountUpdateDialog: React.FC<Props> = ({ isOpen, onOpenChange }) => {
}
}

if (selectedLang) {
const input = { name, lang: selectedLang };
const { me: user } = await updateMe(input);
if (!user) {
setShowError("langUpdateFailed");
setLoading(false);
return;
}
}

const input = { name, email };
const { me: user } = await updateMe(input);
if (!user) {
Expand All @@ -69,6 +92,12 @@ const AccountUpdateDialog: React.FC<Props> = ({ isOpen, onOpenChange }) => {
}
setLoading(false);
};
const handleLanguageChange = (lang: string) => {
setSelectedLang(lang);
};
const currentLanguageLabel =
localesWithLabel[i18n.language as AvailableLanguage] ||
t("Select Language");

return (
<Dialog open={isOpen} onOpenChange={(o) => onOpenChange(o)}>
Expand Down Expand Up @@ -127,6 +156,21 @@ const AccountUpdateDialog: React.FC<Props> = ({ isOpen, onOpenChange }) => {
<Label htmlFor="theme">{t("Theme")}</Label>
<ThemeToggle />
</DialogContentSection> */}
<DialogContentSection className="flex-1">
<Label htmlFor="language-selector">{t("Select Language")}</Label>
<Select onValueChange={handleLanguageChange}>
<SelectTrigger>
<SelectValue placeholder={currentLanguageLabel} />
</SelectTrigger>
<SelectContent>
{Object.entries(localesWithLabel).map(([value, label]) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
))}
</SelectContent>
</Select>
</DialogContentSection>
</DialogContentWrapper>
<div
className={`text-xs text-destructive ${showError ? "opacity-70" : "opacity-0"}`}>
Expand Down
5 changes: 3 additions & 2 deletions ui/src/lib/gql/__gen__/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
* 3. It does not support dead code elimination, so it will add unused operations.
*
* Therefore it is highly recommended to use the babel or swc plugin for production.
* Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
*/
const documents = {
"mutation CreateDeployment($input: CreateDeploymentInput!) {\n createDeployment(input: $input) {\n deployment {\n ...Deployment\n }\n }\n}\n\nmutation UpdateDeployment($input: UpdateDeploymentInput!) {\n updateDeployment(input: $input) {\n deployment {\n ...Deployment\n }\n }\n}\n\nmutation DeleteDeployment($input: DeleteDeploymentInput!) {\n deleteDeployment(input: $input) {\n deploymentId\n }\n}\n\nmutation ExecuteDeployment($input: ExecuteDeploymentInput!) {\n executeDeployment(input: $input) {\n job {\n ...Job\n }\n }\n}\n\nquery GetDeployments($workspaceId: ID!, $pagination: Pagination) {\n deployments(workspaceId: $workspaceId, pagination: $pagination) {\n totalCount\n nodes {\n ...Deployment\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nquery GetJobs($workspaceId: ID!, $pagination: Pagination) {\n jobs(workspaceId: $workspaceId, pagination: $pagination) {\n totalCount\n nodes {\n ...Job\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nquery GetJob($id: ID!) {\n job(id: $id) {\n ...Job\n }\n}": types.CreateDeploymentDocument,
"fragment Deployment on Deployment {\n id\n projectId\n workspaceId\n workflowUrl\n description\n version\n createdAt\n updatedAt\n project {\n name\n }\n}\n\nfragment Job on Job {\n id\n deploymentId\n workspaceId\n status\n startedAt\n completedAt\n}\n\nfragment Project on Project {\n id\n name\n description\n createdAt\n updatedAt\n workspaceId\n deployment {\n ...Deployment\n }\n}": types.DeploymentFragmentDoc,
"query GetJobs($workspaceId: ID!, $pagination: Pagination) {\n jobs(workspaceId: $workspaceId, pagination: $pagination) {\n totalCount\n nodes {\n ...Job\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nquery GetJob($id: ID!) {\n job(id: $id) {\n ...Job\n }\n}": types.GetJobsDocument,
"mutation CreateProject($input: CreateProjectInput!) {\n createProject(input: $input) {\n project {\n ...Project\n }\n }\n}\n\nquery GetProjects($workspaceId: ID!, $first: Int!, $after: Cursor) {\n projects(workspaceId: $workspaceId, first: $first, after: $after) {\n totalCount\n nodes {\n ...Project\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nquery GetProjectById($projectId: ID!) {\n node(id: $projectId, type: PROJECT) {\n __typename\n ...Project\n }\n}\n\nmutation UpdateProject($input: UpdateProjectInput!) {\n updateProject(input: $input) {\n project {\n ...Project\n }\n }\n}\n\nmutation DeleteProject($input: DeleteProjectInput!) {\n deleteProject(input: $input) {\n projectId\n }\n}\n\nmutation RunProject($input: RunProjectInput!) {\n runProject(input: $input) {\n projectId\n started\n }\n}": types.CreateProjectDocument,
"query GetMe {\n me {\n id\n name\n email\n myWorkspaceId\n }\n}\n\nquery SearchUser($email: String!) {\n searchUser(nameOrEmail: $email) {\n id\n name\n email\n }\n}\n\nmutation UpdateMe($input: UpdateMeInput!) {\n updateMe(input: $input) {\n me {\n id\n name\n email\n }\n }\n}": types.GetMeDocument,
"query GetMe {\n me {\n id\n name\n email\n myWorkspaceId\n lang\n }\n}\n\nquery SearchUser($email: String!) {\n searchUser(nameOrEmail: $email) {\n id\n name\n email\n }\n}\n\nmutation UpdateMe($input: UpdateMeInput!) {\n updateMe(input: $input) {\n me {\n id\n name\n email\n lang\n }\n }\n}": types.GetMeDocument,
"fragment Workspace on Workspace {\n id\n name\n personal\n members {\n userId\n role\n user {\n id\n email\n name\n }\n }\n}\n\nmutation CreateWorkspace($input: CreateWorkspaceInput!) {\n createWorkspace(input: $input) {\n workspace {\n ...Workspace\n }\n }\n}\n\nquery GetWorkspaces {\n me {\n id\n workspaces {\n ...Workspace\n }\n }\n}\n\nquery GetWorkspaceById($workspaceId: ID!) {\n node(id: $workspaceId, type: WORKSPACE) {\n __typename\n ...Workspace\n }\n}\n\nmutation UpdateWorkspace($input: UpdateWorkspaceInput!) {\n updateWorkspace(input: $input) {\n workspace {\n ...Workspace\n }\n }\n}\n\nmutation DeleteWorkspace($input: DeleteWorkspaceInput!) {\n deleteWorkspace(input: $input) {\n workspaceId\n }\n}\n\nmutation AddMemberToWorkspace($input: AddMemberToWorkspaceInput!) {\n addMemberToWorkspace(input: $input) {\n workspace {\n ...Workspace\n }\n }\n}\n\nmutation RemoveMemberFromWorkspace($input: RemoveMemberFromWorkspaceInput!) {\n removeMemberFromWorkspace(input: $input) {\n workspace {\n ...Workspace\n }\n }\n}\n\nmutation UpdateMemberOfWorkspace($input: UpdateMemberOfWorkspaceInput!) {\n updateMemberOfWorkspace(input: $input) {\n workspace {\n ...Workspace\n }\n }\n}": types.WorkspaceFragmentDoc,
};

Expand Down Expand Up @@ -54,7 +55,7 @@ export function graphql(source: "mutation CreateProject($input: CreateProjectInp
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "query GetMe {\n me {\n id\n name\n email\n myWorkspaceId\n }\n}\n\nquery SearchUser($email: String!) {\n searchUser(nameOrEmail: $email) {\n id\n name\n email\n }\n}\n\nmutation UpdateMe($input: UpdateMeInput!) {\n updateMe(input: $input) {\n me {\n id\n name\n email\n }\n }\n}"): (typeof documents)["query GetMe {\n me {\n id\n name\n email\n myWorkspaceId\n }\n}\n\nquery SearchUser($email: String!) {\n searchUser(nameOrEmail: $email) {\n id\n name\n email\n }\n}\n\nmutation UpdateMe($input: UpdateMeInput!) {\n updateMe(input: $input) {\n me {\n id\n name\n email\n }\n }\n}"];
export function graphql(source: "query GetMe {\n me {\n id\n name\n email\n myWorkspaceId\n lang\n }\n}\n\nquery SearchUser($email: String!) {\n searchUser(nameOrEmail: $email) {\n id\n name\n email\n }\n}\n\nmutation UpdateMe($input: UpdateMeInput!) {\n updateMe(input: $input) {\n me {\n id\n name\n email\n lang\n }\n }\n}"): (typeof documents)["query GetMe {\n me {\n id\n name\n email\n myWorkspaceId\n lang\n }\n}\n\nquery SearchUser($email: String!) {\n searchUser(nameOrEmail: $email) {\n id\n name\n email\n }\n}\n\nmutation UpdateMe($input: UpdateMeInput!) {\n updateMe(input: $input) {\n me {\n id\n name\n email\n lang\n }\n }\n}"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
Loading

0 comments on commit 7c6d1e1

Please sign in to comment.