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

feat: filtering keys by tag #3404

Merged
merged 8 commits into from
Nov 21, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
fix: tags missing error
  • Loading branch information
stepan662 committed Nov 18, 2024
commit 199a40e228fb06cf8e2b7523ede8dafb2f4cb34e
2 changes: 1 addition & 1 deletion packages/web/src/app/basicTolgee.ts
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ export const tolgee = Tolgee()
availableLanguages: ['en', 'cs', 'fr', 'de'],
defaultLanguage: 'en',
tagNewKeys: ['draft'],
filterTag: ['test'],
filterTag: ['test', 'new', 'base'],
});

export const useTolgee = (events?: TolgeeEvent[]): TolgeeInstance => {
30 changes: 3 additions & 27 deletions packages/web/src/package/ui/KeyDialog/KeyForm.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import {
IconButton,
Button,
styled,
useTheme,
Link,
Typography,
} from '@mui/material';
import { IconButton, Button, styled, useTheme, Link } from '@mui/material';
import { OpenInNew } from '@mui/icons-material';

import { TranslationFields } from './TranslationFields';
@@ -21,6 +14,7 @@ import { PluralFormCheckbox } from './PluralFormCheckbox';
import { ErrorAlert } from './ErrorAlert';
import { HttpError } from '../client/HttpError';
import { Tooltip } from '../common/Tooltip';
import { FilterTagMissingInfo } from './Tags/FilterTagMissingInfo';

const ScContainer = styled('div')`
font-family: Rubik, Roboto, Arial;
@@ -67,13 +61,6 @@ const ScTagsWrapper = styled('div')`
margin-top: 5px;
`;

const ScTagsError = styled(Typography)`
color: ${({ theme }) => theme.palette.error.main};
font-size: 12px;
font-weight: 400;
min-height: 18px;
`;

const ScGalleryWrapper = styled('div')`
margin-top: 10px;
`;
@@ -118,7 +105,6 @@ export const KeyForm = () => {
const selectedNs = useDialogContext((c) => c.selectedNs);
const permissions = useDialogContext((c) => c.permissions);
const filterTagMissing = useDialogContext((c) => c.filterTagMissing);
const filterTag = useDialogContext((c) => c.uiProps.filterTag);

const screenshotsView = permissions.canViewScreenshots;
const viewPluralCheckbox = permissions.canEditPlural && pluralsSupported;
@@ -197,17 +183,7 @@ export const KeyForm = () => {
<ScTagsWrapper>
<ScFieldTitle>Tags</ScFieldTitle>
<Tags />
<ScTagsError>
{filterTagMissing ? (
<Tooltip title="You need to include at least one of filtered tags, otherwise the translation won't be used in current application.">
<span>
Missing one of filtered tags ({filterTag.join(', ')})
</span>
</Tooltip>
) : (
''
)}
</ScTagsError>
{filterTagMissing && <FilterTagMissingInfo />}
</ScTagsWrapper>
)}
{ready && viewPluralCheckbox && <PluralFormCheckbox />}
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Alert, AlertTitle, Box } from '@mui/material';
import { useDialogContext } from '../dialogContext';
import { MissingTagsList } from './MissingTagsList';

export const FilterTagMissingInfo = () => {
const filterTag = useDialogContext((c) => c.uiProps.filterTag);
const filterTagMissing = useDialogContext((c) => c.filterTagMissing);

if (!filterTagMissing) {
return null;
}

if (filterTag)
return (
<Alert severity="error" sx={{ mt: 1, mb: 1, fontSize: 15 }}>
<AlertTitle>Missing Filtered Tag</AlertTitle>
{filterTag.length > 1 ? (
<Box>
This app is configured to use only keys tagged with the{' '}
<MissingTagsList tags={filterTag} /> with the "filterTag" option. To
use the selected key in this app, add at least one of the filtered
tags or use another key name in the code.
</Box>
) : (
<Box>
This app is configured to use only keys tagged with the{' '}
<MissingTagsList tags={filterTag} /> with the "filterTag" option. To
use the selected key in this app, add the tag or use another key
name in the code.
</Box>
)}
<Box mt={1}>Read more in the docs.</Box>
</Alert>
);
};
37 changes: 37 additions & 0 deletions packages/web/src/package/ui/KeyDialog/Tags/MissingTag.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { styled } from '@mui/material';
import { useDialogActions } from '../dialogContext';

const StyledTag = styled('div')`
display: inline-flex;
outline: 0;
cursor: default;
padding: 1px 8px;
border-radius: 12px;
align-items: center;
font-size: 14px;
background: ${({ theme }) => theme.palette.grey[200]};
border: 1px solid transparent;
max-width: 100%;
box-sizing: border-box;
border: 1px solid ${({ theme }) => theme.palette.text.secondary};
margin: -2px 0px;
cursor: pointer;
&:focus-within,
&:hover {
border: 1px solid ${({ theme }) => theme.palette.primary.main};
color: ${({ theme }) => theme.palette.primary.main};
}
`;

type Props = {
name: string;
};

export const MissingTag = ({ name }: Props) => {
const { setTags } = useDialogActions();
function addTag(name: string) {
setTags((values) => [...values.filter((t) => t !== name), name]);
}

return <StyledTag onClick={() => addTag(name)}>{name}</StyledTag>;
};
35 changes: 35 additions & 0 deletions packages/web/src/package/ui/KeyDialog/Tags/MissingTagsList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { MissingTag } from './MissingTag';

type Props = {
tags: string[];
};

export const MissingTagsList = ({ tags }: Props) => {
return (
<>
{tags.map((tag, index) => {
if (index === 0) {
return (
<React.Fragment key={tag}>
<MissingTag name={tag} />
</React.Fragment>
);
} else if (index < tags.length - 1) {
return (
<React.Fragment key={tag}>
, <MissingTag name={tag} />
</React.Fragment>
);
} else {
return (
<React.Fragment key={tag}>
{' '}
or <MissingTag name={tag} />
</React.Fragment>
);
}
})}
</>
);
};
5 changes: 3 additions & 2 deletions packages/web/src/package/ui/KeyDialog/dialogContext/index.ts
Original file line number Diff line number Diff line change
@@ -81,13 +81,14 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
const [saving, setSaving] = useState(false);

const [selectedNs, setSelectedNs] = useState<string>(props.namespace);
const [tags, setTags] = useState<string[]>([]);
const [tags, setTags] = useState<string[] | undefined>(undefined);
const [_isPlural, setIsPlural] = useState<boolean>();
const [_pluralArgName, setPluralArgName] = useState<string>();
const [submitError, setSubmitError] = useState<HttpError>();

const filterTagMissing =
Boolean(props.uiProps.filterTag.length) &&
tags &&
!props.uiProps.filterTag.find((t) => tags.includes(t));
useEffect(() => {
// reset when key changes
@@ -492,7 +493,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
screenshotDetail,
linkToPlatform,
keyExists,
tags,
tags: tags || [],
permissions,
canTakeScreenshots,
isPlural,