3b5ea89a1c
* Update test for the loading spinner component * Create a story for the loading spinner component * Move role and use CSS for spacing instead * Add a classname prop * Reuse LoadingSpinner * Use OLSpinner instead of Spinner * Use data-testid since status role was moved * Wait for journals to load * Use `isLoading` prop instead and fix the button's height * Use `isLoading` prop instead * Use LoadingSpinner instead and remove spacing * Update test for the loading spinner component * Use `isLoading` prop instead * Add aria-describedby to layout button for processing state * Replace `spinner` to `ol-spinner` * Scope status * Remove redundant `div.loading` --------- Co-authored-by: Antoine Clausse <antoine.clausse@overleaf.com> GitOrigin-RevId: 8f43b991f8f458b2abd5a4661913ac9b972d892a
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { useCallback } from 'react'
|
|
import OLButton from '../../shared/components/ol/ol-button'
|
|
import { useIdeRedesignSwitcherContext } from '../ide-react/context/ide-redesign-switcher-context'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { canUseNewEditorViaPrimaryFeatureFlag } from '../ide-redesign/utils/new-editor-utils'
|
|
import { useSwitchEnableNewEditorState } from '../ide-redesign/hooks/use-switch-enable-new-editor-state'
|
|
|
|
const TryNewEditorButton = () => {
|
|
const { t } = useTranslation()
|
|
const { setShowSwitcherModal } = useIdeRedesignSwitcherContext()
|
|
const showModal = canUseNewEditorViaPrimaryFeatureFlag()
|
|
const { loading, setEditorRedesignStatus } = useSwitchEnableNewEditorState()
|
|
|
|
const onClick = useCallback(() => {
|
|
if (showModal) {
|
|
setShowSwitcherModal(true)
|
|
} else {
|
|
setEditorRedesignStatus(true)
|
|
}
|
|
}, [setShowSwitcherModal, showModal, setEditorRedesignStatus])
|
|
|
|
return (
|
|
<div className="d-flex align-items-center">
|
|
<OLButton
|
|
className="toolbar-experiment-button"
|
|
onClick={onClick}
|
|
size="sm"
|
|
variant="secondary"
|
|
isLoading={loading}
|
|
>
|
|
{t('try_the_new_editor')}
|
|
</OLButton>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TryNewEditorButton
|