From 043271f2a737a9400676a321b07d57d90038b597 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Fri, 15 Jun 2018 18:14:31 +0200 Subject: [PATCH] SONARCLOUD-66 Move and improve contact form --- .../app/components/GlobalFooterSonarCloud.tsx | 2 +- .../GlobalFooterSonarCloud-test.tsx.snap | 2 +- .../main/js/app/styles/components/alerts.css | 5 + server/sonar-web/src/main/js/app/theme.js | 7 +- .../src/main/js/apps/about/routes.ts | 4 + .../main/js/apps/about/sonarcloud/Contact.tsx | 189 ++++++++++++++++++ .../main/js/apps/about/sonarcloud/Footer.tsx | 2 +- .../main/js/apps/about/sonarcloud/style.css | 131 +++++++++++- 8 files changed, 332 insertions(+), 10 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooterSonarCloud.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooterSonarCloud.tsx index d1ffc010768..05568542aeb 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalFooterSonarCloud.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalFooterSonarCloud.tsx @@ -52,7 +52,7 @@ export default function GlobalFooterSonarCloud() { {translate('footer.help')}
  • - {translate('footer.contact_us')} + {translate('footer.contact_us')}
  • {translate('footer.status')} diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalFooterSonarCloud-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalFooterSonarCloud-test.tsx.snap index 89bb14e6625..42385bd4293 100644 --- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalFooterSonarCloud-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalFooterSonarCloud-test.tsx.snap @@ -75,7 +75,7 @@ exports[`should render correctly 1`] = ` footer.contact_us diff --git a/server/sonar-web/src/main/js/app/styles/components/alerts.css b/server/sonar-web/src/main/js/app/styles/components/alerts.css index 6cbd7fb0896..0695abad28f 100644 --- a/server/sonar-web/src/main/js/app/styles/components/alerts.css +++ b/server/sonar-web/src/main/js/app/styles/components/alerts.css @@ -60,6 +60,11 @@ color: #3c763d; } +.alert-big { + font-size: var(--mediumFontSize); + padding: 10px 16px; +} + .page-notifs .alert { padding: 8px 10px; } diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js index 75f6dcdc4d1..b9e4c9670cc 100644 --- a/server/sonar-web/src/main/js/app/theme.js +++ b/server/sonar-web/src/main/js/app/theme.js @@ -111,11 +111,12 @@ module.exports = { // sonarcloud sonarcloudOrange: '#f60', sonarcloudOrangeDark: '#e65c00', - sonarcloudFontFamily: - "Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif", sonarcloudBlack200: '#f9f9fb', sonarcloudBlack300: '#cfd3d7', sonarcloudBlack700: '#434447', sonarcloudBlack800: '#2d3032', - sonarcloudBlack900: '#070706' + sonarcloudBlack900: '#070706', + sonarcloudBorderGray: 'rgba(207, 211, 215, 0.5)', + sonarcloudFontFamily: + "Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" }; diff --git a/server/sonar-web/src/main/js/apps/about/routes.ts b/server/sonar-web/src/main/js/apps/about/routes.ts index a042681c66c..315b604da61 100644 --- a/server/sonar-web/src/main/js/apps/about/routes.ts +++ b/server/sonar-web/src/main/js/apps/about/routes.ts @@ -29,6 +29,10 @@ const routes = [ }, childRoutes: isSonarCloud ? [ + { + path: 'contact', + component: lazyLoad(() => import('./sonarcloud/Contact')) + }, { path: 'sq', childRoutes: [ diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx new file mode 100644 index 00000000000..dd0e78da829 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx @@ -0,0 +1,189 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { Link } from 'react-router'; +import SonarCloudPage from './SonarCloudPage'; +import Select from '../../../components/controls/Select'; +import { isLoggedIn, Organization } from '../../../app/types'; +import './style.css'; + +const CATEGORIES = [ + { label: 'Commercial', value: 'commercial' }, + { label: 'Product', value: 'product' }, + { label: 'Operations / Service / Infrastructure', value: 'operations' } +]; + +interface State { + category: string; + organization: string; + subject: string; +} + +export default class Contact extends React.PureComponent<{}, State> { + state: State = { category: '', organization: '', subject: '' }; + + getOrganizations = (organizations?: Organization[]) => { + return (organizations || []).map(org => ({ + label: org.name, + value: org.key + })); + }; + + handleCategoryChange = ({ value }: { value: string }) => { + this.setState({ category: value }); + }; + + handleOrganizationChange = ({ value }: { value: string }) => { + this.setState({ organization: value }); + }; + + handleSubjectChange = (event: React.ChangeEvent) => { + this.setState({ subject: event.currentTarget.value }); + }; + + render() { + return ( + + {({ currentUser, userOrganizations }) => ( +
    +

    Contact us

    +

    + If you are looking for help with SonarCloud, our{' '} + + Support forum + {' '} + is the best place to get help. +

    +
    +

    + Please contact us only if you couldn't solve your problem with the forum help. +

    + {!isLoggedIn(currentUser) && ( +

    + You can{' '} + + log in to SonarCloud + {' '} + to automatically fill this form information and get better support. +

    + )} +
    +
    + + +
    +
    + + +
    +
    + + +
    + {isLoggedIn(currentUser) && ( +
    + + + +
    +
    + +