192 Implement Publishing Intro Page

This PR implements the Publishing journey start page. It relocates the upload page to form part of this user journey. Additionally changes were made to move the 'Beta banner' to the top partial.
Marvell-Consulting · May 17, 2024 · aca7ceb · aca7ceb
1 parent 87ab840
commit aca7ceb
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 69 deletions.
diff --git a/src/app.ts b/src/app.ts
@@ -63,16 +63,20 @@ app.get('/:lang/', (req: Request, res: Response) => {
     res.render('index');
 });
 
-app.get('/:lang/upload', (req: Request, res: Response) => {
-    res.render('upload');
+app.get('/:lang/publish', (req: Request, res: Response) => {
+    res.render('publish/start');
 });
 
-app.post('/:lang/upload', upload.single('csv'), async (req: Request, res: Response) => {
+app.get('/:lang/publish/upload', (req: Request, res: Response) => {
+    res.render('publish/upload');
+});
+
+app.post('/:lang/publish/upload', upload.single('csv'), async (req: Request, res: Response) => {
     const lang = req.params.lang;
     logger.debug(`Filename is ${req.body?.filename}`);
     if (!req.file) {
         res.status(400);
-        res.render('upload', {
+        res.render('publish/upload', {
             success: false,
             headers: undefined,
             data: undefined,
@@ -87,7 +91,7 @@ app.post('/:lang/upload', upload.single('csv'), async (req: Request, res: Respon
     }
     if (!req.body?.filename) {
         res.status(400);
-        res.render('upload', {
+        res.render('publish/upload', {
             success: false,
             headers: undefined,
             data: undefined,
@@ -102,7 +106,7 @@ app.post('/:lang/upload', upload.single('csv'), async (req: Request, res: Respon
     }
     if (!req.body?.description) {
         res.status(400);
-        res.render('upload', {
+        res.render('publish/upload', {
             success: false,
             headers: undefined,
             data: undefined,
@@ -125,7 +129,7 @@ app.post('/:lang/upload', upload.single('csv'), async (req: Request, res: Respon
         res.redirect(`/${req.i18n.language}/data/?file=${processedCSV.datafile_id}`);
     } else {
         res.status(400);
-        res.render('upload', processedCSV);
+        res.render('publish/upload', processedCSV);
     }
 });
 

diff --git a/src/resources/locales/en-GB.json b/src/resources/locales/en-GB.json
@@ -2,6 +2,7 @@
     "greeting": "Hello",
     "beta": "Beta",
     "menu": "Menu",
+    "publish-dataset": "Publish a Dataset",
     "upload-csv": "Upload CSV",
     "list-data-files": "List Data Files",
     "feedback": "This is a new service – your feedback will help us to improve it.",
@@ -11,6 +12,11 @@
     "app-running": "App is running",
     "health-notes": "Expand endpoint to check for database connection and other services.",
     "datalake-error": "Unable to connect to get Datalake",
+    "buttons": {
+        "continue": "Continue",
+        "back": "Back",
+        "cancel": "Cancel"
+    },
     "pagination": {
         "previous": "Previous",
         "next": "Next",
@@ -21,6 +27,15 @@
         "welcome": "We're going to use the GovUK Design system until we're able to get hold of the Welsh Government GEL",
         "apitext": "You can find our api at "
     },
+    "publish": {
+        "start": {
+            "title": "Create a new dataset",
+            "p1": "To create a new dataset, you'll need:",
+            "data-table": "a data table containing data and references to all relevant dimensions",
+            "lookup-table": "lookup tables for all relevant dimensions - using either common tables within this service or uploading them yourself",
+            "metadata": "details about the dataset including description, quality and how the data was collected"
+        }
+    },
     "upload": {
         "title": "Upload a CSV file",
         "description": "Upload a CSV file to the data lake",
@@ -64,6 +79,10 @@
         "healthcheck": "healthcheck",
         "upload": "upload",
         "list": "list",
-        "data": "data"
+        "data": "data",
+        "publish": {
+            "start": "publish",
+            "upload": "upload"
+        }
     }
 }
diff --git a/src/views/data.ejs b/src/views/data.ejs
@@ -1,16 +1,6 @@
 <%- include("partials/top"); %>
 
     <div class="govuk-width-container app-width-container">
-        <div class="govuk-phase-banner">
-            <p class="govuk-phase-banner__content">
-                <strong class="govuk-tag govuk-phase-banner__content__tag">
-                    <%= t('beta') %>
-                </strong>
-                <span class="govuk-phase-banner__text">
-                    <%= t('feedback') %>
-                </span>
-            </p>
-        </div>
         <!-- <a href="#" class="govuk-back-link">Back</a> -->
         <main class="govuk-main-wrapper" id="main-content" role="main">
             <h1 class="govuk-heading-xl"><%- t('display.title') %> <%= locals.datafile_name || `<${t('errors.name_missing')}>` %></h1>

diff --git a/src/views/index.ejs b/src/views/index.ejs
@@ -1,24 +1,14 @@
 <%- include("partials/top"); %>
 
-    <div class="govuk-width-container app-width-container">
-        <div class="govuk-phase-banner">
-            <p class="govuk-phase-banner__content">
-                <strong class="govuk-tag govuk-phase-banner__content__tag">
-                    <%= t('beta') %>
-                </strong>
-                <span class="govuk-phase-banner__text">
-                    <%= t('feedback') %>
-                </span>
-            </p>
-        </div>
-        <!-- <a href="#" class="govuk-back-link">Back</a> -->
-        <main class="govuk-main-wrapper" id="main-content" role="main">
-            <h1 class="govuk-heading-xl"><%= t('homepage.title') %></h1>
+<div class="govuk-width-container app-width-container">
+    <!-- <a href="#" class="govuk-back-link">Back</a> -->
+    <main class="govuk-main-wrapper" id="main-content" role="main">
+        <h1 class="govuk-heading-xl"><%= t('homepage.title') %></h1>
+
+        <p class="govuk-body"><%= t('homepage.welcome') %></p>
 
-            <p class="govuk-body"><%= t('homepage.welcome') %></p>
-
-            <p class="govuk-body"><%= t('homepage.apitext') %> <a href="/api"><code>/api</code></a></p>
-        </main>
-    </div>
-
+        <p class="govuk-body"><%= t('homepage.apitext') %> <a href="/api"><code>/api</code></a></p>
+    </main>
+</div>
+
 <%- include("partials/bottom"); %>
diff --git a/src/views/list.ejs b/src/views/list.ejs
@@ -1,16 +1,6 @@
 <%- include("partials/top"); %>
 
     <div class="govuk-width-container app-width-container">
-        <div class="govuk-phase-banner">
-            <p class="govuk-phase-banner__content">
-                <strong class="govuk-tag govuk-phase-banner__content__tag">
-                    <%= t('beta') %>
-                </strong>
-                <span class="govuk-phase-banner__text">
-                    <%= t('feedback') %>
-                </span>
-            </p>
-        </div>
         <!-- <a href="#" class="govuk-back-link">Back</a> -->
         <main class="govuk-main-wrapper" id="main-content" role="main">
             <h1 class="govuk-heading-xl"><%= t('list.title') %></h1>

diff --git a/src/views/partials/top.ejs b/src/views/partials/top.ejs
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>StatsWales <%= t('alpha') %></title>
+    <title>StatsWales <%= t('beta') %></title>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <meta name="theme-color" content="blue">
     <link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
@@ -62,8 +62,8 @@
                     </button>
                     <ul id="navigation" class="govuk-header__navigation-list">
                         <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
-                            <a class="govuk-header__link" href="/<%= i18n.language %>/upload/">
-                                <%= t('upload-csv') %>
+                            <a class="govuk-header__link" href="/<%= i18n.language %>/publish/">
+                                <%= t('publish-dataset') %>
                             </a>
                         </li>
                         <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
@@ -92,4 +92,17 @@
                 </nav>
             </div>
         </div>
-    </header>
+    </header>
+
+    <div class="govuk-width-container app-width-container">
+        <div class="govuk-phase-banner">
+            <p class="govuk-phase-banner__content">
+                <strong class="govuk-tag govuk-phase-banner__content__tag">
+                    <%= t('beta') %>
+                </strong>
+                <span class="govuk-phase-banner__text">
+                    <%= t('feedback') %>
+                </span>
+            </p>
+        </div>
+    </div>
diff --git a/src/views/publish/start.ejs b/src/views/publish/start.ejs
@@ -0,0 +1,20 @@
+<%- include("../partials/top"); %>
+
+<div class="govuk-width-container app-width-container">
+	<!-- <a href="#" class="govuk-back-link">Back</a> -->
+	<main class="govuk-main-wrapper" id="main-content" role="main">
+		<h1 class="govuk-heading-xl"><%= t('publish.start.title') %></h1>
+		<p class="govuk-body"><%= t('publish.start.p1') %></p>
+		<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
+			<li><%= t('publish.start.data-table') %></li>
+			<li><%= t('publish.start.lookup-table') %></li>
+			<li><%= t('publish.start.metadata') %></li>
+		</ul>
+		<div class="govuk-button-group">
+			<a href="/<%= i18n.language %>/<%= t('routes.publish.start') %>/<%= t('routes.publish.upload') %>/" class="govuk-button"><%= t('buttons.continue') %></a>
+			<a href="/<%= i18n.language %>/" class="govuk-link"><%= t('buttons.cancel') %></a>
+		</div>
+	</main>
+</div>
+
+<%- include("../partials/bottom"); %>
diff --git a/src/views/upload.ejs → src/views/publish/upload.ejs b/src/views/upload.ejs → src/views/publish/upload.ejs
@@ -1,16 +1,6 @@
-<%- include("partials/top"); %>
-    <div class="govuk-width-container app-width-container">
-        <div class="govuk-phase-banner">
-            <p class="govuk-phase-banner__content">
-                <strong class="govuk-tag govuk-phase-banner__content__tag">
-                    <%= t('beta') %>
-                </strong>
-                <span class="govuk-phase-banner__text">
-                    <%= t('feedback') %>
-                </span>
-            </p>
-        </div>
+<%- include("../partials/top"); %>
 
+    <div class="govuk-width-container app-width-container">
         <!-- <a href="#" class="govuk-back-link">Back</a> -->
         <main class="govuk-main-wrapper" id="main-content" role="main">
             <h1 class="govuk-heading-xl"><%= t('upload.title') %></h1>
@@ -79,4 +69,5 @@
             </form>
         </main>
     </div>
-<%- include("partials/bottom"); %>
+    
+<%- include("../partials/bottom"); %>
diff --git a/test/app.test.ts b/test/app.test.ts
@@ -78,8 +78,14 @@ describe('Test app.ts', () => {
         expect(res.text).toContain('Croeso i Alffa StatsCymru');
     });
 
-    test('Upload page returns OK', async () => {
-        const res = await request(app).get('/en-GB/upload');
+    test('Publish start page returns OK', async () => {
+        const res = await request(app).get('/en-GB/publish');
+        expect(res.status).toBe(200);
+        expect(res.text).toContain('Create a new dataset');
+    });
+
+    test('Publish upload page returns OK', async () => {
+        const res = await request(app).get('/en-GB/publish/upload');
         expect(res.status).toBe(200);
         expect(res.text).toContain('Upload a CSV');
     });
@@ -88,7 +94,7 @@ describe('Test app.ts', () => {
         const csvfile = path.resolve(__dirname, `./test-data-1.csv`);
 
         const res = await request(app)
-            .post('/en-GB/upload')
+            .post('/en-GB/publish/upload')
             .attach('csv', csvfile)
             .field('filename', 'test-data-3.csv')
             .field('description', 'Test Data File 3');
@@ -97,7 +103,7 @@ describe('Test app.ts', () => {
     });
 
     test('Upload returns 400 and an error if no file attached', async () => {
-        const res = await request(app).post('/en-GB/upload');
+        const res = await request(app).post('/en-GB/publish/upload');
         expect(res.status).toBe(400);
         expect(res.text).toContain('No CSV data available');
     });