From 738e129094e8f763600d248bee7fc24d085e9239 Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Mon, 6 Nov 2023 16:01:04 +0100 Subject: [PATCH 01/29] Fix background image --- .../wwwroot/designer/img/Altinn-studio.svg | 288 +++++++++--------- .../components/Administration.module.css | 12 +- 2 files changed, 156 insertions(+), 144 deletions(-) diff --git a/backend/src/Designer/wwwroot/designer/img/Altinn-studio.svg b/backend/src/Designer/wwwroot/designer/img/Altinn-studio.svg index 59de4d4325b..fae4b01ea9c 100644 --- a/backend/src/Designer/wwwroot/designer/img/Altinn-studio.svg +++ b/backend/src/Designer/wwwroot/designer/img/Altinn-studio.svg @@ -1,142 +1,148 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/app-development/features/administration/components/Administration.module.css b/frontend/app-development/features/administration/components/Administration.module.css index 8172c3c7f65..10b0c2d42c9 100644 --- a/frontend/app-development/features/administration/components/Administration.module.css +++ b/frontend/app-development/features/administration/components/Administration.module.css @@ -11,8 +11,8 @@ .pageContainer::before { background-image: url('/designer/img/Altinn-studio.svg'); - background-position: center 10px; - background-size: 100% auto; + background-position: left 0; + background-size: 768px auto; background-repeat: no-repeat; content: ' '; @@ -21,7 +21,6 @@ margin: auto; width: 100%; height: 100%; - opacity: 0.1; } .container { @@ -100,6 +99,13 @@ width: 100%; } +@media (min-width: 768px) { + .pageContainer::before { + background-position: center 0; + background-size: 100% auto; + } +} + @media (min-width: 960px) { .content { flex-direction: row; From fe9ba1db6120ea2dd192da0ea4baf0e58f6e41e2 Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Tue, 7 Nov 2023 15:18:02 +0100 Subject: [PATCH 02/29] Fix height --- .../features/administration/components/Administration.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/app-development/features/administration/components/Administration.module.css b/frontend/app-development/features/administration/components/Administration.module.css index 10b0c2d42c9..f58d9c5695f 100644 --- a/frontend/app-development/features/administration/components/Administration.module.css +++ b/frontend/app-development/features/administration/components/Administration.module.css @@ -6,6 +6,7 @@ .pageContainer { background-color: #e6eff8; + flex: 1; position: relative; } From af59b2c5f7764a9af59f3941373aab55dc6591be Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Thu, 9 Nov 2023 17:45:40 +0100 Subject: [PATCH 03/29] Rename background image of Overview --- .../designer/img/{Altinn-studio.svg => overview-background.svg} | 0 .../administration/components/Administration.module.css | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename backend/src/Designer/wwwroot/designer/img/{Altinn-studio.svg => overview-background.svg} (100%) diff --git a/backend/src/Designer/wwwroot/designer/img/Altinn-studio.svg b/backend/src/Designer/wwwroot/designer/img/overview-background.svg similarity index 100% rename from backend/src/Designer/wwwroot/designer/img/Altinn-studio.svg rename to backend/src/Designer/wwwroot/designer/img/overview-background.svg diff --git a/frontend/app-development/features/administration/components/Administration.module.css b/frontend/app-development/features/administration/components/Administration.module.css index f58d9c5695f..398015f6cdb 100644 --- a/frontend/app-development/features/administration/components/Administration.module.css +++ b/frontend/app-development/features/administration/components/Administration.module.css @@ -11,7 +11,7 @@ } .pageContainer::before { - background-image: url('/designer/img/Altinn-studio.svg'); + background-image: url('/designer/img/overview-background.svg'); background-position: left 0; background-size: 768px auto; background-repeat: no-repeat; From 7d9a31b739a681289a04a0098e09d03b4133f3ac Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Tue, 7 Nov 2023 17:42:14 +0100 Subject: [PATCH 04/29] New contact page --- frontend/app-development/enums/RoutePaths.ts | 1 + .../features/Contact.module.css | 92 +++++++++++++++++++ .../app-development/features/Contact.test.tsx | 25 +++++ frontend/app-development/features/Contact.tsx | 59 ++++++++++++ frontend/app-development/router/routes.tsx | 8 ++ .../components/Resources/Resources.tsx | 47 +--------- frontend/language/src/nb.json | 12 +++ frontend/packages/shared/src/icons/Slack.svg | 26 ++++++ 8 files changed, 226 insertions(+), 44 deletions(-) create mode 100644 frontend/app-development/features/Contact.module.css create mode 100644 frontend/app-development/features/Contact.test.tsx create mode 100644 frontend/app-development/features/Contact.tsx create mode 100644 frontend/packages/shared/src/icons/Slack.svg diff --git a/frontend/app-development/enums/RoutePaths.ts b/frontend/app-development/enums/RoutePaths.ts index ced2f4ae3ef..b41bc81c76e 100644 --- a/frontend/app-development/enums/RoutePaths.ts +++ b/frontend/app-development/enums/RoutePaths.ts @@ -1,6 +1,7 @@ export enum RoutePaths { Root = '', Overview = 'overview', + Contact = 'contact', UIEditor = 'ui-editor', Datamodel = 'datamodel', Deploy = 'deploy', diff --git a/frontend/app-development/features/Contact.module.css b/frontend/app-development/features/Contact.module.css new file mode 100644 index 00000000000..3dadc5e89d0 --- /dev/null +++ b/frontend/app-development/features/Contact.module.css @@ -0,0 +1,92 @@ +.spinner { + display: flex; + gap: var(--fds-spacing-2); + flex-direction: column; +} + +.pageContainer { + background-color: #e6eff8; + flex: 1; + position: relative; +} + +.pageContainer::before { + background-image: url('/designer/img/Altinn-studio.svg'); + background-position: center 10px; + background-size: 100% auto; + background-repeat: no-repeat; + + content: ' '; + display: block; + position: absolute; + margin: auto; + width: 100%; + height: 100%; + opacity: 0.1; +} + +.container { + background-color: white; + border-radius: 4px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05); + display: flex; + flex-direction: column; + padding: var(--fds-spacing-10); + position: relative; + gap: var(--fds-spacing-10); + + margin: auto; + padding: var(--fds-spacing-12); + max-width: 1400px; + position: relative; +} + +.header { + font-family: var(--studio-font-family); + padding: var(--fds-spacing-6) 0 var(--fds-spacing-6) 0; +} + +.header h1 { + color: var(--primary-color-700); +} + +@media (min-width: 960px) { + .content { + flex-direction: row; + } + + .divider { + display: block; + } +} + +.block { + background-color: #f4f5f6; + border-radius: 4px; + display: flex; + gap: var(--fds-spacing-6); + padding: var(--fds-spacing-12); +} + +.iconContainer { + background-color: #022f51; + border-radius: 100%; + color: white; + display: flex; + align-items: center; + justify-content: center; + height: 60px; + width: 60px; +} + +.icon { + font-size: 2.5rem; +} + +.content { + flex: 1; +} + +.link { + margin-top: 20px; +} diff --git a/frontend/app-development/features/Contact.test.tsx b/frontend/app-development/features/Contact.test.tsx new file mode 100644 index 00000000000..af815b5baa2 --- /dev/null +++ b/frontend/app-development/features/Contact.test.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { screen } from '@testing-library/react'; +import { Contact } from './Contact'; +import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants'; +import { renderWithProviders } from '../test/testUtils'; + +// Test data +const org = 'org'; +const app = 'app'; +const title = 'test'; + +describe('Contact', () => { + it('renders component', async () => { + render(); + + expect(await screen.findByRole('heading', { name: title })).toBeInTheDocument(); + expect(screen.queryByRole('heading', { name: app })).not.toBeInTheDocument(); + }); +}); + +const render = () => { + return renderWithProviders(, { + startUrl: `${APP_DEVELOPMENT_BASENAME}/${org}/${app}`, + }); +}; diff --git a/frontend/app-development/features/Contact.tsx b/frontend/app-development/features/Contact.tsx new file mode 100644 index 00000000000..54412aa4f9a --- /dev/null +++ b/frontend/app-development/features/Contact.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import classes from './Contact.module.css'; +import { Heading, Paragraph } from '@digdir/design-system-react'; +import { Trans, useTranslation } from 'react-i18next'; +import { EnvelopeClosedIcon } from '@navikt/aksel-icons'; +import Slack from 'app-shared/icons/Slack.svg'; + +export const Contact = () => { + const { t } = useTranslation(); + + return ( +
+
+
+ {t('contact.heading')} +
+
+
+ +
+
+ + {t('contact.email.heading')} + + {t('contact.email.content')} + + + + + +
+
+
+
+ +
+
+ + {t('contact.slack.heading')} + + {t('contact.slack.content')} + +
    + {t('contact.slack.content_list', { returnObjects: true }).map((item) => ( +
  • {item}
    • + ))} +
+ + + + + + +
+
+
+
+ ); +}; diff --git a/frontend/app-development/router/routes.tsx b/frontend/app-development/router/routes.tsx index 4cabf7a3e4f..74a9707ed61 100644 --- a/frontend/app-development/router/routes.tsx +++ b/frontend/app-development/router/routes.tsx @@ -1,6 +1,7 @@ import { SubApp } from '../../packages/ux-editor/src/SubApp'; import { Administration } from '../features/administration/components/Administration'; import { LegacyAdministration } from '../features/administration/components/LegacyAdministration'; +import { Contact } from '../features/Contact'; import { TextEditor } from '../features/textEditor/TextEditor'; import DataModellingContainer from '../features/dataModelling/containers/DataModellingContainer'; import { DeployPage } from '../features/appPublish/pages/deployPage'; @@ -46,6 +47,13 @@ export const routerRoutes: RouterRoute[] = [ activeLeftMenuSelection: 'Om appen', subapp: shouldDisplayFeature('newAdministration') ? Administration : LegacyAdministration, }, + { + path: RoutePaths.Contact, + exact: true, + activeSubHeaderSelection: TopBarMenu.About, + activeLeftMenuSelection: 'Om appen', + subapp: Contact, + }, { path: RoutePaths.Datamodel, exact: true, diff --git a/frontend/dashboard/components/Resources/Resources.tsx b/frontend/dashboard/components/Resources/Resources.tsx index 1f77c882d81..98bb9abefc5 100644 --- a/frontend/dashboard/components/Resources/Resources.tsx +++ b/frontend/dashboard/components/Resources/Resources.tsx @@ -3,6 +3,7 @@ import { ResourceItem } from '../ResourceItem'; import { Divider, SimpleContainer } from 'app-shared/primitives'; import classes from './Resources.module.css'; import { useTranslation } from 'react-i18next'; +import Slack from 'app-shared/icons/Slack.svg'; interface Resource { label: string; description: string; @@ -67,49 +68,7 @@ const resources: Resource[] = [ label: 'dashboard.resource_slack_label', description: 'dashboard.resource_slack_description', url: 'https://altinn.slack.com', - icon: ( - - - - - - - - - - - - ), + icon: , }, { label: 'dashboard.resource_design_label', @@ -217,7 +176,7 @@ export function Resources() { return (

{t('dashboard.resources')}

- +
{resources.map((resource, index) => ( servicedesk@altinn.no", + "contact.heading": "Kontakt og hjelp", + "contact.slack.content": "Dersom du har sporsmål om hvordan du bygger en applikasjon, kan du snakke direkte med utviklingsteamet i Altinn Studio på Slack. De kan hjelpe deg med:", + "contact.slack.content_list": [ + "å bygge applikasjonene slik du onsker", + "svare på sporsmal og veilede", + "utvikle ny funksjonalitet det er behov for" + ], + "contact.slack.heading": "Skriv melding i vår Slack-kanal", + "contact.slack.link": "<0 href=\"https://altinn.slack.com\">altinn.slack.com", "dashboard.all_apps": "Alle applikasjoner", "dashboard.all_datamodels": "Alle datamodeller", "dashboard.app_already_exists": "En app med det navnet finnes allerede.", diff --git a/frontend/packages/shared/src/icons/Slack.svg b/frontend/packages/shared/src/icons/Slack.svg new file mode 100644 index 00000000000..6d92ff70022 --- /dev/null +++ b/frontend/packages/shared/src/icons/Slack.svg @@ -0,0 +1,26 @@ + + + + + + + + + + From f743345b3cac0c19b34319afb26aebb0e21485b7 Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Thu, 9 Nov 2023 12:47:24 +0100 Subject: [PATCH 05/29] Add breadcrumb & clean css --- .../features/Contact.module.css | 44 ++++--- frontend/app-development/features/Contact.tsx | 112 ++++++++++++------ frontend/language/src/nb.json | 1 + 3 files changed, 99 insertions(+), 58 deletions(-) diff --git a/frontend/app-development/features/Contact.module.css b/frontend/app-development/features/Contact.module.css index 3dadc5e89d0..e94d273a5b9 100644 --- a/frontend/app-development/features/Contact.module.css +++ b/frontend/app-development/features/Contact.module.css @@ -12,8 +12,8 @@ .pageContainer::before { background-image: url('/designer/img/Altinn-studio.svg'); - background-position: center 10px; - background-size: 100% auto; + background-position: left 0; + background-size: 768px auto; background-repeat: no-repeat; content: ' '; @@ -22,7 +22,6 @@ margin: auto; width: 100%; height: 100%; - opacity: 0.1; } .container { @@ -31,32 +30,39 @@ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; - padding: var(--fds-spacing-10); position: relative; - gap: var(--fds-spacing-10); - margin: auto; - padding: var(--fds-spacing-12); + margin: var(--fds-spacing-12) auto; max-width: 1400px; - position: relative; } -.header { +.breadcrumb { + display: flex; + align-items: center; + font-size: 1.2rem; + margin: var(--fds-spacing-6); + margin-bottom: unset; +} + +.content { + display: flex; + flex-direction: column; + gap: var(--fds-spacing-6); + margin: var(--fds-spacing-12); +} + +.heading { font-family: var(--studio-font-family); - padding: var(--fds-spacing-6) 0 var(--fds-spacing-6) 0; } -.header h1 { +.heading h1 { color: var(--primary-color-700); } -@media (min-width: 960px) { - .content { - flex-direction: row; - } - - .divider { - display: block; +@media (min-width: 768px) { + .pageContainer::before { + background-position: center 0; + background-size: 100% auto; } } @@ -83,7 +89,7 @@ font-size: 2.5rem; } -.content { +.textContainer { flex: 1; } diff --git a/frontend/app-development/features/Contact.tsx b/frontend/app-development/features/Contact.tsx index 54412aa4f9a..d975f7f854e 100644 --- a/frontend/app-development/features/Contact.tsx +++ b/frontend/app-development/features/Contact.tsx @@ -1,56 +1,90 @@ import React from 'react'; import classes from './Contact.module.css'; -import { Heading, Paragraph } from '@digdir/design-system-react'; +import { useAppConfigQuery } from 'app-development/hooks/queries'; +import { Heading, Link, Paragraph } from '@digdir/design-system-react'; +import { toast } from 'react-toastify'; import { Trans, useTranslation } from 'react-i18next'; -import { EnvelopeClosedIcon } from '@navikt/aksel-icons'; +import { EnvelopeClosedIcon, ChevronRightIcon } from '@navikt/aksel-icons'; import Slack from 'app-shared/icons/Slack.svg'; +import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; +import { AltinnSpinner } from 'app-shared/components'; +import { Center } from 'app-shared/components/Center'; +import { RoutePaths } from 'app-development/enums/RoutePaths'; export const Contact = () => { + const { org, app } = useStudioUrlParams(); + + const { + data: appConfigData, + isError: isAppConfigError, + isLoading: isLoadingAppConfig, + } = useAppConfigQuery(org, app, { hideDefaultError: true }); const { t } = useTranslation(); + if (isAppConfigError) { + toast.error(t('contact.fetch_app_error_message')); + } + + if (isLoadingAppConfig) { + return ( +
+ +
+ ); + } + + const appName = appConfigData?.serviceName || app; + return (
-
- {t('contact.heading')} +
+ {appName} + + {t('contact.heading')}
-
-
- -
-
- - {t('contact.email.heading')} - - {t('contact.email.content')} - - - - - +
+
+ {t('contact.heading')}
-
-
- diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 126cbc9b526..8f33c923020 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -134,6 +134,7 @@ "contact.email.content": "Du kan sende skriftlig henvendelse til Altinn servicedesk på e-post ved sporsmål om å opprette organisasjoner eller miljøer, ved tekniske problemer, om dokumentasjonen eller annet.", "contact.email.heading": "Send e-post", "contact.email.link": "<0 href=\"mailto:servicedesk@altinn.no\">servicedesk@altinn.no", + "contact.fetch_app_error_message": "Kunne ikke laste inn tittelen for denne appen. Prøv igjen senere.", "contact.heading": "Kontakt og hjelp", "contact.slack.content": "Dersom du har sporsmål om hvordan du bygger en applikasjon, kan du snakke direkte med utviklingsteamet i Altinn Studio på Slack. De kan hjelpe deg med:", "contact.slack.content_list": [ From e3fdb7df6b63eb37f389a7952533cb4a7aefb4cf Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Thu, 9 Nov 2023 15:37:34 +0100 Subject: [PATCH 06/29] Fix css on small screens --- .../features/Contact.module.css | 47 +++++++++++++------ frontend/app-development/features/Contact.tsx | 14 +++--- 2 files changed, 40 insertions(+), 21 deletions(-) diff --git a/frontend/app-development/features/Contact.module.css b/frontend/app-development/features/Contact.module.css index e94d273a5b9..3808ab17010 100644 --- a/frontend/app-development/features/Contact.module.css +++ b/frontend/app-development/features/Contact.module.css @@ -7,6 +7,7 @@ .pageContainer { background-color: #e6eff8; flex: 1; + font-family: var(--studio-font-family); position: relative; } @@ -32,15 +33,16 @@ flex-direction: column; position: relative; - margin: var(--fds-spacing-12) auto; - max-width: 1400px; + margin: var(--fds-spacing-10) auto; + max-width: 1230px; } .breadcrumb { display: flex; align-items: center; - font-size: 1.2rem; - margin: var(--fds-spacing-6); + font: var(--fds-typography-paragraph-large); + gap: var(--fds-spacing-2); + margin: var(--fds-spacing-8); margin-bottom: unset; } @@ -48,7 +50,7 @@ display: flex; flex-direction: column; gap: var(--fds-spacing-6); - margin: var(--fds-spacing-12); + margin: var(--fds-spacing-12) var(--fds-spacing-8); } .heading { @@ -59,19 +61,13 @@ color: var(--primary-color-700); } -@media (min-width: 768px) { - .pageContainer::before { - background-position: center 0; - background-size: 100% auto; - } -} - .block { background-color: #f4f5f6; border-radius: 4px; display: flex; gap: var(--fds-spacing-6); - padding: var(--fds-spacing-12); + padding: var(--fds-spacing-8); + max-width: 735px; } .iconContainer { @@ -93,6 +89,27 @@ flex: 1; } -.link { - margin-top: 20px; +.link a { + font-size: 1rem; +} + +@media (min-width: 768px) { + .pageContainer::before { + background-position: center 0; + background-size: 100% auto; + } + + .content { + margin: var(--fds-spacing-18); + } + + .block { + padding: var(--fds-spacing-12); + } +} + +@media (min-width: 960px) { + .block { + padding-right: var(--fds-spacing-22); + } } diff --git a/frontend/app-development/features/Contact.tsx b/frontend/app-development/features/Contact.tsx index d975f7f854e..74643778661 100644 --- a/frontend/app-development/features/Contact.tsx +++ b/frontend/app-development/features/Contact.tsx @@ -45,17 +45,19 @@ export const Contact = () => {
- {t('contact.heading')} + + {t('contact.heading')} +
- + {t('contact.email.heading')} - {t('contact.email.content')} + {t('contact.email.content')} @@ -68,11 +70,11 @@ export const Contact = () => {
- + {t('contact.slack.heading')} - {t('contact.slack.content')} - + {t('contact.slack.content')} +