doing some css on pipelinesetup

web-app/.eslintrc

@@ -2,6 +2,7 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "plugins": [
+    "only-warn",
     "@typescript-eslint"
   ],
   "extends": [

web-app/package-lock.json

@@ -35,6 +35,7 @@
 				"@typescript-eslint/eslint-plugin": "^5.12.1",
 				"@typescript-eslint/parser": "^5.12.1",
 				"eslint": "^8.9.0",
+				"eslint-plugin-only-warn": "^1.0.3",
 				"ts-loader": "^9.2.6"
 			}
 		},
@@ -7842,6 +7843,15 @@
 				"eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
 			}
 		},
+		"node_modules/eslint-plugin-only-warn": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-only-warn/-/eslint-plugin-only-warn-1.0.3.tgz",
+			"integrity": "sha512-XQOX/TfLoLw6h8ky51d29uUjXRTQHqBGXPylDEmy5fe/w7LIOnp8MA24b1OSMEn9BQoKow1q3g1kLe5/9uBTvw==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/eslint-plugin-react": {
 			"version": "7.28.0",
 			"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz",
@@ -22946,6 +22956,12 @@
 				"minimatch": "^3.0.4"
 			}
 		},
+		"eslint-plugin-only-warn": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-only-warn/-/eslint-plugin-only-warn-1.0.3.tgz",
+			"integrity": "sha512-XQOX/TfLoLw6h8ky51d29uUjXRTQHqBGXPylDEmy5fe/w7LIOnp8MA24b1OSMEn9BQoKow1q3g1kLe5/9uBTvw==",
+			"dev": true
+		},
 		"eslint-plugin-react": {
 			"version": "7.28.0",
 			"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz",

web-app/package.json

@@ -56,6 +56,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.12.1",
 		"@typescript-eslint/parser": "^5.12.1",
 		"eslint": "^8.9.0",
+		"eslint-plugin-only-warn": "^1.0.3",
 		"ts-loader": "^9.2.6"
 	}
 }

web-app/src/App.tsx

@@ -1,21 +1,20 @@
 import type { PipelineBoxProps } from "./components/Pipelines/PipelineBox";
 import { GenericButtonProps } from "./components/GenericButton";
 import { Typography, Box, Button } from "@mui/material";
-import type { ServiceProps } from "./components/types";
+import type { ImageProps } from "./components/types";
 import "./App.css";
 
-import { PipelineTriggersProps } from "./pages/PipelineSetup";
 
 import { useNavigate } from "react-router-dom";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import * as React from "react";
 
 export default function App() {
-	let svc: ServiceProps = {
+	let svc: ImageProps = {
 		altText: "youTube",
 		imageSrc: "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
 	};
-	let svc2: ServiceProps = {
+	let svc2: ImageProps = {
 		altText: "Spotify",
 		imageSrc: "https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg",
 	};

web-app/src/components/GenericButton.tsx

@@ -1,11 +1,11 @@
 import { Box, CardContent, Typography, CardMedia, IconButton } from "@mui/material";
 import Card from "@mui/material/Card";
-import type { ServiceProps } from "./types";
+import type { ImageProps } from "./types";
 
 interface GenericButtonProps {
 	title: string;
 
-	service: ServiceProps;
+	service: ImageProps;
 
 	trailingIcon: JSX.Element;
 }

web-app/src/components/Pipelines/PipelineBox.tsx

@@ -10,15 +10,15 @@ import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 import "./PipelineBox.css";
 import { borderRadius } from "@mui/system";
-import type { ServiceProps } from "./../types";
+import type { ImageProps } from "./../types";
 
 interface PipelineBoxProps {
 	// title of the pipeline box
 	title: string;
 	// utc in seconds or anything useful to display
 	statusText: string;
-	service1: ServiceProps;
-	service2: ServiceProps;
+	service1: ImageProps;
+	service2: ImageProps;
 	onClickCallback?: React.MouseEventHandler<HTMLButtonElement>;
 }
 

web-app/src/components/types.tsx

@@ -1,8 +1,8 @@
-interface ServiceProps {
+interface ImageProps {
 	// the image src preferable to use svg files
 	imageSrc: string;
 	// the alt text (screen readers, etc)
 	altText: string;
 }
 
-export type { ServiceProps };
+export type { ImageProps };

web-app/src/pages/HomePage.tsx

@@ -2,7 +2,7 @@ import PipelineBoxesLayout from "../components/Pipelines/PipelineBoxesLayout";
 import type { PipelineBoxProps } from "../components/Pipelines/PipelineBox";
 import PipelineModal from "../components/Pipelines/PipelineModal";
 import { GenericButtonProps } from "../components/GenericButton";
-import type { ServiceProps } from "../components/types";
+import type { ImageProps } from "../components/types";
 import PipelineEditPage from "./PipelineEditPage";
 import Box from "@mui/material/Box";
 import Fab from "@mui/material/Fab";
@@ -12,8 +12,10 @@ import { makeStyles } from "@material-ui/core/styles";
 import { MoreVert } from "@mui/icons-material";
 import { useState } from "react";
 import { PipelineEditPageProps } from "./PipelineEditPage";
-import PipelineSetupModal, { PipelineTriggersProps } from "./PipelineSetup";
+import PipelineSetupModal from "./PipelineSetup";
 import PipelineNameSetup from "../components/Pipelines/PipelineNameSetup";
+import ServiceSetupModal from "./ServiceSetup";
+import { AppServices } from "../utils/globals";
 
 const useStyles = makeStyles((theme) => ({
 	divHomePage: {
@@ -46,11 +48,11 @@ export default function HomePage() {
 		],
 	} as PipelineEditPageProps);
 
-	const svc: ServiceProps = {
+	const svc: ImageProps = {
 		altText: "youTube",
 		imageSrc: "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
 	};
-	const svc2: ServiceProps = {
+	const svc2: ImageProps = {
 		altText: "Spotify",
 		imageSrc: "https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg",
 	};
@@ -159,27 +161,18 @@ export default function HomePage() {
 		},
 	];
 
-	const triggersAvailable: Array<PipelineTriggersProps> = [
-		{
-			name: "Test",
-			triggers: new Array<string>("Lorem Ipsum", "Lorem Ipsum 2"),
-		},
-		{
-			name: "Test 2",
-			triggers: new Array<string>("Lorem Ipsum", "Lorem Ipsum 2"),
-		},
-		{
-			name: "Test 3",
-			triggers: new Array<string>("Lorem Ipsum", "Lorem Ipsum 2"),
-		},
-	];
-
 	return (
 		<div className={classes.divHomePage}>
 			<PipelineBoxesLayout data={data} />
 			<PipelineModal isOpen={isModalOpen} handleClose={() => setIsModalOpen(false)}>
 				<PipelineEditPage {...modalData} />
 			</PipelineModal>
+			<PipelineModal isOpen={true} handleClose={() => {}} >
+				<PipelineSetupModal name="oui oui" services={AppServices} elements={ {"youtube": actions} } />
+			</PipelineModal>
+			<PipelineModal isOpen={false} handleClose={() => {}} >
+				<ServiceSetupModal />
+			</PipelineModal>
 
 			<Box
 				sx={{

web-app/src/pages/PipelineSetup.tsx

@@ -1,5 +1,6 @@
-import { Google, GitHub, MusicNote, Twitter, YouTube } from "@mui/icons-material";
 
+import { Google, GitHub, MusicNote, Twitter, YouTube } from "@mui/icons-material";
+import { InputLabel, FormHelperText, Avatar, ListItemAvatar } from "@mui/material"
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Typography from "@mui/material/Typography";
@@ -7,104 +8,70 @@ import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
-
-interface PipelineTriggersProps {
-	name: string;
-	triggers: Array<string>;
-}
+import { AppServiceType } from "../utils/globals";
+import GenericButton, { GenericButtonProps } from "./../components/GenericButton";
 
 interface PipelineSetupPageProps {
-	actionName: string;
-	data: Array<PipelineTriggersProps>;
+	name: string;
+	services: Array<AppServiceType>,
+	elements: {[key: string]: Array<GenericButtonProps> };
 }
 
-export type { PipelineSetupPageProps, PipelineTriggersProps };
+export type { PipelineSetupPageProps };
 
-export default function PipelineSetupModal({ actionName, data }: PipelineSetupPageProps) {
-	const servicesItems = [
-		{
-			name: "Twitter",
-			key: "twitter",
-			icon: <Twitter />,
-		},
-		{
-			name: "GitHub",
-			key: "github",
-			icon: <GitHub />,
-		},
-		{
-			name: "Google",
-			key: "google",
-			icon: <Google />,
-		},
-		{
-			name: "YouTube",
-			key: "youtube",
-			icon: <YouTube />,
-		},
-		{
-			name: "Spotify",
-			key: "spotify",
-			icon: <MusicNote />,
-		},
-	];
+export default function PipelineSetupModal({ name, services, elements }: PipelineSetupPageProps) {
 
 	//TODO On line 63, need to change number 11 to number of available actions
 	return (
 		<div>
 			<Box
 				sx={{
+					width: "100%",
 					display: "flex",
 					flexDirection: "row",
 					alignItems: "center",
-					justifyContent: "space-between",
-					marginBottom: "100px",
 				}}>
-				<Typography variant="h2" noWrap align="left">
-					Setup Action: {actionName}
+				<Typography variant="h4" noWrap align="left">
+					Setup Action: {name}
 				</Typography>
+				
 			</Box>
-			<Box
-				sx={{
-					display: "flex",
-					flexDirection: "row",
-					alignItems: "right",
-					justifyContent: "flex-end",
-				}}>
-				<Typography variant="h3" noWrap align="right" sx={{ mr: 4 }}>
-					11 available actions for
-				</Typography>
-				<Select autoWidth variant="standard" defaultValue={"twitter"}>
-					{servicesItems.map((item, index) => (
-						<MenuItem value={item.key}>
-							<img
-								loading="lazy"
-								width="20"
-								src={`https://flagcdn.com/w20/ad.png`}
-								srcSet={`https://flagcdn.com/w40/ad.png 2x`}
-								alt={`Flag of Andorra`}
-							/>
-							<ListItemIcon>{item.icon}</ListItemIcon>
-							<ListItemText primary={item.name} />
+			<Box sx={{ float:"right" }} >
+				<InputLabel id="pipeline-setup-select-label">Service</InputLabel>
+				<Select
+					labelId="pipeline-setup-select-label"
+					defaultValue={"youtube"}
+					label="Services" >
+					{services.map((item) => (
+						<MenuItem value={item.uid}>
+							<Box sx={{ display:"flex", alignItems:"center", justifyContent:"space-between" }}>
+								<img
+									loading="lazy"
+									width="20"
+									src={item.logo.imageSrc}
+									alt={item.logo.altText}
+								/>
+								{item.label}
+							</Box>
 						</MenuItem>
 					))}
 				</Select>
+				<FormHelperText>11 actions disponibles</FormHelperText>
 			</Box>
-			<Grid container direction="row" justifyContent="space-around" rowSpacing={4} alignItems="flex-start">
-				{data.map((el, index) => (
-					<Grid item sm={10} md={10} lg={5} xl={4} key={0}>
-						<Box alignItems="center" justifyContent="center">
-							<Select autoWidth defaultValue={0}>
-								{" "}
-								{el.triggers.map((elem, index) => (
-									<MenuItem value={index}>
-										<ListItemText primary={elem} />
-									</MenuItem>
-								))}
-							</Select>
-						</Box>
-					</Grid>
-				))}
+			
+			<Grid container direction="row" justifyContent="space-around"  alignItems="flex-start">
+				{ Object.entries(elements).map((el) => {
+
+					if (el[0] !== "youtube")
+						return null;
+					return (
+						<Grid item key={0}>
+							<GenericButton {...el[1][0]} />
+						</Grid>
+						)
+					}
+					)
+				}
 			</Grid>
 		</div>
 	);

web-app/src/pages/ServiceSetup.tsx

@@ -2,38 +2,12 @@ import Typography from "@mui/material/Typography";
 import { Login, Logout } from "@mui/icons-material";
 import Box from "@mui/material/Box";
 
-import GenericButton from "../GenericButton";
-import { ServiceProps } from "../types";
+import GenericButton from "../components/GenericButton";
+import { ImageProps } from "../components/types";
 import { Grid } from "@mui/material";
+import { AppServices } from "../utils/globals";
 
 export default function ServiceSetupModal() {
-	const services: Array<ServiceProps> = [
-		{
-			imageSrc: "https://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg",
-			altText: "Twitter",
-		},
-		{
-			imageSrc: "https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg",
-			altText: "Spotify",
-		},
-		{
-			imageSrc: "https://upload.wikimedia.org/wikipedia/commons/d/d7/GitHub_font_awesome.svg",
-			altText: "GitHub",
-		},
-		{
-			imageSrc: "https://cdn.worldvectorlogo.com/logos/discord.svg",
-			altText: "Discord",
-		},
-		{
-			imageSrc: "https://upload.wikimedia.org/wikipedia/commons/3/39/Google_Mail.svg",
-			altText: "Gmail",
-		},
-		{
-			imageSrc: "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
-			altText: "YouTube",
-		},
-	];
-
 	return (
 		<div>
 			<Box
@@ -61,9 +35,9 @@ export default function ServiceSetupModal() {
 								justifyContent: "space-between",
 								marginRight: "10px",
 							}}>
-							{services.map((elem, index) => (
+							{AppServices.map((elem, index) => (
 								<Grid item mb={4} key={index}>
-									<GenericButton service={elem} title={elem.altText} trailingIcon={<Login />} />
+									<GenericButton service={elem.logo} title={elem.label} trailingIcon={<Login />} />
 								</Grid>
 							))}
 						</Box>
@@ -82,11 +56,11 @@ export default function ServiceSetupModal() {
 									justifyContent: "space-between",
 									marginRight: "10px",
 								}}>
-								{services.map((elem, index) => (
-									<Grid item mb={4} key={index}>
-										<GenericButton service={elem} title={elem.altText} trailingIcon={<Logout />} />
-									</Grid>
-								))}
+								{AppServices.map((elem, index) => (
+								<Grid item mb={4} key={index}>
+									<GenericButton service={elem.logo} title={elem.label} trailingIcon={<Logout />} />
+								</Grid>
+							))}
 							</Box>
 						</Grid>
 					</Grid>

web-app/src/utils/globals.tsx

@@ -1 +1,58 @@
-import { ServiceProps } from "../components/types";
+import { ImageProps } from "../components/types";
+
+export interface AppServiceType {
+    label: string,
+    uid: string,
+    logo: ImageProps
+}
+
+export const AppServices:Array<AppServiceType> = [
+    {
+        label:"YouTube",
+        uid: "youtube",
+        logo: {
+            imageSrc: "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
+            altText: "YouTube logo"
+        }
+    },
+    {
+        label:"Spotify",
+        uid: "spotify",
+        logo: {
+            imageSrc: "https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg",
+            altText: "Spotify logo"
+        }
+    },
+    {
+        label:"GitHub",
+        uid: "github",
+        logo: {
+            imageSrc: "https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg",
+            altText: "GitHub logo"
+        }
+    },
+    {
+        label:"Twitter",
+        uid: "twitter",
+        logo: {
+            imageSrc: "https://upload.wikimedia.org/wikipedia/sco/9/9f/Twitter_bird_logo_2012.svg",
+            altText: "Twitter logo"
+        }
+    },
+    {
+        label:"Discord",
+        uid: "discord",
+        logo: {
+            imageSrc: "https://upload.wikimedia.org/wikipedia/fr/4/4f/Discord_Logo_sans_texte.svg",
+            altText: "Discord logo"
+        }
+    },
+    {
+        label:"GMail",
+        uid: "gmail",
+        logo: {
+            imageSrc: "https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg",
+            altText: "GMail logo"
+        }
+    }
+]