From 2e275d6d675b0a250d7c8befc1a74f7fc33f33fd Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Thu, 28 Dec 2017 15:13:39 +0100 Subject: [PATCH 1/2] Add project/task path with tooltips to activities [SCI-1869] --- .../Navigation/components/ActivityElement.jsx | 50 +++++++++++++++---- .../src/config/constants/numeric.js | 3 +- app/javascript/src/config/locales/messages.js | 4 +- .../src/services/api/activities_api.js | 2 + .../client_api/activities/index.json.jbuilder | 4 ++ flow-typed/types.js | 4 +- 6 files changed, 55 insertions(+), 12 deletions(-) diff --git a/app/javascript/src/components/Navigation/components/ActivityElement.jsx b/app/javascript/src/components/Navigation/components/ActivityElement.jsx index 11070be90..8465fcf15 100644 --- a/app/javascript/src/components/Navigation/components/ActivityElement.jsx +++ b/app/javascript/src/components/Navigation/components/ActivityElement.jsx @@ -1,7 +1,10 @@ +// @flow + import React from "react"; -import PropTypes from "prop-types"; import Moment from "react-moment"; +import { Tooltip, OverlayTrigger } from "react-bootstrap"; import styled from "styled-components"; +import { FormattedMessage } from "react-intl"; import { WHITE_COLOR, @@ -9,6 +12,8 @@ import { BORDER_GRAY_COLOR } from "../../../config/constants/colors"; +import { NAME_TRUNCATION_LENGTH } from "../../../config/constants/numeric"; + const StyledLi = styled.li` border-radius: .25em; margin-bottom: 1em; @@ -41,14 +46,41 @@ const ActivityElement = ({ activity }) => {activity.created_at} - + + + {activity.task && +   + [ :  + {activity.project.length > NAME_TRUNCATION_LENGTH ? ( + + {activity.project} + + )} placement="bottom"> + + {activity.project.substring(0, NAME_TRUNCATION_LENGTH)}... + + + ):( + {activity.project} + )},  + :  + {activity.task.length > NAME_TRUNCATION_LENGTH ? ( + + {activity.task} + + )} placement="bottom"> + + {activity.task.substring(0, NAME_TRUNCATION_LENGTH)}... + + + ):( + {activity.task} + )} ] + + } + ; -ActivityElement.propTypes = { - activity: PropTypes.shape({ - message: PropTypes.string.isRequired, - created_at: PropTypes.string.isRequired - }).isRequired -}; - export default ActivityElement; diff --git a/app/javascript/src/config/constants/numeric.js b/app/javascript/src/config/constants/numeric.js index b51e920d0..b0d44956f 100644 --- a/app/javascript/src/config/constants/numeric.js +++ b/app/javascript/src/config/constants/numeric.js @@ -6,4 +6,5 @@ export const PASSWORD_MAX_LENGTH = 72; export const NAME_MAX_LENGTH = 255; export const TEXT_MAX_LENGTH = 10000; export const INVITE_USERS_LIMIT = 20; -export const AVATAR_MAX_SIZE_MB = 0.2; \ No newline at end of file +export const AVATAR_MAX_SIZE_MB = 0.2; +export const NAME_TRUNCATION_LENGTH = 25; diff --git a/app/javascript/src/config/locales/messages.js b/app/javascript/src/config/locales/messages.js index 88cef0ad6..315652a3e 100644 --- a/app/javascript/src/config/locales/messages.js +++ b/app/javascript/src/config/locales/messages.js @@ -9,7 +9,9 @@ export default { upload: "Upload", about_scinote: "About sciNote", core_version: "sciNote core version", - addon_versions: "Addon versions" + addon_versions: "Addon versions", + project: "Project", + task: "Task" }, page_title: { root: "SciNote", diff --git a/app/javascript/src/services/api/activities_api.js b/app/javascript/src/services/api/activities_api.js index cb42249ad..743ae55b8 100644 --- a/app/javascript/src/services/api/activities_api.js +++ b/app/javascript/src/services/api/activities_api.js @@ -8,3 +8,5 @@ export function getActivities( const path = `${ACTIVITIES_PATH}?from=${lastId}`; return axiosInstance.get(path).then(({ data }) => data.global_activities); } + +export default 'getActivities'; diff --git a/app/views/client_api/activities/index.json.jbuilder b/app/views/client_api/activities/index.json.jbuilder index b98a11e01..a932cd678 100644 --- a/app/views/client_api/activities/index.json.jbuilder +++ b/app/views/client_api/activities/index.json.jbuilder @@ -3,6 +3,10 @@ json.global_activities do json.activities activities do |activity| json.id activity.id json.message activity.message + if activity.my_module + json.project activity.my_module.experiment.project.name + json.task activity.my_module.name + end json.created_at activity.created_at end end diff --git a/flow-typed/types.js b/flow-typed/types.js index d3e6a16ce..dabf8f5f6 100644 --- a/flow-typed/types.js +++ b/flow-typed/types.js @@ -33,7 +33,9 @@ export type ValidationErrors = string | Array | Array; export type Activity = { id: number, message: string, - created_at: string + created_at: string, + project?: string, + task?: string }; export type State = { From 53f4db9352b58a6d59968fd98951d761a644f4a6 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Thu, 4 Jan 2018 14:56:16 +0100 Subject: [PATCH 2/2] Code refactoring [SCI-1869] --- .../Navigation/components/ActivityElement.jsx | 66 ++++++++++--------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/app/javascript/src/components/Navigation/components/ActivityElement.jsx b/app/javascript/src/components/Navigation/components/ActivityElement.jsx index 8465fcf15..08b7ab10b 100644 --- a/app/javascript/src/components/Navigation/components/ActivityElement.jsx +++ b/app/javascript/src/components/Navigation/components/ActivityElement.jsx @@ -38,6 +38,39 @@ const TextSpan = styled.span` padding: 3px 10px; text-align: justify; ` +function truncatedTooltip(id, text) { + return ( + + {text} + + )} placement="bottom"> + + {text.substring(0, NAME_TRUNCATION_LENGTH)}... + + + ); +} + +function taskPath(activity) { + return ( +   + [ :  + {activity.project.length > NAME_TRUNCATION_LENGTH ? ( + truncatedTooltip('activity_modal.long_project_tooltip', activity.project) + ):( + {activity.project} + )},  + :  + {activity.task.length > NAME_TRUNCATION_LENGTH ? ( + truncatedTooltip('activity_modal.long_task_tooltip', activity.task) + ):( + {activity.task} + )} ] + + ); +} + const ActivityElement = ({ activity }) => @@ -48,38 +81,7 @@ const ActivityElement = ({ activity }) => - {activity.task && -   - [ :  - {activity.project.length > NAME_TRUNCATION_LENGTH ? ( - - {activity.project} - - )} placement="bottom"> - - {activity.project.substring(0, NAME_TRUNCATION_LENGTH)}... - - - ):( - {activity.project} - )},  - :  - {activity.task.length > NAME_TRUNCATION_LENGTH ? ( - - {activity.task} - - )} placement="bottom"> - - {activity.task.substring(0, NAME_TRUNCATION_LENGTH)}... - - - ):( - {activity.task} - )} ] - - } + {activity.task && taskPath(activity)} ;