From ff7677709852f303674ec1b834247f354cdbb20c Mon Sep 17 00:00:00 2001 From: Architektor Date: Wed, 14 Mar 2018 22:23:58 +0300 Subject: [PATCH] feat: make new feature presentation component --- .../FeatureHighlight.jsx} | 21 +++--- app/components/FeatureHighlight/index.jsx | 1 + .../FeatureHighlight/styled/index.js | 11 +++ app/components/FeatureHightlight/index.jsx | 1 - app/components/index.jsx | 2 +- app/containers/Header/Header.jsx | 71 ++++++++++--------- app/reducers/ui.js | 1 + app/sagas/index.js | 1 + app/sagas/initializeApp.js | 4 ++ app/sagas/ui.js | 1 + app/types/ui.js | 1 + flow-typed/npm/redux_v3.x.x.js | 10 +-- package.json | 2 +- yarn.lock | 14 +--- 14 files changed, 79 insertions(+), 62 deletions(-) rename app/components/{FeatureHightlight/FeatureHightlight.jsx => FeatureHighlight/FeatureHighlight.jsx} (61%) create mode 100644 app/components/FeatureHighlight/index.jsx create mode 100644 app/components/FeatureHighlight/styled/index.js delete mode 100644 app/components/FeatureHightlight/index.jsx diff --git a/app/components/FeatureHightlight/FeatureHightlight.jsx b/app/components/FeatureHighlight/FeatureHighlight.jsx similarity index 61% rename from app/components/FeatureHightlight/FeatureHightlight.jsx rename to app/components/FeatureHighlight/FeatureHighlight.jsx index 7cff341f9..4d148be71 100644 --- a/app/components/FeatureHightlight/FeatureHightlight.jsx +++ b/app/components/FeatureHighlight/FeatureHighlight.jsx @@ -9,31 +9,32 @@ import Lozenge from '@atlaskit/lozenge'; import { getUiState } from 'selectors'; import { uiActions } from 'actions'; +import { FeatureContainer } from './styled'; + type Props = { dispatch: Dispatch, children: Node, description: string, - featuresAcknowleged: Array, + acknowlegdedFeatures: Array, id: string, }; const FeatureHighlight = ({ dispatch, - featuresAcknowleged, + acknowlegdedFeatures, description, children, id, -}: Props) => (!featuresAcknowleged.includes(id) +}: Props) => (!acknowlegdedFeatures.includes(id) ? ( dispatch(uiActions.acknowlegdeFeature({ featureId: id }))} - onBlur={() => dispatch(uiActions.acknowlegdeFeature({ featureId: id }))} + onClick={() => dispatch(uiActions.acknowlegdeFeature({ featureId: 'multiAccounts' }))} > - {children} - - New - + + {children} + New + ) : ( children @@ -41,7 +42,7 @@ const FeatureHighlight = ({ const connector = connect( state => ({ - featuresAcknowleged: getUiState('featuresAcknowleged')(state), + acknowlegdedFeatures: getUiState('acknowlegdedFeatures')(state), }), dispatch => ({ dispatch }), ); diff --git a/app/components/FeatureHighlight/index.jsx b/app/components/FeatureHighlight/index.jsx new file mode 100644 index 000000000..7fe15d4e7 --- /dev/null +++ b/app/components/FeatureHighlight/index.jsx @@ -0,0 +1 @@ +export default from './FeatureHighlight'; diff --git a/app/components/FeatureHighlight/styled/index.js b/app/components/FeatureHighlight/styled/index.js new file mode 100644 index 000000000..0b6529ed1 --- /dev/null +++ b/app/components/FeatureHighlight/styled/index.js @@ -0,0 +1,11 @@ +import styled from 'styled-components2'; + +export const FeatureContainer = styled.div` + position: relative; + & > span:last-child { + position: absolute; + top: 0; + right: 0; + transform: translateX(100%); + } +`; diff --git a/app/components/FeatureHightlight/index.jsx b/app/components/FeatureHightlight/index.jsx deleted file mode 100644 index 87fd7bf7d..000000000 --- a/app/components/FeatureHightlight/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export default from './FeatureHightlight'; diff --git a/app/components/index.jsx b/app/components/index.jsx index a3e35f17d..0d62eb1a0 100644 --- a/app/components/index.jsx +++ b/app/components/index.jsx @@ -17,4 +17,4 @@ export TextField from './TextField'; export SingleSelect from './SingleSelect'; export * as ReduxFormComponents from './ReduxFormComponents'; export RemainingEstimatePicker from './RemainingEstimatePicker'; -export FeatureHighlight from './FeatureHightlight'; +export FeatureHighlight from './FeatureHighlight'; diff --git a/app/containers/Header/Header.jsx b/app/containers/Header/Header.jsx index 4e66171ff..fcda190b1 100644 --- a/app/containers/Header/Header.jsx +++ b/app/containers/Header/Header.jsx @@ -50,6 +50,8 @@ import EditorAddIcon from '@atlaskit/icon/glyph/editor/add'; import { transformValidHost } from '../../sagas/auth'; +import FeatureHighlight from '../../components/FeatureHighlight'; + import { HeaderContainer, ProfileContainer, @@ -99,40 +101,45 @@ const Header: StatelessFunctionalComponent = ({ {userData.displayName} - - {host} - - } + - {accounts.map((ac) => { - const isActive = transformValidHost(ac.host).host === host && - (ac.username === userData.emailAddress || - ac.username === userData.key || - ac.username === userData.name); - return ( - dispatch(authActions.switchAccount(ac))} - isDisabled={isActive} - elemAfter={isActive && Active} - > - - {ac.username} - - ); - })} - dispatch(authActions.logoutRequest({ dontForget: true }))} + + {host} + + } > - - Add account - - - + {accounts.map((ac) => { + const isActive = transformValidHost(ac.host).host === host && + (ac.username === userData.emailAddress || + ac.username === userData.key || + ac.username === userData.name); + return ( + dispatch(authActions.switchAccount(ac))} + isDisabled={isActive} + elemAfter={isActive && Active} + > + + {ac.username} + + ); + })} + dispatch(authActions.logoutRequest({ dontForget: true }))} + > + + Add account + + + + diff --git a/app/reducers/ui.js b/app/reducers/ui.js index fcf42a42d..de6e795fc 100644 --- a/app/reducers/ui.js +++ b/app/reducers/ui.js @@ -15,6 +15,7 @@ const initialState: UiState = { initializeInProcess: false, authorized: false, accounts: [], + acknowlegdedFeatures: [], authFormStep: 1, loginError: null, loginRequestInProcess: false, diff --git a/app/sagas/index.js b/app/sagas/index.js index 62d42fd67..656f359bf 100644 --- a/app/sagas/index.js +++ b/app/sagas/index.js @@ -74,5 +74,6 @@ export default function* rootSaga(): Generator<*, void, *> { fork(uiSagas.watchUiStateChange), fork(uiSagas.watchScrollToIndexRequest), fork(uiSagas.watchSetIssuesFilter), + fork(uiSagas.newFeaturesFlow), ]); } diff --git a/app/sagas/initializeApp.js b/app/sagas/initializeApp.js index 0b63bb400..51747079d 100644 --- a/app/sagas/initializeApp.js +++ b/app/sagas/initializeApp.js @@ -113,6 +113,10 @@ export function* initialConfigureApp({ if (!accounts) accounts = []; yield put(uiActions.setUiState('accounts', accounts)); + let acknowlegdedFeatures = yield call(getFromStorage, 'acknowlegdedFeatures'); + if (!acknowlegdedFeatures) acknowlegdedFeatures = []; + yield put(uiActions.setUiState('acknowlegdedFeatures', acknowlegdedFeatures)); + const issuesSourceId: Id | null = yield call(getFromStorage, 'issuesSourceId'); const issuesSourceType = yield call(getFromStorage, 'issuesSourceType'); const issuesSprintId: Id | null = yield call(getFromStorage, 'issuesSprintId'); diff --git a/app/sagas/ui.js b/app/sagas/ui.js index 0e88d5096..e9b09238d 100644 --- a/app/sagas/ui.js +++ b/app/sagas/ui.js @@ -229,5 +229,6 @@ export function* newFeaturesFlow(): Generator<*, *, *> { if (!acknowlegdedFeatures) acknowlegdedFeatures = []; acknowlegdedFeatures.push(featureId); yield call(setToStorage, 'acknowlegdedFeatures', acknowlegdedFeatures); + yield put(uiActions.setUiState('acknowlegdedFeatures', acknowlegdedFeatures)); } } diff --git a/app/types/ui.js b/app/types/ui.js index 7f5faec2e..48aded22a 100644 --- a/app/types/ui.js +++ b/app/types/ui.js @@ -62,6 +62,7 @@ export type UiState = {| initializeInProcess: boolean, authorized: boolean, accounts: Array<{ host: string, username: string }>, + acknowlegdedFeatures: Array, authFormStep: number, loginError: null | string, loginRequestInProcess: boolean, diff --git a/flow-typed/npm/redux_v3.x.x.js b/flow-typed/npm/redux_v3.x.x.js index 97fec81e5..7bc662368 100644 --- a/flow-typed/npm/redux_v3.x.x.js +++ b/flow-typed/npm/redux_v3.x.x.js @@ -1,5 +1,5 @@ -// flow-typed signature: ec7daead5cb4fec5ab25fedbedef29e8 -// flow-typed version: 2c04631d20/redux_v3.x.x/flow_>=v0.55.x +// flow-typed signature: cca4916b0213065533df8335c3285a4a +// flow-typed version: cab04034e7/redux_v3.x.x/flow_>=v0.55.x declare module 'redux' { @@ -27,7 +27,7 @@ declare module 'redux' { replaceReducer(nextReducer: Reducer): void }; - declare export type Reducer = (state: S, action: A) => S; + declare export type Reducer = (state: S | void, action: A) => S; declare export type CombinedReducer = (state: $Shape & {} | void, action: A) => S; @@ -43,7 +43,7 @@ declare module 'redux' { declare export type StoreEnhancer> = (next: StoreCreator) => StoreCreator; declare export function createStore(reducer: Reducer, enhancer?: StoreEnhancer): Store; - declare export function createStore(reducer: Reducer, preloadedState: S, enhancer?: StoreEnhancer): Store; + declare export function createStore(reducer: Reducer, preloadedState?: S, enhancer?: StoreEnhancer): Store; declare export function applyMiddleware(...middlewares: Array>): StoreEnhancer; @@ -56,4 +56,4 @@ declare module 'redux' { declare export function combineReducers(reducers: O): CombinedReducer<$ObjMap(r: Reducer) => S>, A>; declare export var compose: $Compose; -} \ No newline at end of file +} diff --git a/package.json b/package.json index e0e18ee4f..cbaaefaa4 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,7 @@ "@atlaskit/single-select": "3.2.2", "@atlaskit/spinner": "4.1.2", "@atlaskit/tag": "3.1.3", - "@atlaskit/tooltip": "8.2.0", + "@atlaskit/tooltip": "8.3.2", "bufferutil": "3.0.3", "calculate-size": "1.1.1", "electron-json-storage": "4.0.2", diff --git a/yarn.lock b/yarn.lock index fd8d2dd48..8aea9291f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -254,7 +254,7 @@ styled-components "^1.4.6" uuid "^3.1.0" -"@atlaskit/layer-manager@^2.6.0", "@atlaskit/layer-manager@^2.7.1", "@atlaskit/layer-manager@^2.7.2", "@atlaskit/layer-manager@^2.7.4": +"@atlaskit/layer-manager@^2.7.1", "@atlaskit/layer-manager@^2.7.2", "@atlaskit/layer-manager@^2.7.4": version "2.7.4" resolved "https://registry.yarnpkg.com/@atlaskit/layer-manager/-/layer-manager-2.7.4.tgz#ad96a1335d7b77db7af8fe4b30ae8171c4febf83" dependencies: @@ -344,17 +344,7 @@ prop-types "^15.5.10" styled-components "^1.4.6" -"@atlaskit/tooltip@8.2.0": - version "8.2.0" - resolved "https://registry.yarnpkg.com/@atlaskit/tooltip/-/tooltip-8.2.0.tgz#6484f2943d2856903bd4ec1519a459f1dd569d35" - dependencies: - "@atlaskit/layer-manager" "^2.6.0" - "@atlaskit/theme" "^2.3.1" - react-deprecate "^0.1.0" - react-transition-group "^2.2.1" - styled-components "^1.4.6" - -"@atlaskit/tooltip@^8.3.2": +"@atlaskit/tooltip@8.3.2", "@atlaskit/tooltip@^8.3.2": version "8.3.2" resolved "https://registry.yarnpkg.com/@atlaskit/tooltip/-/tooltip-8.3.2.tgz#ed166fb9f46680e672f2404b310bcf5fd344d8f6" dependencies: