Starting examples for QueueRow, QueueRows.

.run/Consumer.run.xml

@@ -1,7 +1,7 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="Consumer" type="GoApplicationRunConfiguration" factoryName="Go Application">
     <module name="sqs_demo" />
-    <working_directory value="$PROJECT_DIR$" />
+    <working_directory value="$PROJECT_DIR$/back" />
     <parameters value="-profile=sqs-tutorial -url=https://sqs.eu-west-3.amazonaws.com" />
     <kind value="PACKAGE" />
     <package value="code.osinet.fr/fgm/sqs_demo/back/cmd/consumer/" />

.run/Producer.run.xml

@@ -1,7 +1,7 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="Producer" type="GoApplicationRunConfiguration" factoryName="Go Application">
     <module name="sqs_demo" />
-    <working_directory value="$PROJECT_DIR$" />
+    <working_directory value="$PROJECT_DIR$/back" />
     <parameters value="-profile=sqs-tutorial" />
     <kind value="PACKAGE" />
     <package value="code.osinet.fr/fgm/sqs_demo/back/cmd/producer/" />

front/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

front/package.json

@@ -61,12 +61,9 @@
     "eject": "react-scripts eject",
     "start": "react-scripts start",
     "test": "react-scripts test",
-
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
-    "//": "New scripts to run and build Storybook with Tailwind",
     "storybook": "concurrently \"yarn:watch:*\"",
     "build-storybook": "concurrently \"yarn:build:*\"",
+    "//": "New scripts to run and build Storybook with Tailwind",
     "build:css": "npx tailwindcss -i ./src/tailwind.css -o ./public/tailwind.css",
     "build:storybook": "npx start-storybook build",
     "watch:css": "npx tailwindcss -i ./src/tailwind.css -o ./public/tailwind.css --watch",

front/public/tailwind.css

@@ -563,6 +563,10 @@ video {
   display: inline-block;
 }
 
+.table {
+  display: table;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -648,7 +652,8 @@ video {
 }
 
 .underline {
-  text-decoration-line: underline;
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
 }
 
 @media (prefers-color-scheme: dark) {

front/src/stories/QueueRow.jsx

@@ -0,0 +1,35 @@
+// ./src/stories/QueueRow.js
+
+import React from 'react';
+
+/**
+ * A queue as described in a list.
+ */
+const QueueRow = ({arn = undefined, itemCount = undefined, qName = undefined, url = undefined, ...props}) => {
+    if (arn === undefined || arn == null) {
+        arn = '';
+    }
+    if (qName === undefined || qName === null) {
+        qName = '';
+    }
+    if (url !== undefined && url != null && url !== '') {
+        qName = <a href={url}>{qName}</a>;
+    }
+    if (itemCount === undefined || itemCount === null || itemCount === '') {
+        itemCount = '-';
+    }
+    console.table([{arn, itemCount, qName, url}]);
+
+    return (
+        <div>
+            <span className="border-2 px-4" style={{textDecoration: "underline"}}>{qName}</span>
+            <span className="border-2 px-4">{arn}</span>
+            <span className="border-2 px-4" style={{textAlign: "right"}}>{itemCount}</span>
+            <React.StrictMode />
+        </div>
+    );
+};
+
+export {
+    QueueRow,
+}

front/src/stories/QueueRow.stories.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import {QueueRow} from './QueueRow';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Example/QueueRow',
+    component: QueueRow,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <QueueRow {...args} />;
+
+export const Empty = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Empty.args = {
+    arn: '',
+    itemCount: '',
+    qName: '',
+    url: '',
+};
+
+export const UnqueriedNoURL = Template.bind({});
+UnqueriedNoURL.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: '',
+    qName: 'main-queue',
+    url: '',
+};
+
+
+export const Unqueried = Template.bind({});
+Unqueried.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: '',
+    qName: 'main-queue',
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};
+
+export const Queried = Template.bind({});
+Queried.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: 25,
+    qName: 'main-queue',
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};

front/src/stories/QueueRows.jsx

@@ -0,0 +1,23 @@
+// ./src/stories/QueueRow.js
+
+import React from 'react';
+import {QueueRow} from "./QueueRow";
+
+const QueueRows = ({rows = []}) => {
+    return (
+        <div>
+            {rows.map((row, index) => {
+                return <QueueRow key={index}
+                                 arn={row.props.arn}
+                                 itemCount={row.props.itemCount}
+                                 qName={row.props.qName}
+                                 url={row.props.url}/>
+            })}
+            <React.StrictMode/>
+        </div>
+    );
+}
+
+export {
+    QueueRows,
+}

front/src/stories/QueueRows.stories.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {QueueRow} from './QueueRow';
+import {QueueRows} from "./QueueRows";
+import {Empty, Queried, Unqueried, UnqueriedNoURL} from './QueueRow.stories';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Example/QueueRows',
+    component: QueueRows,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <QueueRows {...args} />;
+
+var allRows = {
+    Empty,
+    Unqueried,
+    UnqueriedNoURL,
+    Queried,
+};
+
+var rows = Object.keys(allRows).map((rowKey, index) => {
+    const rowArgs = allRows[rowKey].args
+    return <QueueRow key={index} arn={rowArgs.arn} itemCount={rowArgs.itemCount} qName={rowArgs.qName}
+                     url={rowArgs.url}>{index}</QueueRow>
+});
+
+export const AllRowsKinds = Template.bind({});
+AllRowsKinds.args = {rows};