-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(workspaces): create button and test (#3586)
* chore(workspaces): create button and test * chore(spaces): remove superfluous container * chore(workspaces): shorten import * chore(spaces): use design token * chore(workspaces): sane test, correct filename typo * chore(spaces): toggle flag * chore(workspaces): add changeset * chore(spaces): feature name is constant * chore(spaces): export feature name * chore(spaces): move nav button outside of container * chore(spaces): simplify approach * fix: imports --------- Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>
- Loading branch information
Showing
9 changed files
with
130 additions
and
10 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'@commercetools-frontend/application-shell': minor | ||
'@commercetools-frontend/constants': minor | ||
--- | ||
|
||
Adds functionality to the AppBar component for an ongoing feature effort |
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
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
1 change: 1 addition & 0 deletions
1
packages/application-shell/src/components/workspaces-navigation-button/index.ts
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 |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from './workspaces-navigation-button'; |
9 changes: 9 additions & 0 deletions
9
packages/application-shell/src/components/workspaces-navigation-button/messages.ts
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 |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { defineMessages } from 'react-intl'; | ||
|
||
export default defineMessages({ | ||
tooltip: { | ||
id: 'WorkspacesNavigationButton.tooltip', | ||
description: 'The tooltip for the Workspaces navigation button', | ||
defaultMessage: 'Switch between commercetools products', | ||
}, | ||
}); |
31 changes: 31 additions & 0 deletions
31
...n-shell/src/components/workspaces-navigation-button/workspaces-navigation-button.spec.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 |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { featureFlags } from '@commercetools-frontend/constants'; | ||
import { screen, renderApp } from '../../test-utils'; | ||
import WorkspacesNavigationButton, { | ||
FEATURE_NAME, | ||
} from './workspaces-navigation-button'; | ||
|
||
describe('rendering', () => { | ||
it('should render the button when the feature flag is enabled and projectKey is provided', async () => { | ||
renderApp(<WorkspacesNavigationButton />, { | ||
flags: { | ||
[featureFlags.ENABLE_WORKSPACES_UI]: { value: true }, | ||
}, | ||
}); | ||
|
||
const button = await screen.findByRole('button', { | ||
name: FEATURE_NAME, | ||
}); | ||
|
||
expect(button).toHaveAttribute('href', `/workspaces`); | ||
}); | ||
|
||
it('should not render the button when the feature flag is disabled', () => { | ||
renderApp(<WorkspacesNavigationButton />, { | ||
flags: { | ||
[featureFlags.ENABLE_WORKSPACES_UI]: { value: false }, | ||
}, | ||
}); | ||
|
||
expect(screen.queryByRole('button')).not.toBeInTheDocument(); | ||
}); | ||
}); |
65 changes: 65 additions & 0 deletions
65
...cation-shell/src/components/workspaces-navigation-button/workspaces-navigation-button.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 |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import { ReactElement } from 'react'; | ||
import { css } from '@emotion/react'; | ||
import { useFlagVariation } from '@flopflip/react-broadcast'; | ||
import { useIntl } from 'react-intl'; | ||
import { Link } from 'react-router-dom'; | ||
import { featureFlags } from '@commercetools-frontend/constants'; | ||
import { designTokens } from '@commercetools-uikit/design-system'; | ||
import SecondaryButton from '@commercetools-uikit/secondary-button'; | ||
import Tooltip from '@commercetools-uikit/tooltip'; | ||
import messages from './messages'; | ||
|
||
export const FEATURE_NAME = 'Workspaces'; | ||
|
||
// TODO: This logo still TBD, placeholder for now | ||
const WorkspacesLogo = () => { | ||
return ( | ||
<div | ||
css={css` | ||
height: 22px; | ||
width: 22px; | ||
background-color: lightgray; | ||
border-radius: 4px; | ||
`} | ||
/> | ||
); | ||
}; | ||
|
||
const WorkspacesNavigationButton = () => { | ||
const { formatMessage } = useIntl(); | ||
const workspacesAppBarButtonEnabled = useFlagVariation( | ||
featureFlags.ENABLE_WORKSPACES_UI | ||
); | ||
|
||
// @ts-ignore It's coming from the MC API, it's an object { value: boolean }. | ||
const isWorkspacesButtonEnabled = workspacesAppBarButtonEnabled?.value; | ||
|
||
if (!isWorkspacesButtonEnabled) return null; | ||
|
||
return ( | ||
<div | ||
css={css` | ||
margin-right: ${designTokens.spacing60}; | ||
`} | ||
> | ||
<div | ||
css={css` | ||
a { | ||
border-radius: ${designTokens.borderRadius20}; | ||
} | ||
`} | ||
> | ||
<Tooltip placement="bottom" title={formatMessage(messages.tooltip)}> | ||
<SecondaryButton | ||
iconLeft={(<WorkspacesLogo />) as ReactElement} | ||
as={Link} | ||
label={FEATURE_NAME} | ||
to={'/workspaces'} | ||
/> | ||
</Tooltip> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default WorkspacesNavigationButton; |
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.