Add github automation issue

ui/CHANGELOG.md

@@ -1,3 +1,7 @@
+### [6.4.0] - 2023-10-11
+
+-   Add github automation
+
 ### [6.3.0] - 2023-10-03
 
 -   Fix Test

ui/package.json

@@ -43,8 +43,10 @@
 		"jszip-utils": "^0.1.0",
 		"lucide-react": "^0.262.0",
 		"marked": "^7.0.1",
+		"papaparse": "^5.4.1",
 		"react": "^18.2.0",
 		"react-cookie-consent": "^8.0.1",
+		"react-csv": "^2.2.2",
 		"react-dom": "^18.2.0",
 		"react-error-boundary": "^4.0.10",
 		"react-ga4": "^2.1.0",
@@ -87,7 +89,9 @@
 		"@types/markdown-it": "^13.0.0",
 		"@types/marked": "^5.0.1",
 		"@types/node": "^20.4.4",
+		"@types/papaparse": "^5.3.9",
 		"@types/react": "^18.2.15",
+		"@types/react-csv": "^1.1.6",
 		"@types/react-dom": "^18.2.7",
 		"@types/react-syntax-highlighter": "^15.5.7",
 		"@types/webfontloader": "^1.6.35",

ui/src/data/featureData.ts

@@ -247,11 +247,11 @@ export const FEATURE_DATA: Feature[] = [
 		],
 	},
 	{
-		key: routesById.svgformatter.id,
-		name: routesById.svgformatter.title,
-		shortDescription: routesById.svgformatter.description,
+		key: routesById.svg.id,
+		name: routesById.svg.title,
+		shortDescription: routesById.svg.description,
 		fullDescription: "",
-		link: routesById.svgformatter.path,
+		link: routesById.svg.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 	{

ui/src/data/menuData.ts

@@ -81,9 +81,9 @@ export const MENU_ITEMS = [
 				show: true,
 			},
 			{
-				name: routesById.codeformatter.title,
-				url: routesById.codeformatter.path,
-				icon: "Code",
+				name: routesById.svg.title,
+				url: routesById.svg.path,
+				icon: "Command",
 				show: true,
 			},
 		],
@@ -168,12 +168,7 @@ export const MENU_ITEMS = [
 				icon: "PencilRuler",
 				show: true,
 			},
-			{
-				name: routesById.svgformatter.title,
-				url: routesById.svgformatter.path,
-				icon: "Command",
-				show: true,
-			},
+
 			{
 				name: routesById.sorting.title,
 				url: routesById.sorting.path,
@@ -186,6 +181,12 @@ export const MENU_ITEMS = [
 				icon: "Diff",
 				show: true,
 			},
+			{
+				name: routesById.codeformatter.title,
+				url: routesById.codeformatter.path,
+				icon: "Code",
+				show: true,
+			},
 		],
 	},
 	{
@@ -194,8 +195,8 @@ export const MENU_ITEMS = [
 		show: true,
 		children: [
 			{
-				name: routesById.creategithubissue.title,
-				url: routesById.creategithubissue.path,
+				name: routesById.githubissue.title,
+				url: routesById.githubissue.path,
 				icon: "Bug",
 				show: IN_DEVELOPMENT,
 			},

ui/src/data/routeData.tsx

@@ -42,14 +42,15 @@ type RouteId =
 	| "qrcode"
 	| "shadesandtints"
 	| "sorting"
-	| "svgformatter"
+	| "svg"
 	| "table"
 	| "tableofcontent"
 	| "terms"
 	| "texteditor"
 	| "tool"
 	| "tvseries"
 	| "uiux"
+	| "githubissue"
 	| "youtube";
 
 interface Route {
@@ -95,7 +96,7 @@ import {
 	QRcode,
 	ShadesAndTints,
 	Sorting,
-	SvgFormatter,
+	Svg,
 	TableGenerator,
 	TableOfContent,
 	Terms,
@@ -104,6 +105,7 @@ import {
 	TvSeries,
 	UiUx,
 	YouTube,
+	GithubIsuue,
 } from "pages/pages";
 
 export const routes: Route[] = [
@@ -143,11 +145,11 @@ export const routes: Route[] = [
 		component: BoxShadow,
 	},
 	{
-		id: "svgformatter",
-		path: "/tools/svg-formatter",
-		title: "SVG Formatter",
+		id: "svg",
+		path: "/converter/svg",
+		title: "SVG",
 		description: "Get your SVGs in shipshape.",
-		component: SvgFormatter,
+		component: Svg,
 	},
 	{
 		id: "base64",
@@ -172,7 +174,7 @@ export const routes: Route[] = [
 	},
 	{
 		id: "codeformatter",
-		path: "/converter/code-formatter",
+		path: "/tools/code-formatter",
 		title: "Code Formatter",
 		description:
 			"Embrace your inner Picasso of Programming. Who said formatting code can't be a masterpiece?",
@@ -372,11 +374,11 @@ export const routes: Route[] = [
 		component: Diffchecker,
 	},
 	{
-		id: "creategithubissue",
-		path: "/automation-scripts/create-github-issue",
+		id: "githubissue",
+		path: "/automation/github-issue",
 		title: "Create Github Issue",
 		description: "Create Github Issue",
-		component: PageNotFound,
+		component: GithubIsuue,
 	},
 	{
 		id: "/",

ui/src/pages/Automation/GithubIssue/components/CsvTable.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Table } from "antd";
+import { IssueType } from "pages/Automation/GithubIssue/types";
+
+interface CsvTableProps {
+	data: IssueType[];
+}
+
+type DataColumn = {
+	title: string;
+	dataIndex: string;
+	key: string;
+};
+
+const CsvTable: React.FC<CsvTableProps> = ({ data }) => {
+	const columns: DataColumn[] = [];
+
+	if (data.length > 0) {
+		const headers = Object.keys(data[0]);
+
+		headers.forEach((header) => {
+			columns.push({
+				title: header,
+				dataIndex: header,
+				key: header,
+			});
+		});
+	}
+
+	return (
+		<Table scroll={{ x: "400px" }} dataSource={data} columns={columns} />
+	);
+};
+
+export default CsvTable;

ui/src/pages/Automation/GithubIssue/index.tsx

@@ -0,0 +1,168 @@
+import { Alert, Button, Card, Form, Progress, Steps, Upload } from "antd";
+import { ResponsiveInputWithLabel } from "components/General/FormComponents";
+import InputGrid from "components/Layouts/InputGrid";
+import PageGrid from "components/Layouts/PageGrid";
+import React, { useState } from "react";
+import Papa from "papaparse";
+import CsvTable from "./components/CsvTable";
+import { CSVLink } from "react-csv";
+import { calculateSteps, createGitHubIssue } from "./utils/helper";
+import { steps } from "./utils/constants";
+import { IssueType, SavedIssueType } from "./types";
+
+const GithubIssue: React.FC = () => {
+	//? input state
+	const [owner, setOwner] = useState("");
+	const [repo, setRepo] = useState("");
+	const [token, setToken] = useState("");
+	const [fileData, setFileData] = useState<IssueType[]>([]);
+	const [isValidInput, setIsValidInput] = useState(false);
+
+	// ? output state
+	const [progress, setProgress] = useState(0);
+	const [isError, setIsError] = useState(false);
+	const [savedIssues, setSavedIssues] = useState<SavedIssueType[]>([]);
+
+	const handleUpload = (file: File) => {
+		Papa.parse<IssueType[]>(file, {
+			complete: (result) => {
+				const responseIssue = result.data;
+
+				// Convert keys to lowercase for each object in the array
+				const formatData = responseIssue.map((issue) => {
+					const formattedIssue: IssueType = {} as IssueType;
+					for (const key in issue) {
+						if (Object.prototype.hasOwnProperty.call(issue, key)) {
+							// ts-ignore
+							formattedIssue[key.toLowerCase()] = issue[key];
+						}
+					}
+					return formattedIssue;
+				});
+
+				const checkValidity = formatData.every((dt) => dt?.title);
+				setIsValidInput(checkValidity);
+				if (checkValidity) {
+					setFileData(formatData);
+				}
+			},
+			header: true,
+			skipEmptyLines: true,
+		});
+	};
+
+	const handleCreateGitHubIssue = () => {
+		createGitHubIssue(
+			owner,
+			repo,
+			token,
+			fileData,
+			setProgress,
+			setSavedIssues,
+			setIsError
+		);
+	};
+
+	const haveConfig = repo.length > 0 && token.length > 0 && owner.length > 0;
+	const haveFileData = fileData.length > 0;
+
+	return (
+		<PageGrid>
+			<Card>
+				<Steps
+					current={calculateSteps(
+						haveConfig,
+						haveFileData,
+						isValidInput
+					)}
+					items={steps}
+				/>
+				<br />
+				{!isValidInput && fileData.length > 0 && (
+					<>
+						<Alert
+							message="Csv file must contains a title"
+							type="error"
+							showIcon
+						/>
+						<br />
+					</>
+				)}
+				<Form layout="vertical">
+					<ResponsiveInputWithLabel
+						label="Github token"
+						placeholder="enter your github token"
+						value={token}
+						onChange={(e) => setToken(e.target.value)}
+						min={0}
+						type="text"
+					/>
+
+					<InputGrid>
+						<ResponsiveInputWithLabel
+							label="Owner"
+							placeholder="owner"
+							value={owner}
+							onChange={(e) => setOwner(e.target.value)}
+							min={0}
+							type="text"
+						/>
+
+						<ResponsiveInputWithLabel
+							label="Repositories"
+							placeholder="repository name"
+							value={repo}
+							onChange={(e) => setRepo(e.target.value)}
+							min={0}
+							type="text"
+						/>
+					</InputGrid>
+
+					<InputGrid>
+						<Form.Item>
+							<Upload beforeUpload={handleUpload}>
+								<Button disabled={!haveConfig}>
+									Upload csv
+								</Button>
+							</Upload>
+						</Form.Item>
+						<Button
+							disabled={fileData.length === 0 && !isValidInput}
+							block
+							onClick={handleCreateGitHubIssue}
+						>
+							Create {fileData?.length} issue
+						</Button>
+					</InputGrid>
+				</Form>
+
+				<CsvTable data={fileData} />
+			</Card>
+
+			<Card title="Saved Issue" style={{ height: "100%" }}>
+				{isError && (
+					<>
+						<Alert
+							message="something went wrong, please try again with your valid credentials"
+							type="error"
+							showIcon
+						/>
+						<br />
+					</>
+				)}
+
+				{progress > 0 && <Progress percent={progress} size="small" />}
+
+				<CsvTable data={savedIssues} />
+				<br />
+				<CSVLink data={savedIssues} filename={"csv_data.csv"}>
+					<Button disabled={savedIssues.length === 0}>
+						Download CSV
+					</Button>
+				</CSVLink>
+			</Card>
+		</PageGrid>
+	);
+};
+
+export default GithubIssue;