From ff7c45f4a38871458f7be687a627b6d83a5ed7f6 Mon Sep 17 00:00:00 2001 From: farrukh8925 <49946648+farrukh8925@users.noreply.github.com> Date: Thu, 13 Jun 2019 18:04:15 +0300 Subject: [PATCH] 675 different form admin (#685) * different form for admin users * differernt form for differernt users * updating snapshot test cases * fix displayname error when logged in admin logs out --- .../HearingContainer.react-test.js.snap | 10 ++ .../HearingList.react-test.js.snap | 5 + .../__snapshots__/Hearings.react-test.js.snap | 5 + .../FullWidthHearing.react-test.js.snap | 5 + .../SortableCommentList.react-test.js.snap | 5 + assets/sass/kerrokantasi/_commentlist.scss | 2 +- assets/sass/kerrokantasi/_hearing-page.scss | 42 +++++ src/components/BaseCommentForm.js | 167 +++++++++++++++--- src/i18n/en.json | 5 + src/i18n/fi.json | 5 + 10 files changed, 227 insertions(+), 24 deletions(-) diff --git a/__tests__/Hearing/__snapshots__/HearingContainer.react-test.js.snap b/__tests__/Hearing/__snapshots__/HearingContainer.react-test.js.snap index 5e27f4984..28f4d92ef 100644 --- a/__tests__/Hearing/__snapshots__/HearingContainer.react-test.js.snap +++ b/__tests__/Hearing/__snapshots__/HearingContainer.react-test.js.snap @@ -259,6 +259,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "addProcess": "Lisää uusi vaihe", "addSection": "Lisää osa-alue", "add_images": "Lisää kuvia kommenttiisi", + "adminCommentMessage": "Olet kirjautuneena pääkäyttäjänä. Nimesi ja organisaatiosi näytetään kommenttisi yhteydessä", "all": "Kaikki", "allHearings": "Kaikki kuulemiset", "alreadyVoted": "Olet jo antanut äänesi tälle kommentille.", @@ -304,6 +305,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "editContact": "Muokkaa yhteystietoa", "editHearing": "Muokkaa", "email": "Sähköposti", + "employee": "Työntekijä", "eyeTooltip": "Tätä kuulemista ei ole julkaistu eikä se ole julkisesti nähtävissä.", "eyeTooltipOpens": "Tämä kuuleminen julkaistaan", "eyeTooltipOpensDays": "päivän kuluttua. Se ei ole vielä julkisesti nähtävissä.", @@ -350,6 +352,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "hearingsHeaderDescription": "Antamalla kommenttisi voit vaikuttaa käsiteltävinä olevien asioiden valmisteluun", "hearingsHeaderText": "Kuulemiset", "help": "Ohjeet", + "hideName": "Piilota nimi", "imageSizeError": "Kuva liian suuri, maksimikoko 1MB.", "image_too_big": "Kuva liian suuri, kuvan suurin sallitu koko on 1MB", "inLanguage-en": "englanniksi", @@ -381,6 +384,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "multipleChoiceQuestion": "Monivalintakysymys (vastaaja voi valita useamman vaihtoehdon)", "multipleImages": "Voit lisätä useita kuvia klikkaamalla useampaa tiedostoa samalla kun pidät Ctrl- tai komentonäppäintä painettuna.", "name": "Nimi", + "nameAndOrganization": "Nimi ja organisaatio", "newHearingPageTitle": "Uusi kuuleminen", "newMultipleChoiceQuestion": "Lisää monivalintakysymys", "newSingleChoiceQuestion": "Lisää yksivalintakysymys", @@ -399,6 +403,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "openFullscreenMap": "Kartta koko näytöllä", "openHearings": "Avoimet kuulemiset", "option": "Vastausvaihtoehto", + "organization": "Organisaatio", "overview-map": "Kartta", "partSection": "Osa-alue", "phase": "Vaihe", @@ -726,6 +731,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "addProcess": "Lisää uusi vaihe", "addSection": "Lisää osa-alue", "add_images": "Lisää kuvia kommenttiisi", + "adminCommentMessage": "Olet kirjautuneena pääkäyttäjänä. Nimesi ja organisaatiosi näytetään kommenttisi yhteydessä", "all": "Kaikki", "allHearings": "Kaikki kuulemiset", "alreadyVoted": "Olet jo antanut äänesi tälle kommentille.", @@ -771,6 +777,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "editContact": "Muokkaa yhteystietoa", "editHearing": "Muokkaa", "email": "Sähköposti", + "employee": "Työntekijä", "eyeTooltip": "Tätä kuulemista ei ole julkaistu eikä se ole julkisesti nähtävissä.", "eyeTooltipOpens": "Tämä kuuleminen julkaistaan", "eyeTooltipOpensDays": "päivän kuluttua. Se ei ole vielä julkisesti nähtävissä.", @@ -817,6 +824,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "hearingsHeaderDescription": "Antamalla kommenttisi voit vaikuttaa käsiteltävinä olevien asioiden valmisteluun", "hearingsHeaderText": "Kuulemiset", "help": "Ohjeet", + "hideName": "Piilota nimi", "imageSizeError": "Kuva liian suuri, maksimikoko 1MB.", "image_too_big": "Kuva liian suuri, kuvan suurin sallitu koko on 1MB", "inLanguage-en": "englanniksi", @@ -848,6 +856,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "multipleChoiceQuestion": "Monivalintakysymys (vastaaja voi valita useamman vaihtoehdon)", "multipleImages": "Voit lisätä useita kuvia klikkaamalla useampaa tiedostoa samalla kun pidät Ctrl- tai komentonäppäintä painettuna.", "name": "Nimi", + "nameAndOrganization": "Nimi ja organisaatio", "newHearingPageTitle": "Uusi kuuleminen", "newMultipleChoiceQuestion": "Lisää monivalintakysymys", "newSingleChoiceQuestion": "Lisää yksivalintakysymys", @@ -866,6 +875,7 @@ exports[`HearingContainer component should render as expected 1`] = ` "openFullscreenMap": "Kartta koko näytöllä", "openHearings": "Avoimet kuulemiset", "option": "Vastausvaihtoehto", + "organization": "Organisaatio", "overview-map": "Kartta", "partSection": "Osa-alue", "phase": "Vaihe", diff --git a/__tests__/Hearings/__snapshots__/HearingList.react-test.js.snap b/__tests__/Hearings/__snapshots__/HearingList.react-test.js.snap index f18e87af3..fa09baf22 100644 --- a/__tests__/Hearings/__snapshots__/HearingList.react-test.js.snap +++ b/__tests__/Hearings/__snapshots__/HearingList.react-test.js.snap @@ -51,6 +51,7 @@ exports[`HearingsList component should render as expected 1`] = ` "addProcess": "Lisää uusi vaihe", "addSection": "Lisää osa-alue", "add_images": "Lisää kuvia kommenttiisi", + "adminCommentMessage": "Olet kirjautuneena pääkäyttäjänä. Nimesi ja organisaatiosi näytetään kommenttisi yhteydessä", "all": "Kaikki", "allHearings": "Kaikki kuulemiset", "alreadyVoted": "Olet jo antanut äänesi tälle kommentille.", @@ -96,6 +97,7 @@ exports[`HearingsList component should render as expected 1`] = ` "editContact": "Muokkaa yhteystietoa", "editHearing": "Muokkaa", "email": "Sähköposti", + "employee": "Työntekijä", "eyeTooltip": "Tätä kuulemista ei ole julkaistu eikä se ole julkisesti nähtävissä.", "eyeTooltipOpens": "Tämä kuuleminen julkaistaan", "eyeTooltipOpensDays": "päivän kuluttua. Se ei ole vielä julkisesti nähtävissä.", @@ -142,6 +144,7 @@ exports[`HearingsList component should render as expected 1`] = ` "hearingsHeaderDescription": "Antamalla kommenttisi voit vaikuttaa käsiteltävinä olevien asioiden valmisteluun", "hearingsHeaderText": "Kuulemiset", "help": "Ohjeet", + "hideName": "Piilota nimi", "imageSizeError": "Kuva liian suuri, maksimikoko 1MB.", "image_too_big": "Kuva liian suuri, kuvan suurin sallitu koko on 1MB", "inLanguage-en": "englanniksi", @@ -173,6 +176,7 @@ exports[`HearingsList component should render as expected 1`] = ` "multipleChoiceQuestion": "Monivalintakysymys (vastaaja voi valita useamman vaihtoehdon)", "multipleImages": "Voit lisätä useita kuvia klikkaamalla useampaa tiedostoa samalla kun pidät Ctrl- tai komentonäppäintä painettuna.", "name": "Nimi", + "nameAndOrganization": "Nimi ja organisaatio", "newHearingPageTitle": "Uusi kuuleminen", "newMultipleChoiceQuestion": "Lisää monivalintakysymys", "newSingleChoiceQuestion": "Lisää yksivalintakysymys", @@ -191,6 +195,7 @@ exports[`HearingsList component should render as expected 1`] = ` "openFullscreenMap": "Kartta koko näytöllä", "openHearings": "Avoimet kuulemiset", "option": "Vastausvaihtoehto", + "organization": "Organisaatio", "overview-map": "Kartta", "partSection": "Osa-alue", "phase": "Vaihe", diff --git a/__tests__/Hearings/__snapshots__/Hearings.react-test.js.snap b/__tests__/Hearings/__snapshots__/Hearings.react-test.js.snap index 9366d9787..72cb232d4 100644 --- a/__tests__/Hearings/__snapshots__/Hearings.react-test.js.snap +++ b/__tests__/Hearings/__snapshots__/Hearings.react-test.js.snap @@ -110,6 +110,7 @@ exports[`Hearings component should render as expected 1`] = ` "addProcess": "Lisää uusi vaihe", "addSection": "Lisää osa-alue", "add_images": "Lisää kuvia kommenttiisi", + "adminCommentMessage": "Olet kirjautuneena pääkäyttäjänä. Nimesi ja organisaatiosi näytetään kommenttisi yhteydessä", "all": "Kaikki", "allHearings": "Kaikki kuulemiset", "alreadyVoted": "Olet jo antanut äänesi tälle kommentille.", @@ -155,6 +156,7 @@ exports[`Hearings component should render as expected 1`] = ` "editContact": "Muokkaa yhteystietoa", "editHearing": "Muokkaa", "email": "Sähköposti", + "employee": "Työntekijä", "eyeTooltip": "Tätä kuulemista ei ole julkaistu eikä se ole julkisesti nähtävissä.", "eyeTooltipOpens": "Tämä kuuleminen julkaistaan", "eyeTooltipOpensDays": "päivän kuluttua. Se ei ole vielä julkisesti nähtävissä.", @@ -201,6 +203,7 @@ exports[`Hearings component should render as expected 1`] = ` "hearingsHeaderDescription": "Antamalla kommenttisi voit vaikuttaa käsiteltävinä olevien asioiden valmisteluun", "hearingsHeaderText": "Kuulemiset", "help": "Ohjeet", + "hideName": "Piilota nimi", "imageSizeError": "Kuva liian suuri, maksimikoko 1MB.", "image_too_big": "Kuva liian suuri, kuvan suurin sallitu koko on 1MB", "inLanguage-en": "englanniksi", @@ -232,6 +235,7 @@ exports[`Hearings component should render as expected 1`] = ` "multipleChoiceQuestion": "Monivalintakysymys (vastaaja voi valita useamman vaihtoehdon)", "multipleImages": "Voit lisätä useita kuvia klikkaamalla useampaa tiedostoa samalla kun pidät Ctrl- tai komentonäppäintä painettuna.", "name": "Nimi", + "nameAndOrganization": "Nimi ja organisaatio", "newHearingPageTitle": "Uusi kuuleminen", "newMultipleChoiceQuestion": "Lisää monivalintakysymys", "newSingleChoiceQuestion": "Lisää yksivalintakysymys", @@ -250,6 +254,7 @@ exports[`Hearings component should render as expected 1`] = ` "openFullscreenMap": "Kartta koko näytöllä", "openHearings": "Avoimet kuulemiset", "option": "Vastausvaihtoehto", + "organization": "Organisaatio", "overview-map": "Kartta", "partSection": "Osa-alue", "phase": "Vaihe", diff --git a/__tests__/Home/__snapshots__/FullWidthHearing.react-test.js.snap b/__tests__/Home/__snapshots__/FullWidthHearing.react-test.js.snap index c8b7e0d58..f22ac057a 100644 --- a/__tests__/Home/__snapshots__/FullWidthHearing.react-test.js.snap +++ b/__tests__/Home/__snapshots__/FullWidthHearing.react-test.js.snap @@ -35,6 +35,7 @@ exports[`FullWidthHearing component should render as expected 1`] = ` "addProcess": "Lisää uusi vaihe", "addSection": "Lisää osa-alue", "add_images": "Lisää kuvia kommenttiisi", + "adminCommentMessage": "Olet kirjautuneena pääkäyttäjänä. Nimesi ja organisaatiosi näytetään kommenttisi yhteydessä", "all": "Kaikki", "allHearings": "Kaikki kuulemiset", "alreadyVoted": "Olet jo antanut äänesi tälle kommentille.", @@ -80,6 +81,7 @@ exports[`FullWidthHearing component should render as expected 1`] = ` "editContact": "Muokkaa yhteystietoa", "editHearing": "Muokkaa", "email": "Sähköposti", + "employee": "Työntekijä", "eyeTooltip": "Tätä kuulemista ei ole julkaistu eikä se ole julkisesti nähtävissä.", "eyeTooltipOpens": "Tämä kuuleminen julkaistaan", "eyeTooltipOpensDays": "päivän kuluttua. Se ei ole vielä julkisesti nähtävissä.", @@ -126,6 +128,7 @@ exports[`FullWidthHearing component should render as expected 1`] = ` "hearingsHeaderDescription": "Antamalla kommenttisi voit vaikuttaa käsiteltävinä olevien asioiden valmisteluun", "hearingsHeaderText": "Kuulemiset", "help": "Ohjeet", + "hideName": "Piilota nimi", "imageSizeError": "Kuva liian suuri, maksimikoko 1MB.", "image_too_big": "Kuva liian suuri, kuvan suurin sallitu koko on 1MB", "inLanguage-en": "englanniksi", @@ -157,6 +160,7 @@ exports[`FullWidthHearing component should render as expected 1`] = ` "multipleChoiceQuestion": "Monivalintakysymys (vastaaja voi valita useamman vaihtoehdon)", "multipleImages": "Voit lisätä useita kuvia klikkaamalla useampaa tiedostoa samalla kun pidät Ctrl- tai komentonäppäintä painettuna.", "name": "Nimi", + "nameAndOrganization": "Nimi ja organisaatio", "newHearingPageTitle": "Uusi kuuleminen", "newMultipleChoiceQuestion": "Lisää monivalintakysymys", "newSingleChoiceQuestion": "Lisää yksivalintakysymys", @@ -175,6 +179,7 @@ exports[`FullWidthHearing component should render as expected 1`] = ` "openFullscreenMap": "Kartta koko näytöllä", "openHearings": "Avoimet kuulemiset", "option": "Vastausvaihtoehto", + "organization": "Organisaatio", "overview-map": "Kartta", "partSection": "Osa-alue", "phase": "Vaihe", diff --git a/__tests__/__snapshots__/SortableCommentList.react-test.js.snap b/__tests__/__snapshots__/SortableCommentList.react-test.js.snap index 7ad25e792..083a62ab4 100644 --- a/__tests__/__snapshots__/SortableCommentList.react-test.js.snap +++ b/__tests__/__snapshots__/SortableCommentList.react-test.js.snap @@ -215,6 +215,7 @@ exports[`SortableCommentList component should render as expected 1`] = ` "addProcess": "Lisää uusi vaihe", "addSection": "Lisää osa-alue", "add_images": "Lisää kuvia kommenttiisi", + "adminCommentMessage": "Olet kirjautuneena pääkäyttäjänä. Nimesi ja organisaatiosi näytetään kommenttisi yhteydessä", "all": "Kaikki", "allHearings": "Kaikki kuulemiset", "alreadyVoted": "Olet jo antanut äänesi tälle kommentille.", @@ -260,6 +261,7 @@ exports[`SortableCommentList component should render as expected 1`] = ` "editContact": "Muokkaa yhteystietoa", "editHearing": "Muokkaa", "email": "Sähköposti", + "employee": "Työntekijä", "eyeTooltip": "Tätä kuulemista ei ole julkaistu eikä se ole julkisesti nähtävissä.", "eyeTooltipOpens": "Tämä kuuleminen julkaistaan", "eyeTooltipOpensDays": "päivän kuluttua. Se ei ole vielä julkisesti nähtävissä.", @@ -306,6 +308,7 @@ exports[`SortableCommentList component should render as expected 1`] = ` "hearingsHeaderDescription": "Antamalla kommenttisi voit vaikuttaa käsiteltävinä olevien asioiden valmisteluun", "hearingsHeaderText": "Kuulemiset", "help": "Ohjeet", + "hideName": "Piilota nimi", "imageSizeError": "Kuva liian suuri, maksimikoko 1MB.", "image_too_big": "Kuva liian suuri, kuvan suurin sallitu koko on 1MB", "inLanguage-en": "englanniksi", @@ -337,6 +340,7 @@ exports[`SortableCommentList component should render as expected 1`] = ` "multipleChoiceQuestion": "Monivalintakysymys (vastaaja voi valita useamman vaihtoehdon)", "multipleImages": "Voit lisätä useita kuvia klikkaamalla useampaa tiedostoa samalla kun pidät Ctrl- tai komentonäppäintä painettuna.", "name": "Nimi", + "nameAndOrganization": "Nimi ja organisaatio", "newHearingPageTitle": "Uusi kuuleminen", "newMultipleChoiceQuestion": "Lisää monivalintakysymys", "newSingleChoiceQuestion": "Lisää yksivalintakysymys", @@ -355,6 +359,7 @@ exports[`SortableCommentList component should render as expected 1`] = ` "openFullscreenMap": "Kartta koko näytöllä", "openHearings": "Avoimet kuulemiset", "option": "Vastausvaihtoehto", + "organization": "Organisaatio", "overview-map": "Kartta", "partSection": "Osa-alue", "phase": "Vaihe", diff --git a/assets/sass/kerrokantasi/_commentlist.scss b/assets/sass/kerrokantasi/_commentlist.scss index 6e61de293..316992be0 100644 --- a/assets/sass/kerrokantasi/_commentlist.scss +++ b/assets/sass/kerrokantasi/_commentlist.scss @@ -114,7 +114,7 @@ } } - .hearing-comment-show-more { + &__show-more { border-top: 1px solid $light-gray; font-weight: bold; margin-top: $margin-default; diff --git a/assets/sass/kerrokantasi/_hearing-page.scss b/assets/sass/kerrokantasi/_hearing-page.scss index a00d29934..3b48c4331 100644 --- a/assets/sass/kerrokantasi/_hearing-page.scss +++ b/assets/sass/kerrokantasi/_hearing-page.scss @@ -244,6 +244,48 @@ padding-top: 10px; } + &__group-admin { + + & .form-group { + + display: flex; + flex-direction: row; + + &>* { + margin-left: 24px; + } + + & :first-child { + margin-left: 0px; + } + + } + } + + &__comment-alert { + display: flex; + flex-direction: row; + align-items: center; + + &__alert-icon { + display: flex; + flex-basis: 5%; + min-width: 40px; + } + + &__alert-message { + flex-basis: 90%; + } + + &__alert-close { + flex-basis: 5%; + display: flex; + justify-content: flex-end; + min-width: 40px; + cursor: pointer; + } + } + .comment-buttons { text-align: right; margin: $line-height-computed 0; diff --git a/src/components/BaseCommentForm.js b/src/components/BaseCommentForm.js index 9b789df5f..5a1bf903e 100644 --- a/src/components/BaseCommentForm.js +++ b/src/components/BaseCommentForm.js @@ -1,12 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {injectIntl, intlShape, FormattedMessage} from 'react-intl'; -import Button from 'react-bootstrap/lib/Button'; -import Radio from 'react-bootstrap/lib/Radio'; -import Checkbox from 'react-bootstrap/lib/Checkbox'; -import FormControl from 'react-bootstrap/lib/FormControl'; -import FormGroup from 'react-bootstrap/lib/FormGroup'; -import ControlLabel from 'react-bootstrap/lib/ControlLabel'; +import {injectIntl, intlShape, FormattedMessage, } from 'react-intl'; +import { Button, Radio, Checkbox, FormControl, FormGroup, ControlLabel, Alert } from 'react-bootstrap'; import Icon from '../utils/Icon'; import {getImageAsBase64Promise} from '../utils/hearing'; import getAttr from '../utils/getAttr'; @@ -19,18 +14,35 @@ import QuestionResults from './QuestionResults'; export class BaseCommentForm extends React.Component { constructor(props, context) { super(props, context); - this.state = {collapsed: true, commentText: "", nickname: props.defaultNickname || '', imageTooBig: false, images: []}; + this.state = { + collapsed: true, + commentText: "", + nickname: props.defaultNickname || '', + imageTooBig: false, + images: [], + showAlert: true, + hideName: false, + }; this.getSelectedImagesAsArray = this.getSelectedImagesAsArray.bind(this); } + componentDidMount = () => { + if (this.isUserAdmin()) { + this.setState({ nickname: this.props.user.displayName }); + } + } + componentWillReceiveProps(nextProps) { if (!this.props.collapseForm && nextProps.collapseForm) { this.clearCommentText(); this.toggle(); } - if (this.props.defaultNickname === '' && nextProps.defaultNickname !== '') { + if (this.props.defaultNickname === '' && nextProps.defaultNickname !== '' && !this.isUserAdmin()) { this.setState({nickname: nextProps.defaultNickname}); } + if (this.isUserAdmin() && nextProps.user && nextProps.user.displayName) { + this.setState({ nickname: nextProps.user.displayName }); + } } toggle() { @@ -104,6 +116,16 @@ export class BaseCommentForm extends React.Component { }); } + /** + * Determines whether the logged in user is admin or not. + * The array in users with key adminOrganizations should be of length > 0 + */ + isUserAdmin = () => ( + this.props.user + && Array.isArray(this.props.user.adminOrganizations) + && this.props.user.adminOrganizations.length > 0 + ); + getPluginData() { // eslint-disable-line class-methods-use-this return undefined; } @@ -120,6 +142,25 @@ export class BaseCommentForm extends React.Component { return imagesArray; } + /** + * When user type is admin, an alert is shown, use this method to close the alert. + */ + handleCloseAlert = () => { + this.setState((prevState) => ({ + showAlert: !prevState.showAlert, + })); + } + + /** + * When logged in as admin, user may chose to hide their identity. + */ + handleToggleHideName = () => { + this.setState((prevState) => ({ + nickname: !prevState.hideName ? this.props.intl.formatMessage({ id: 'employee' }) : this.props.user.displayName, + hideName: !prevState.hideName, + })); + } + isImageTooBig(images) { // eslint-disable-line class-methods-use-this let isImageTooBig = false; @@ -135,9 +176,98 @@ export class BaseCommentForm extends React.Component { } } + /** + * When admin user is posting a comment, we will show a closeable warning. + */ + renderAdminWarning = () => ( + +
+
+ +
+ +
+ +
+
+ + ); + + /** + * Render the checkbox to hide user name and identitiy for admin user. + */ + renderHideNameOption = () => ( + + + + ); + + /** + * For admins, there is slightly different form. + */ + renderFormForAdmin =() => { + const { user } = this.props; + const organization = this.isUserAdmin() && user.adminOrganizations[0]; + return ( + + + {}} + maxLength={32} + disabled + /> + + ); + } + + /** + * If an admin type of user is posting comment, the form is slightly different. + * @returns {JSX} + */ + renderNameFormForUser = () => { + const isAdminUser = this.isUserAdmin(); + const headingId = isAdminUser ? 'nameAndOrganization' : 'nickname'; + + return ( + +

+ { isAdminUser && this.state.showAlert && this.renderAdminWarning() } + { isAdminUser && this.renderHideNameOption() } + { + isAdminUser + ? ( +
+ { this.renderFormForAdmin() } +
+ ) + : ( + + + + ) + } + + ); + } + render() { const {language, section, onChangeAnswers, answers, loggedIn, closed, user} = this.props; - if (!this.props.overrideCollapse && this.state.collapsed) { return (