Merge branch 'main' of https://github.com/Infisical/infisical into main

.github/workflows/check-be-pull-request.yml

@@ -0,0 +1,41 @@
+name: Check Backend Pull Request
+
+on:
+  pull_request:
+    types: [ opened, synchronize ]
+    paths:
+      - 'backend/**'
+      - '!backend/README.md'
+      - '!backend/.*'
+      - 'backend/.eslintrc.js'
+
+
+jobs:
+
+  check-be-pr:
+    name: Check
+    runs-on: ubuntu-latest
+
+    steps:
+      -
+        name: ☁️ Checkout source
+        uses: actions/checkout@v3
+      -
+        name: 🔧 Setup Node 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: 'npm'
+          cache-dependency-path: backend/package-lock.json
+      -
+        name: 📦 Install dependencies
+        run: npm ci --only-production --ignore-scripts
+        working-directory: backend
+      # -
+      #   name: 🧪 Run tests
+      #   run: npm run test:ci
+      #   working-directory: backend
+      -
+        name: 🏗️ Run build
+        run: npm run build
+        working-directory: backend

.github/workflows/check-fe-pull-request.yml

@@ -0,0 +1,41 @@
+name: Check Frontend Pull Request
+
+on:
+  pull_request:
+    types: [ opened, synchronize ]
+    paths:
+      - 'frontend/**'
+      - '!frontend/README.md'
+      - '!frontend/.*'
+      - 'frontend/.eslintrc.js'
+
+
+jobs:
+
+  check-fe-pr:
+    name: Check
+    runs-on: ubuntu-latest
+
+    steps:
+      -
+        name: ☁️ Checkout source
+        uses: actions/checkout@v3
+      -
+        name: 🔧 Setup Node 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+      -
+        name: 📦 Install dependencies
+        run: npm ci --only-production --ignore-scripts
+        working-directory: frontend
+      # -
+      #   name: 🧪 Run tests
+      #   run: npm run test:ci
+      #   working-directory: frontend
+      -
+        name: 🏗️ Run build
+        run: npm run build
+        working-directory: frontend

.github/workflows/docker-image.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - 
         name: ☁️ Checkout source
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       -
         name: 🔧 Set up QEMU
         uses: docker/setup-qemu-action@v2
@@ -36,7 +36,7 @@ jobs:
       #   run: |
       #     docker run --rm infisical/backend:test
       -
-        name: 📦 Build backend and push
+        name: 🏗️ Build backend and push
         uses: docker/build-push-action@v3
         with:
           push: true
@@ -52,7 +52,7 @@ jobs:
     steps:
       - 
         name: ☁️ Checkout source
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       -
         name: 🔧 Set up QEMU
         uses: docker/setup-qemu-action@v2
@@ -79,10 +79,12 @@ jobs:
       #   run: |
       #     docker run --rm infisical/frontend:test
       -
-        name: 📦 Build frontend and push
+        name: 🏗️ Build frontend and push
         uses: docker/build-push-action@v3
         with:
           push: true
           context: frontend
           tags: infisical/frontend:latest
           platforms: linux/amd64,linux/arm64
+          build-args: |
+            POSTHOG_API_KEY=${{ secrets.PUBLIC_POSTHOG_API_KEY }}

README.md

@@ -52,6 +52,12 @@ And more.
 
 To quickly get started, visit our [get started guide](https://infisical.com/docs/getting-started/introduction).
 
+<p>
+  <a href="https://infisical.com/docs/self-hosting/overview" target="_blank"><img src="https://user-images.githubusercontent.com/78047717/206356882-2b773eed-b0da-4725-ae2f-83e3cd7f2713.png" height=120 /> </a>
+  <a href="https://www.youtube.com/watch?v=JS3OKYU2078" target="_blank"><img src="https://user-images.githubusercontent.com/78047717/206356600-8833b128-6cae-408c-a703-07b2fc6aff4b.png" height=120 /> </a>
+  <a href="https://app.infisical.com/signup" target="_blank"><img src="https://user-images.githubusercontent.com/78047717/206355970-f4c09062-b88f-452a-94e0-9c61a0651170.png" height=120></a>
+</p>
+
 ## 🔥 What's cool about this?
 
 Infisical makes secret management simple and end-to-end encrypted by default. We're on a mission to make it more accessible to all developers, <i>not just security teams</i>. 
@@ -279,4 +285,4 @@ Looking to report a security vulnerability? Please don't post about it in GitHub
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 
-<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/reginaldbondoc"><img src="https://avatars.githubusercontent.com/u/7693108?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/SH5H"><img src="https://avatars.githubusercontent.com/u/25437192?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/asharonbaltazar"><img src="https://avatars.githubusercontent.com/u/58940073?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/0xflotus"><img src="https://avatars.githubusercontent.com/u/26602940?v=4" width="50" height="50" alt=""/></a> 
+<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/reginaldbondoc"><img src="https://avatars.githubusercontent.com/u/7693108?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/SH5H"><img src="https://avatars.githubusercontent.com/u/25437192?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/asharonbaltazar"><img src="https://avatars.githubusercontent.com/u/58940073?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/edgarrmondragon"><img src="https://avatars.githubusercontent.com/u/16805946?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/0xflotus"><img src="https://avatars.githubusercontent.com/u/26602940?v=4" width="50" height="50" alt=""/></a> 

frontend/components/context/Notifications/Notification.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
@@ -5,14 +6,35 @@ import classnames from "classnames";
 import { Notification as NotificationType } from "./NotificationProvider";
 
 interface NotificationProps {
-  notification: NotificationType;
-  clearNotification: (text?: string) => void;
+  notification: Required<NotificationType>;
+  clearNotification: (text: string) => void;
 }
 
 const Notification = ({
   notification,
   clearNotification,
 }: NotificationProps) => {
+  const timeout = useRef<number>();
+
+  const handleClearNotification = () => clearNotification(notification.text);
+
+  const setNotifTimeout = () => {
+    timeout.current = window.setTimeout(
+      handleClearNotification,
+      notification.timeoutMs
+    );
+  };
+
+  const cancelNotifTimeout = () => {
+    clearTimeout(timeout.current);
+  };
+
+  useEffect(() => {
+    setNotifTimeout();
+
+    return cancelNotifTimeout;
+  }, []);
+
   return (
     <div
       className={classnames(
@@ -20,6 +42,7 @@ const Notification = ({
         {
           "bg-green-600": notification.type === "success",
           "bg-red-500": notification.type === "error",
+          "bg-blue-500": notification.type === "info",
         }
       )}
       role="alert"

frontend/components/context/Notifications/NotificationProvider.tsx

@@ -2,15 +2,16 @@ import { createContext, ReactNode, useContext, useState } from "react";
 
 import Notifications from "./Notifications";
 
-type NotificationType = "success" | "error";
+type NotificationType = "success" | "error" | "info";
 
 export type Notification = {
   text: string;
-  type: NotificationType;
+  type?: NotificationType;
+  timeoutMs?: number;
 };
 
 type NotificationContextState = {
-  createNotification: ({ text, type }: Notification) => void;
+  createNotification: (newNotification: Notification) => void;
 };
 
 const NotificationContext = createContext<NotificationContextState>({
@@ -24,26 +25,30 @@ interface NotificationProviderProps {
 }
 
 const NotificationProvider = ({ children }: NotificationProviderProps) => {
-  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [notifications, setNotifications] = useState<Required<Notification>[]>(
+    []
+  );
 
-  const clearNotification = (text?: string) => {
-    if (text) {
-      return setNotifications((state) =>
-        state.filter((notif) => notif.text !== text)
-      );
-    }
-
-    return setNotifications([]);
+  const clearNotification = (text: string) => {
+    return setNotifications((state) =>
+      state.filter((notif) => notif.text !== text)
+    );
   };
 
-  const createNotification = ({ text, type = "success" }: Notification) => {
+  const createNotification = ({
+    text,
+    type = "success",
+    timeoutMs = 2000,
+  }: Notification) => {
     const doesNotifExist = notifications.some((notif) => notif.text === text);
 
     if (doesNotifExist) {
       return;
     }
 
-    return setNotifications((state) => [...state, { text, type }]);
+    const newNotification: Required<Notification> = { text, type, timeoutMs };
+
+    return setNotifications((state) => [...state, newNotification]);
   };
 
   return (

frontend/components/context/Notifications/Notifications.tsx

@@ -2,25 +2,27 @@ import Notification from "./Notification";
 import { Notification as NotificationType } from "./NotificationProvider";
 
 interface NoticationsProps {
-  notifications: NotificationType[];
-  clearNotification: (text?: string) => void;
+  notifications: Required<NotificationType>[];
+  clearNotification: (text: string) => void;
 }
 
 const Notifications = ({
   notifications,
   clearNotification,
 }: NoticationsProps) => {
+  if (!notifications.length) {
+    return null;
+  }
+
   return (
-    <div className="hidden fixed z-50 top-1 w-full inset-x-0 pointer-events-none md:flex justify-center">
-      <div className="flex flex-col gap-y-2 w-96">
-        {notifications.map((notif) => (
-          <Notification
-            key={notif.text}
-            notification={notif}
-            clearNotification={clearNotification}
-          />
-        ))}
-      </div>
+    <div className="hidden fixed z-50 md:flex md:flex-col-reverse bottom-1 gap-y-2 w-96 h-full right-1 pointer-events-none">
+      {notifications.map((notif) => (
+        <Notification
+          key={notif.text}
+          notification={notif}
+          clearNotification={clearNotification}
+        />
+      ))}
     </div>
   );
 };