Skip to content

fixed observation cards UI #938

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

Merged
merged 2 commits into from
Aug 1, 2024
Merged

fixed observation cards UI #938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3610e5d
fixed observation cards UI
iDome89 Aug 1, 2024
8fdc94a
changed number of chars
iDome89 Aug 1, 2024
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
2 changes: 1 addition & 1 deletion src/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -768,7 +768,7 @@
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_QUOTES_LABEL": "Quotes",
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_SELECT_BUTTON_LABEL": "Select observation",
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_TAGS_LABEL": "Extra tags",
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_VIEW_DETAILS": "View details",
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_VIEW_DETAILS": "View more",
"__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CANCEL": "Cancel",
"__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CREATE_INSIGHT": "Create insight",
"__INSIGHTS_PAGE_ACTION_BAR_BUTTON_EDIT_INSIGHT": "Update insight",
Expand Down
2 changes: 1 addition & 1 deletion src/locales/it/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -795,7 +795,7 @@
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_QUOTES_LABEL": "",
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_SELECT_BUTTON_LABEL": "",
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_TAGS_LABEL": "",
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_VIEW_DETAILS": "",
"__INSIGHTS_COLLECTION_OBSERVATION_CARD_VIEW_DETAILS": "Vedi di più",
"__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CANCEL": "Annulla",
"__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CREATE_INSIGHT": "",
"__INSIGHTS_PAGE_ACTION_BAR_BUTTON_EDIT_INSIGHT": "",
Expand Down
9 changes: 7 additions & 2 deletions src/pages/Campaign/pageHeader/Meta/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,11 @@ export const Metas = ({ campaign }: { campaign: CampaignWithOutput }) => {

const { start_date, end_date, type, status, outputs, family } = campaign;
const { t } = useTranslation();
const { sorted: videos } = useVideo(campaign.id.toString() ?? '');
const {
sorted: videos,
isLoading: isLoadingVideos,
isFetching: isFetchingVideos,
} = useVideo(campaign.id.toString() ?? '');
const { hasFeatureFlag } = useFeatureFlag();
const hasTaggingToolFeature = hasFeatureFlag(FEATURE_FLAG_TAGGING_TOOL);

Expand All @@ -101,7 +105,8 @@ export const Metas = ({ campaign }: { campaign: CampaignWithOutput }) => {
}
}, [videos]);

if (isLoading || isFetching) return <Skeleton width="200px" height="20px" />;
if (isLoading || isFetching || isLoadingVideos || isFetchingVideos)
return <Skeleton width="500px" height="20px" />;

return (
<FooterContainer>
Expand Down
39 changes: 21 additions & 18 deletions src/pages/Insights/Collection/ObservationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ import {
SpecialCard,
Tag,
} from '@appquality/unguess-design-system';
import { FieldArray, FieldArrayRenderProps, useFormikContext } from 'formik';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { appTheme } from 'src/app/theme';
import { Grape, VideoTag } from 'src/features/api';
import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg';
import { getDeviceIcon } from 'src/common/components/BugDetail/Meta';
import { Pipe } from 'src/common/components/Pipe';
import { useMemo, useState } from 'react';
import { getColorWithAlpha } from 'src/common/utils';
import { Grape, VideoTag } from 'src/features/api';
import { styled } from 'styled-components';
import { FieldArray, FieldArrayRenderProps, useFormikContext } from 'formik';
import { getDeviceIcon } from 'src/common/components/BugDetail/Meta';
import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg';
import { LightboxContainer } from './Lightbox';
import { InsightFormValues } from '../FormProvider';
import { LightboxContainer } from './Lightbox';

const StyledTag = styled(Tag)`
user-select: none;
Expand All @@ -29,6 +29,7 @@ const StyledTag = styled(Tag)`

const StyledAnchor = styled(Anchor)`
user-select: none;
font-size: ${appTheme.fontSizes.sm};
`;

const StyledSpecialCard = styled(SpecialCard)<{
Expand All @@ -41,11 +42,6 @@ const StyledSpecialCard = styled(SpecialCard)<{
`
border-color: ${severity.tag.style};
`}
${({ isChecked }) =>
isChecked &&
`
border-color: ${appTheme.palette.blue[600]};
`}
border-width: 2px;
`;

Expand All @@ -54,8 +50,9 @@ const Quotes = styled.span<{ isChecked: boolean }>`
cursor: text;
${({ isChecked }) =>
`color: ${
isChecked ? appTheme.palette.blue[600] : appTheme.palette.grey[700]
isChecked ? appTheme.palette.blue[600] : appTheme.palette.grey[800]
};`}
font-size: ${appTheme.fontSizes.md};
`;

export const ObservationCard = ({
Expand All @@ -68,7 +65,7 @@ export const ObservationCard = ({
const { t } = useTranslation();
const [isLightboxOpen, setIsLightboxOpen] = useState(false);
const { values, setFieldValue } = useFormikContext<InsightFormValues>();
const quotesMaxChars = 50;
const quotesMaxChars = 250;

const severity = observation.tags.find(
(tag) => tag.group.name === 'severity'
Expand Down Expand Up @@ -152,7 +149,9 @@ export const ObservationCard = ({
{observation.deviceType && (
<>
{!hideCheckbox && <Pipe />}
{getDeviceIcon(observation.deviceType)}
<Tag size="large" isRound>
{getDeviceIcon(observation.deviceType)}
</Tag>
</>
)}
{observation.usecaseTitle && (
Expand All @@ -173,7 +172,12 @@ export const ObservationCard = ({
</SpecialCard.Meta>

<SpecialCard.Header>
<SpecialCard.Header.Label style={{ userSelect: 'none' }}>
<SpecialCard.Header.Label
style={{
userSelect: 'none',
color: appTheme.palette.grey[600],
}}
>
{title}
</SpecialCard.Header.Label>
<SpecialCard.Header.Title
Expand Down Expand Up @@ -201,7 +205,7 @@ export const ObservationCard = ({
{observation.uploaderId > 0 && (
<SM
style={{
color: appTheme.palette.grey[600],
color: appTheme.palette.grey[700],
marginBottom: appTheme.space.xs,
}}
>
Expand All @@ -211,7 +215,7 @@ export const ObservationCard = ({
<div style={{ display: 'flex', alignItems: 'center' }}>
{severity && (
<StyledTag
size="small"
size="medium"
color={severity.tag.style}
style={{
backgroundColor: getColorWithAlpha(
Expand Down Expand Up @@ -252,7 +256,6 @@ export const ObservationCard = ({

<SpecialCard.Footer>
<StyledAnchor
isExternal
onClick={(e) => {
e.stopPropagation();
setIsLightboxOpen(true);
Expand Down