-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Update AppGroup component to handle empty group names
The AppGroup component in the AppGroup.tsx file has been updated to handle cases where the group name is empty. Previously, the component would throw an error if the group name was not provided. With this change, the component will now display an empty string as the group name when it is not available.
- Loading branch information
Showing
2 changed files
with
79 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
134 changes: 78 additions & 56 deletions
134
client/packages/service-message/components/ServiceMessageCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,87 @@ | ||
| import { Button, Card, Icon } from "@equinor/eds-core-react"; | ||
| import { tokens } from "@equinor/eds-tokens"; | ||
| import { Button, Card, Icon } from '@equinor/eds-core-react'; | ||
| import { tokens } from '@equinor/eds-tokens'; | ||
|
|
||
| import { FC, useRef, useState } from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { ServiceMessage } from '../types/types'; | ||
|
|
||
| import { FC, useRef, useState } from "react"; | ||
| import styled from "styled-components"; | ||
| import { ServiceMessage } from "../types/types" | ||
|
|
||
| import MarkdownViewer from "./MarkdownViewer"; | ||
| import { StyledCard, StyledCardIndicator, StyledContentWrapper, StyledHeader, StyledHeaderItem, StyledHeaderWrapper, StyledTime } from "./ServiceMessageCardStyles"; | ||
| import { TimeStamp } from "./TimeStamp"; | ||
|
|
||
| import MarkdownViewer from './MarkdownViewer'; | ||
| import { | ||
| StyledCard, | ||
| StyledCardIndicator, | ||
| StyledContentWrapper, | ||
| StyledHeader, | ||
| StyledHeaderItem, | ||
| StyledHeaderWrapper, | ||
| StyledTime, | ||
| } from './ServiceMessageCardStyles'; | ||
| import { TimeStamp } from './TimeStamp'; | ||
|
|
||
| const StyledContent = styled(Card.Content)``; | ||
|
|
||
| const getIconVariant = (type: "Issue" | "Maintenance" | "Info") => { | ||
| const variant = { | ||
| Issue: { name: "warning_filled", color: tokens.colors.interactive.danger__resting.rgba }, | ||
| Maintenance: { name: "error_filled", color: tokens.colors.interactive.warning__resting.rgba }, | ||
| Info: { name: "error_filled", color: tokens.colors.infographic.primary__moss_green_100.rgba } | ||
| } | ||
| return variant[type] | ||
| } | ||
|
|
||
| const getIconName = (active: boolean) => active ? "chevron_up" : "chevron_down" | ||
|
|
||
|
|
||
| export const ServiceMessageCard: FC<{ message: ServiceMessage, onClose?: VoidFunction, compact?: boolean }> = ({ message, onClose, compact = true }) => { | ||
| const variant = getIconVariant(message.type); | ||
| const [showContent, setShowContent] = useState(compact || message.type === "Issue" && message.content !== null); | ||
| const ref = useRef<HTMLDivElement>(null); | ||
| const getIconVariant = (type: 'Issue' | 'Maintenance' | 'Info') => { | ||
| const variant = { | ||
| Issue: { name: 'warning_filled', color: tokens.colors.interactive.danger__resting.rgba }, | ||
| Maintenance: { name: 'error_filled', color: tokens.colors.interactive.warning__resting.rgba }, | ||
| Info: { name: 'error_filled', color: tokens.colors.infographic.primary__moss_green_100.rgba }, | ||
| }; | ||
| return variant[type]; | ||
| }; | ||
|
|
||
| return (<StyledCard key={message.id} ref={ref}> | ||
| <StyledCardIndicator color={variant.color} /> | ||
| <StyledContentWrapper> | ||
| <StyledHeaderWrapper > | ||
| <StyledHeaderItem> | ||
| <Icon {...variant} /> | ||
| <StyledHeader width={ref.current?.offsetWidth ? ref.current?.offsetWidth - 300 : 200} title={message.title} token={tokens.typography.ui.accordion_header}>{message.title} | ||
| </StyledHeader> | ||
| </StyledHeaderItem> | ||
| <StyledHeaderItem> | ||
| <StyledTime variant="overline" > | ||
| <TimeStamp date={message.timestamp} /> | ||
| </StyledTime> | ||
| {onClose ? <Button variant="ghost_icon" onClick={() => onClose()} > | ||
| <Icon name="close" /> | ||
| </Button> : <Button variant="ghost_icon" disabled={!message.content} onClick={() => { | ||
| setShowContent(state => !state) | ||
| }} > | ||
| <Icon name={getIconName(showContent)} /> | ||
| </Button>} | ||
| </StyledHeaderItem> | ||
| const getIconName = (active: boolean) => (active ? 'chevron_up' : 'chevron_down'); | ||
|
|
||
| </StyledHeaderWrapper> | ||
| export const ServiceMessageCard: FC<{ message: ServiceMessage; onClose?: VoidFunction; compact?: boolean }> = ({ | ||
| message, | ||
| onClose, | ||
| compact = true, | ||
| }) => { | ||
| const variant = getIconVariant(message.type); | ||
| const [showContent, setShowContent] = useState(compact || (message.type === 'Issue' && message.content !== null)); | ||
| const ref = useRef<HTMLDivElement>(null); | ||
|
|
||
| {showContent && message.content && | ||
| <StyledContent> | ||
| <MarkdownViewer markdown={message.content} /> | ||
| </StyledContent> | ||
| } | ||
| return ( | ||
| <StyledCard key={message.id} ref={ref}> | ||
| <StyledCardIndicator color={variant.color} /> | ||
| <StyledContentWrapper> | ||
| <StyledHeaderWrapper> | ||
| <StyledHeaderItem> | ||
| <Icon {...variant} /> | ||
| <StyledHeader | ||
| width={ref.current?.offsetWidth ? ref.current?.offsetWidth - 300 : 200} | ||
| title={message.title || ''} | ||
| token={tokens.typography.ui.accordion_header} | ||
| > | ||
| {message.title} | ||
| </StyledHeader> | ||
| </StyledHeaderItem> | ||
| <StyledHeaderItem> | ||
| <StyledTime variant="overline"> | ||
| <TimeStamp date={message.timestamp} /> | ||
| </StyledTime> | ||
| {onClose ? ( | ||
| <Button variant="ghost_icon" onClick={() => onClose()}> | ||
| <Icon name="close" /> | ||
| </Button> | ||
| ) : ( | ||
| <Button | ||
| variant="ghost_icon" | ||
| disabled={!message.content} | ||
| onClick={() => { | ||
| setShowContent((state) => !state); | ||
| }} | ||
| > | ||
| <Icon name={getIconName(showContent)} /> | ||
| </Button> | ||
| )} | ||
| </StyledHeaderItem> | ||
| </StyledHeaderWrapper> | ||
|
|
||
| </StyledContentWrapper> | ||
| </StyledCard>) | ||
| } | ||
| {showContent && message.content && ( | ||
| <StyledContent> | ||
| <MarkdownViewer markdown={message.content} /> | ||
| </StyledContent> | ||
| )} | ||
| </StyledContentWrapper> | ||
| </StyledCard> | ||
| ); | ||
| }; |