feat: make new feature presentation component

app/components/FeatureHightlight/FeatureHightlight.jsx → app/components/FeatureHighlight/FeatureHighlight.jsx

@@ -9,39 +9,40 @@ 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<string>,
+  acknowlegdedFeatures: Array<string>,
   id: string,
 };
 
 const FeatureHighlight = ({
   dispatch,
-  featuresAcknowleged,
+  acknowlegdedFeatures,
   description,
   children,
   id,
-}: Props) => (!featuresAcknowleged.includes(id)
+}: Props) => (!acknowlegdedFeatures.includes(id)
   ? (
     <Tooltip
       content={description}
-      onMouseOut={() => dispatch(uiActions.acknowlegdeFeature({ featureId: id }))}
-      onBlur={() => dispatch(uiActions.acknowlegdeFeature({ featureId: id }))}
+      onClick={() => dispatch(uiActions.acknowlegdeFeature({ featureId: 'multiAccounts' }))}
     >
-      {children}
-      <Lozenge appearance="new">
-        New
-      </Lozenge>
+      <FeatureContainer>
+        {children}
+        <Lozenge appearance="new">New</Lozenge>
+      </FeatureContainer>
     </Tooltip>
   ) : (
     children
   ));
 
 const connector = connect(
   state => ({
-    featuresAcknowleged: getUiState('featuresAcknowleged')(state),
+    acknowlegdedFeatures: getUiState('acknowlegdedFeatures')(state),
   }),
   dispatch => ({ dispatch }),
 );

app/components/FeatureHighlight/index.jsx

@@ -0,0 +1 @@
+export default from './FeatureHighlight';

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%);
+  }
+`;

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';

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<Props> = ({
         <ProfileName>
           {userData.displayName}
         </ProfileName>
-        <DropdownMenu
-          triggerType="default"
-          position="right top"
-          trigger={
-            <ProfileTeam>
-              {host} <ChevronDownIcon />
-            </ProfileTeam>
-          }
+        <FeatureHighlight
+          id="multiAccounts"
+          description="You can switch between your accounts here."
         >
-          {accounts.map((ac) => {
-            const isActive = transformValidHost(ac.host).host === host &&
-              (ac.username === userData.emailAddress ||
-                ac.username === userData.key ||
-                ac.username === userData.name);
-            return (
-              <DropdownItem
-                key={`${ac.host}:${ac.username}`}
-                onClick={() => dispatch(authActions.switchAccount(ac))}
-                isDisabled={isActive}
-                elemAfter={isActive && <Lozenge appearance="success">Active</Lozenge>}
-              >
-                <Tag text={ac.host} color="teal" />
-                {ac.username}
-              </DropdownItem>
-            );
-          })}
-          <DropdownItem
-            onClick={() => dispatch(authActions.logoutRequest({ dontForget: true }))}
+          <DropdownMenu
+            triggerType="default"
+            position="right top"
+            trigger={
+              <ProfileTeam>
+                {host} <ChevronDownIcon />
+              </ProfileTeam>
+            }
           >
-            <span style={{ display: 'inline-flex', alignItems: 'center' }}>
-              <EditorAddIcon /> Add account
-            </span>
-          </DropdownItem>
-        </DropdownMenu>
+            {accounts.map((ac) => {
+              const isActive = transformValidHost(ac.host).host === host &&
+                (ac.username === userData.emailAddress ||
+                  ac.username === userData.key ||
+                  ac.username === userData.name);
+              return (
+                <DropdownItem
+                  key={`${ac.host}:${ac.username}`}
+                  onClick={() => dispatch(authActions.switchAccount(ac))}
+                  isDisabled={isActive}
+                  elemAfter={isActive && <Lozenge appearance="success">Active</Lozenge>}
+                >
+                  <Tag text={ac.host} color="teal" />
+                  {ac.username}
+                </DropdownItem>
+              );
+            })}
+            <DropdownItem
+              onClick={() => dispatch(authActions.logoutRequest({ dontForget: true }))}
+            >
+              <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+                <EditorAddIcon /> Add account
+              </span>
+            </DropdownItem>
+          </DropdownMenu>
+        </FeatureHighlight>
       </ProfileInfo>
     </ProfileContainer>
 

app/reducers/ui.js

@@ -15,6 +15,7 @@ const initialState: UiState = {
   initializeInProcess: false,
   authorized: false,
   accounts: [],
+  acknowlegdedFeatures: [],
   authFormStep: 1,
   loginError: null,
   loginRequestInProcess: false,

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),
   ]);
 }

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');

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));
   }
 }

app/types/ui.js

@@ -62,6 +62,7 @@ export type UiState = {|
   initializeInProcess: boolean,
   authorized: boolean,
   accounts: Array<{ host: string, username: string }>,
+  acknowlegdedFeatures: Array<string>,
   authFormStep: number,
   loginError: null | string,
   loginRequestInProcess: boolean,

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<S, A>): void
   };
 
-  declare export type Reducer<S, A> = (state: S, action: A) => S;
+  declare export type Reducer<S, A> = (state: S | void, action: A) => S;
 
   declare export type CombinedReducer<S, A> = (state: $Shape<S> & {} | void, action: A) => S;
 
@@ -43,7 +43,7 @@ declare module 'redux' {
   declare export type StoreEnhancer<S, A, D = Dispatch<A>> = (next: StoreCreator<S, A, D>) => StoreCreator<S, A, D>;
 
   declare export function createStore<S, A, D>(reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
-  declare export function createStore<S, A, D>(reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
+  declare export function createStore<S, A, D>(reducer: Reducer<S, A>, preloadedState?: S, enhancer?: StoreEnhancer<S, A, D>): Store<S, A, D>;
 
   declare export function applyMiddleware<S, A, D>(...middlewares: Array<Middleware<S, A, D>>): StoreEnhancer<S, A, D>;
 
@@ -56,4 +56,4 @@ declare module 'redux' {
   declare export function combineReducers<O: Object, A>(reducers: O): CombinedReducer<$ObjMap<O, <S>(r: Reducer<S, any>) => S>, A>;
 
   declare export var compose: $Compose;
-}
+}

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",

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: