Merge pull request #14 from syngenta/Feature-GitHub_Integration

Released v0.2.0

Author: durgeshm01722

.gitignore

@@ -21,4 +21,6 @@ package-lock.json
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
+
+.env

README.md

@@ -3,7 +3,15 @@
 <img src="./images/logo.png" height="300" width="300"></img>
 
 [![Deploy app to GitHub Pages](https://github.com/syngenta/circleci-config-visualizer/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/syngenta/circleci-config-visualizer/actions/workflows/deploy.yml)
-[![Stars](https://custom-icon-badges.herokuapp.com/github/stars/syngenta/circleci-config-visualizer?logo=star&style=social&logoColor=black)](https://custom-icon-badges.herokuapp.com/github/stars/syngenta/circleci-config-visualizer?logo=star&style=social&logoColor=black)
+[![Stars](https://img.shields.io/github/stars/syngenta/circleci-config-visualizer)](https://img.shields.io/github/stars/syngenta/circleci-config-visualizer)
+
+[![MIT License](https://img.shields.io/github/license/syngenta/circleci-config-visualizer)](https://img.shields.io/github/license/syngenta/circleci-config-visualizer)
+[![GitHub Release](https://img.shields.io/github/v/release/syngenta/circleci-config-visualizer)](https://img.shields.io/github/v/release/syngenta/circleci-config-visualizer)
+[![Open Issues](https://img.shields.io/github/issues/syngenta/circleci-config-visualizer)](https://img.shields.io/github/issues/syngenta/circleci-config-visualizer)
+[![Pull Requests](https://img.shields.io/github/issues-pr/syngenta/circleci-config-visualizer)](https://img.shields.io/github/issues-pr/syngenta/circleci-config-visualizer)
+
+[![Open Source](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://opensource.org/)
+
 
 # CircleCI Config Visualizer
 </div>
@@ -24,7 +32,15 @@ Built using `Reactjs`, `Redux`, and `Typescript`.
 
     ![Homepage](https://github.com/syngenta/circleci-config-visualizer/blob/main/images/homepage.png)
 
-3. The file gets opened in a visual editor:
+3. Alternatively, you can now connect your GitHub account using a Personal Access Token (PAT) and load config files directly from your repositories:
+
+    ![GitHub Connect](https://github.com/syngenta/circleci-config-visualizer/blob/main/images/github_connect.png)
+
+    If `config.yml` is present in the repo, the status will be shown. Click on **Load Config** button to load the config:
+
+    ![GitHub Config Load](https://github.com/syngenta/circleci-config-visualizer/blob/main/images/github_config_load.png)
+
+4. The file gets opened in a visual editor:
 
     ![Visualized file](https://github.com/syngenta/circleci-config-visualizer/blob/main/images/visualized_file.png)
 

images/github_config_load.png

@@ -20,13 +20,17 @@
     "@types/react-router-dom": "^5.3.3",
     "@xyflow/react": "^12.0.4",
     "aos": "^2.3.4",
+    "axios": "^1.7.9",
+    "buffer": "^6.0.3",
     "html-to-image": "^1.11.11",
     "js-yaml": "^4.1.0",
     "monaco-themes": "^0.4.4",
+    "octokit": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-json-view": "^1.21.3",
+    "react-loader-spinner": "^6.1.6",
     "react-redux": "^9.1.2",
     "react-resizable-panels": "^2.0.22",
     "react-router": "^6.26.1",

images/github_connect.png

@@ -14,6 +14,8 @@ import "aos/dist/aos.css";
 import { setDataReducer } from "./redux/data/dataSlice";
 import Development from "./pages/Development/Development";
 import { ReactFlowProvider } from "@xyflow/react";
+import { setGithubData } from "./redux/githubData/githubDataSlice";
+import { Buffer } from "buffer";
 AOS.init();
 
 function App() {
@@ -32,6 +34,16 @@ function App() {
       dispatch(setDarkMode(false));
       document.documentElement.classList.remove("dark");
     }
+    const githubData = localStorage.getItem("githubData");
+    if (githubData) {
+      dispatch(
+        setGithubData(
+          Buffer.from(githubData, "base64").toString("binary")
+        )
+      );
+    } else {
+      dispatch(setGithubData(null));
+    }
   }, []);
 
   return (