Add Code Editor

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -40,10 +40,9 @@ body:
     attributes:
       label: Environment
       options:
-        - Stage
-        - Production
-        - Release
-        - Deploy preview
+        - Stage ( Stage Branch )
+        - Production ( Master Branch )
+        - Deploy preview ( Test Branch )
     validations:
       required: false
   - type: dropdown

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -1,31 +1,27 @@
 name: Feature request
-description: Suggest a feature to improve Keploy
+description: Suggest a feature to improve InfraBoard
 title: '[feature]: '
-labels: [Enhancement]
+labels: [feature]
 body:
   - type: markdown
     attributes:
       value: |
-        Thank you for taking the time to request a feature for Keploy.
+        Thank you for taking the time to request a feature for InfraBoard.
   - type: checkboxes
     attributes:
       label: Is there an existing feature request for this?
-      description: Please search to see if an issue related to this feature request/feature request already exists.
+      description: Please search to see if an issue related to this feature request already exists.
       options:
         - label: I have searched the existing issues
           required: true
   - type: textarea
     attributes:
       label: Detailed Description
-      description: Please provide a more detailed explanation of the feature
-      validations:
-        required: false
+      description: Please provide a more detailed explanation of the feature.
   - type: textarea
     attributes:
       label: Use Cases and Benefits
-      description: Describe specific use cases and potential benefits of this feature
-      validations:
-        required: false
+      description: Describe specific use cases and potential benefits of this feature.
   - type: dropdown
     id: priority
     attributes:
@@ -34,8 +30,6 @@ body:
         - Low
         - Medium
         - High
-      validations:
-        required: false
   - type: markdown
     attributes:
       value: |

.github/SCORES.md

@@ -0,0 +1,6 @@
+# Contributor Scores
+
+This file tracks the scores for contributors based on resolved issues and merged PRs.
+
+Format: `Username: Score`
+

.github/workflows/assign_pr.yml

@@ -1,12 +1,19 @@
-name: 'Auto Assign PR'
-
+name: Auto Assign
 on:
+  issues:
+    types: [opened]
   pull_request:
-
+    types: [opened]
 jobs:
-  add-reviews:
+  run:
     runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
     steps:
-      - uses: kentaro-m/[email protected]
+      - name: 'Auto-assign issue'
+        uses: pozil/auto-assign-issue@v1
         with:
-          repo-token: ${{ GITHUB }}
+          repo-token: ${{ secrets.GITHUB }}
+          assignees: aryasoni98
+          numOfAssignee: 1

.github/workflows/issue-score-handler.yml

@@ -0,0 +1,37 @@
+name: Add Labels on Issue Creation
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  add-labels:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Add labels to issue
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{secrets.GITHUB}}
+          script: |
+            const issueNumber = context.issue.number;
+            const labels = ['score-5', 'infraboard', 'xerocodee'];
+            github.rest.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issueNumber,
+              labels: labels
+            });
+
+      - name: Comment on issue
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{secrets.GITHUB}}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: 'Thank you for submitting an issue! Each issue will be manually reviewed for scoring.'
+            })

.github/workflows/pr-merge-score-updater.yml

@@ -0,0 +1,38 @@
+name: PR Merge Score Updater
+
+on:
+  pull_request_target:
+    types: [closed]
+
+jobs:
+  update-score:
+    if: github.event.pull_request.merged == true && github.event.pull_request.base.ref == 'master'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          ref: 'master'
+
+      - name: Update Score in Markdown File
+        run: |
+          SCORE=5
+          USER="${{ github.event.pull_request.user.login }}"
+          FILE_PATH="./SCORES.md"
+          touch $FILE_PATH
+          if grep -q "^$USER: " $FILE_PATH; then
+              awk -v user="$USER" -v score=$SCORE 'BEGIN{FS=OFS=": "}{if ($1 == user) $2 += score; print}' $FILE_PATH > temp && mv temp $FILE_PATH
+          else
+              echo "$USER: $SCORE" >> $FILE_PATH
+          fi
+
+        shell: bash
+
+      - name: Commit and push if SCORES.md has changes
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "Arya Soni"
+          git add SCORES.md
+          git commit -m "Update scores" || exit 0
+          git push
+          git push https://${{ secrets.GITHUB }}@github.com/xerocodee/InfraBoard.git master

CONTRIBUTING.md

@@ -28,6 +28,10 @@ Contributions to InfraBoard can take many forms. Here are some ways you can help
 
 8. **Open a Pull Request**: Go to the InfraBoard repository and open a pull request from your branch.
 
+##### Notes :
+
+To contribute to InfraBoard, always push new features or bug fixes to a feature/bug branch first. Then, raise a pull request (PR) from your feature/bug branch to the test branch for review. It's crucial to target the test branch with your PRs to ensure changes are tested before merging into the master/stage codebase. This approach helps maintain the stability and quality of the project.
+
 ## Coding Guidelines
 
 - Ensure your code adheres to the project's coding standards.
@@ -46,7 +50,7 @@ If you are adding new features or making changes that require documentation upda
 
 ## Code of Conduct
 
-Please note that this project is released with a Contributor Code of Conduct. By participating in this project, you agree to abide by its terms.
+Please note that this project is released with a Contributor [Code of Conduct](./CODE_OF_CONDUCT.md). By participating in this project, you agree to abide by its terms.
 
 ## Questions?
 

TEMPLATE.md

@@ -0,0 +1,50 @@
+
+# Templates Tutorial
+
+- `src/assets/`:
+    - `aws/`: This directory contains all the icons related to AWS services. The icons are the `.tsx` file.
+        - `compute/`: contains icons for aws compute services.
+        - `network/`: contains icons for aws networking services.
+        - ...
+    - `gcp/`: This directory contains all the icons related to GCP services. The icons are the `.tsx` file.
+        - `compute/`: contains icons for gcp compute services.
+        - `network/`: contains icons for gcp networking services.
+        - ...
+
+
+
+## Steps to create .tsx file from svg file.
+
+- Copy the svg code.
+- [Go to this link](https://react-svgr.com/playground/?dimensions=false&jsxRuntime=automatic)
+- Paste the SVG code here. The site will generate the React component. Create the icon file in the project and use proper naming conventions.
+- import the tsx component you create earlier in `src/assets/index.ts` file.
+- Add icon in icon object.
+
+## How to use this icon/image component.
+
+- import {`AWSIcons`} from `@/assets/aws`
+- const {`YourIconComponentName`} =  `AWSIcons`
+- `<ComponentName className=""/>` use this when required.
+
+
+
+## Store Folder `src/store`
+
+- `aws/`: contains data file about aws services.
+    - `compute`
+    - `network`
+    - `applications`
+    - `others`
+    - ...
+
+- `gcp/`: contains data file about gcp services.
+    - `compute`
+    - `ai`
+    - `applications`
+    - `others`
+    - ...
+
+The subdirectories (eg: compute, ai, applications, etc.) object files are then imported into `store/gcp/index.ts` and `store/aws/index.ts`. The subdirectories object files may contains react icons or custom tsx icon files.
+
+- `leftSidebarData` : The file that is responsible for rendering the tabs in the left sidebar You can easily add and remove the tabs from this file.

package.json

@@ -13,19 +13,23 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
-    "@mantine/core": "^7.5.0",
+    "@mantine/core": "^7.5.1",
+    "@mantine/hooks": "^7.5.1",
     "next": "14.1.0",
     "react": "^18",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18",
     "react-draggable": "^4.4.6",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "react-monaco-editor": "^0.55.0",
+    "react-resizable": "^3.0.5"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-resizable": "^3.0.7",
     "autoprefixer": "^10.0.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.1.0",

src/app/globals.css

@@ -4,7 +4,7 @@
 
 * {
   scrollbar-color: #464646 #282c34;
-  scrollbar-width: thin;
+  scrollbar-width: none;
 }
 
 *::-webkit-scrollbar {

src/app/layout.tsx

@@ -4,9 +4,10 @@ import { MantineProvider } from '@mantine/core'
 import '@mantine/core/styles.css'
 import './globals.css'
 const inter = Inter({ subsets: ['latin'] })
+
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'InfraBoard',
+  description: 'Visual Cloud Infrastructure Management',
 }
 
 export default function RootLayout({

src/app/page.tsx

@@ -4,13 +4,31 @@ import Header from '@/components/header/header'
 import SideBar from '@/components/sidebar/sidebar'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { DndProvider } from 'react-dnd'
+import CodeEditor from '@/components/code_editor/codeEditor'
+import { useState } from 'react'
+
+interface DroppedItem {
+  subTab: {
+    title: string
+    icon?: any
+    subList: any[]
+  }
+  position: { x: number; y: number }
+}
+
 export default function Home() {
+  const [droppedItems, setDroppedItems] = useState<DroppedItem[]>([])
+
+  const handleItemDrop = (newItem: DroppedItem) => {
+    setDroppedItems((prevItems) => [...prevItems, newItem])
+  }
   return (
     <main>
       <DndProvider backend={HTML5Backend}>
         <Header />
         <SideBar />
-        <Canvas />
+        <Canvas onItemDrop={handleItemDrop} droppedItems={droppedItems} />
+        <CodeEditor droppedItems={droppedItems} />
       </DndProvider>
     </main>
   )

src/assets/aws/index.ts

@@ -8,9 +8,11 @@ import ElasticBeanStalkIcon from './compute/elasticBeanStalkIcon'
 import ImageBuilderIcon from './compute/imageBuilderIcon'
 import LambdaIcon from './compute/lambdaIcon'
 import LightSailIcon from './compute/sailIcon'
+
 // Network
 import GateWayIcon from './network/gateWayIcon'
 import VpcIcon from './network/vpcIcon'
+
 //Tools
 import BudgetIcon from './tools/budgetIcon'
 import CostExplorerIcon from './tools/costExplorerIcon'
@@ -41,9 +43,11 @@ const AWSIcons = {
   ImageBuilderIcon,
   LambdaIcon,
   LightSailIcon,
+
   // Network
   GateWayIcon,
   VpcIcon,
+
   // Tools
   BudgetIcon,
   CostExplorerIcon,