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

Use custom button for threat details toggle #40298

Merged
merged 1 commit into from
Nov 22, 2024
Merged

Use custom button for threat details toggle #40298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 33 additions & 22 deletions projects/js-packages/components/components/threat-modal/fixer-state-notice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { __ } from '@wordpress/i18n';
import { useMemo } from 'react';
import styles from './styles.module.scss';
import ThreatNotice from './threat-notice';

Expand All @@ -18,29 +19,39 @@ const FixerStateNotice = ( {
}: {
fixerState: { inProgress: boolean; error: boolean; stale: boolean };
} ) => {
let status: 'error' | 'success' | undefined;
let title: string | undefined;
let content: string | undefined;
const { status, title, content } = useMemo( () => {
if ( fixerState.error ) {
return {
status: 'error' as const,
title: __( 'An error occurred auto-fixing this threat', 'jetpack' ),
content: __(
'Jetpack encountered a filesystem error while attempting to auto-fix this threat. Please try again later or contact support.',
'jetpack'
),
};
}

if ( fixerState.error ) {
status = 'error';
title = __( 'An error occurred auto-fixing this threat', 'jetpack' );
content = __(
'Jetpack encountered a filesystem error while attempting to auto-fix this threat. Please try again later or contact support.',
'jetpack'
);
} else if ( fixerState.stale ) {
status = 'error';
title = __( 'The auto-fixer is taking longer than expected', 'jetpack' );
content = __(
'Jetpack has been attempting to auto-fix this threat for too long, and something may have gone wrong. Please try again later or contact support.',
'jetpack'
);
} else if ( fixerState.inProgress ) {
status = 'success';
title = __( 'An auto-fixer is in progress', 'jetpack' );
content = __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack' );
}
if ( fixerState.stale ) {
return {
status: 'error' as const,
title: __( 'The auto-fixer is taking longer than expected', 'jetpack' ),
content: __(
'Jetpack has been attempting to auto-fix this threat for too long, and something may have gone wrong. Please try again later or contact support.',
'jetpack'
),
};
}

if ( fixerState.inProgress ) {
return {
status: 'success' as const,
title: __( 'An auto-fixer is in progress', 'jetpack' ),
content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack' ),
};
}

return {};
}, [ fixerState ] );

return title ? (
<div className={ styles[ 'fixer-notice' ] }>
Expand Down
23 changes: 16 additions & 7 deletions projects/js-packages/components/components/threat-modal/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,24 @@
justify-content: flex-start;
align-items: center;
}
}

&__closed {
max-height: 0;
overflow: hidden;
}
.section__toggle {
border: none;
background: none;
padding: 0;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
display: flex;
gap: calc( var( --spacing-base ) / 2 ); // 4px
align-items: center;
transition: text-underline-offset 0.2s;

&__open {
max-height: fit-content;
overflow: hidden;
&:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: calc( var( --spacing-base ) / 2 ); // 4px
}
}

Expand Down
44 changes: 27 additions & 17 deletions projects/js-packages/components/components/threat-modal/threat-technical-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Text, Button } from '@automattic/jetpack-components';
import { Text } from '@automattic/jetpack-components';
import { Threat } from '@automattic/jetpack-scan';
import { __ } from '@wordpress/i18n';
import { chevronDown, chevronUp } from '@wordpress/icons';
import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
import { useState, useCallback } from 'react';
import DiffViewer from '../diff-viewer';
import MarkedLines from '../marked-lines';
Expand Down Expand Up @@ -29,25 +29,35 @@ const ThreatTechnicalDetails = ( { threat }: { threat: Threat } ): JSX.Element =
return (
<div className={ styles.section }>
<div className={ styles.section__title }>
<Text variant="title-small">{ __( 'The technical details', 'jetpack' ) }</Text>
<Button
variant="icon"
<button
className={ styles.section__toggle }
icon={ open ? chevronUp : chevronDown }
aria-expanded={ open }
aria-controls={ `threat-details-${ threat.id }` }
onClick={ toggleOpen }
/>
</div>
<div className={ open ? styles.section__open : styles.section__closed }>
{ threat.filename && (
<>
<Text>{ __( 'Threat found in file:', 'jetpack' ) }</Text>
<pre className={ styles.filename }>{ threat.filename }</pre>
</>
) }
{ threat.context && <MarkedLines context={ threat.context } /> }
{ threat.diff && <DiffViewer diff={ threat.diff } /> }
>
<span>
{ open
? __( 'Hide the technical details', 'jetpack' )
: __( 'Show the technical details', 'jetpack' ) }
</span>
<Icon icon={ open ? chevronUp : chevronDown } size={ 24 } />
</button>
</div>
{ open && (
<div
className={ open ? styles.section__open : styles.section__closed }
id={ `threat-details-${ threat.id }` }
>
{ threat.filename && (
<>
<Text>{ __( 'Threat found in file:', 'jetpack' ) }</Text>
<pre className={ styles.filename }>{ threat.filename }</pre>
</>
) }
{ threat.context && <MarkedLines context={ threat.context } /> }
{ threat.diff && <DiffViewer diff={ threat.diff } /> }
</div>
) }
</div>
);
};
Expand Down
Loading