Admin messages (#17)

* Submodules added to refinery-entry

* Added submodules to drone file

* Installed missing packages

* Added admin messages on refinery entry

* Submodules merge

* Installed package from submodule

Author: lumburovskalina

.drone.yml

@@ -6,6 +6,12 @@ platform:
   arch: amd64
 
 steps:
+  - name: submodules
+    image: alpine/git
+    commands:
+      - git submodule init
+      - 'git config --global url."https://github.com/".insteadOf [email protected]:'
+      - "git submodule update --recursive"
   - name: build and publish
     image: plugins/docker
     settings:
@@ -64,6 +70,12 @@ platform:
   arch: arm64
 
 steps:
+  - name: submodules
+    image: alpine/git
+    commands:
+      - git submodule init
+      - 'git config --global url."https://github.com/".insteadOf [email protected]:'
+      - "git submodule update --recursive"
   - name: build and publish
     image: plugins/docker
     settings:
@@ -93,6 +105,12 @@ platform:
   arch: amd64
 
 steps:
+  - name: submodules
+    image: alpine/git
+    commands:
+      - git submodule init
+      - 'git config --global url."https://github.com/".insteadOf [email protected]:'
+      - "git submodule update --recursive"
   - name: build and publish
     image: plugins/docker
     settings:
@@ -116,6 +134,12 @@ platform:
   arch: arm64
 
 steps:
+  - name: submodules
+    image: alpine/git
+    commands:
+      - git submodule init
+      - 'git config --global url."https://github.com/".insteadOf [email protected]:'
+      - "git submodule update --recursive"
   - name: build and publish
     image: plugins/docker
     settings:

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "submodules/javascript-functions"]
+	path = submodules/javascript-functions
+	url = [email protected]:code-kern-ai/submodule-javascript-functions.git
+[submodule "submodules/react-components"]
+	path = submodules/react-components
+	url = [email protected]:code-kern-ai/submodule-react-components.git

package.json

@@ -9,10 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.18",
+    "@nextui-org/react": "^1.0.0-beta.13",
     "@ory/client": "^1.1.24",
     "@ory/integrations": "^1.1.0",
     "@ory/kratos-client": "^0.11.1",
     "@ory/themes": "^0.0.101",
+    "@tabler/icons-react": "^3.2.0",
+    "@tailwindcss/forms": "^0.5.3",
     "@types/node": "18.15.12",
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
@@ -23,7 +27,9 @@
     "next": "^12.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-i18next": "^14.1.2",
     "react-toastify": "^9.1.2",
+    "rxjs": "^7.8.1",
     "styled-components": "^5.3.9",
     "typescript": "5.0.4"
   },
@@ -35,4 +41,4 @@
     "postcss": "^8.4.23",
     "tailwindcss": "^3.3.1"
   }
-}
+}

pages/settings.tsx

@@ -3,24 +3,62 @@ import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
 import { useRouter } from "next/router"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 
 import { Flow, Messages } from "../pkg"
 import { handleFlowError } from "../pkg/errors"
 import ory from "../pkg/sdk"
 import { KernLogo } from "@/pkg/ui/Icons"
 import { prepareNodes } from "@/util/helper-functions"
+import { WebSocketsService } from "@/submodules/react-components/hooks/web-socket/WebSocketsService"
+import { getAllActiveAdminMessages, getUserInfoExtended } from "@/util/data-fetch"
+import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket"
+import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants"
+import { AdminMessage } from "@/submodules/react-components/types/admin-messages"
+import { postProcessAdminMessages } from "@/submodules/react-components/helpers/admin-messages-helper"
+import AdminMessages from "@/submodules/react-components/components/AdminMessages"
 
 const Settings: NextPage = () => {
   const [initialFlow, setInitialFlow]: any = useState<SettingsFlow>()
   const [changedFlow, setChangedFlow]: any = useState<SettingsFlow>()
   const [containsTotp, setContainsTotp] = useState<boolean>(false)
   const [containsBackupCodes, setContainsBackupCodes] = useState<boolean>(false)
   const [isOidc, setIsOidc] = useState(false);
+  const [user, setUser] = useState<any>(null);
+  const [activeAdminMessages, setActiveAdminMessages] = useState<AdminMessage[]>([]);
   // Get ?flow=... from the URL
   const router = useRouter()
   const { flow: flowId, return_to: returnTo } = router.query
 
+  useEffect(() => {
+    getUserInfoExtended((res) => {
+      setUser(res['data']['userInfo']);
+      if (res) {
+        if (res['data']?.["userInfo"]?.organizationId) {
+          if (WebSocketsService.getConnectionOpened()) return;
+          WebSocketsService.setConnectionOpened(true);
+          WebSocketsService.initWsNotifications();
+        }
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    refetchAdminMessagesAndProcess();
+  }, []);
+
+  const handleWebsocketNotification = useCallback((msgParts: string[]) => {
+    if (msgParts[1] == 'admin_message') {
+      refetchAdminMessagesAndProcess();
+    }
+  }, []);
+
+  function refetchAdminMessagesAndProcess() {
+    getAllActiveAdminMessages((res) => setActiveAdminMessages(postProcessAdminMessages(res["data"]["allActiveAdminMessages"])));
+  }
+
+  useWebsocket(user?.organizationId, Application.ENTRY, CurrentPage.ENTRY_LAYOUT, handleWebsocketNotification)
+
   useEffect(() => {
     // If the router is not ready yet, or we already have a flow, do nothing.
     if (!router.isReady || initialFlow) {
@@ -162,6 +200,9 @@ const Settings: NextPage = () => {
       </div>
       <div className="img-container">
       </div>
+      <AdminMessages
+        adminMessages={activeAdminMessages}
+        setActiveAdminMessages={setActiveAdminMessages} />
     </>
   )
 }

services/basic-fetch/util.ts

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+pull() {
+    echo "Pulling data..."; 
+    git submodule foreach git pull
+    echo "Pulling done"; 
+}
+
+
+push() {
+    echo "Preparing push..."; 
+    git submodule foreach git add .
+    git submodule foreach git commit -m "$@"
+    git submodule foreach git push
+    echo "Pushed (if there were any changes that is...)"; 
+}
+
+
+init() {
+    echo "Initializing submodules..."
+    git submodule update --init
+    git submodule foreach git checkout dev
+    echo "Initializing complete"
+}
+
+if [ "$1" == "init" ]; then
+    init
+else 
+    if [ "$1" == "pull" ]; then
+        pull
+    else 
+        if [ "$1" == "push" ]; then
+            if [ -z ${2+x} ]; 
+            then echo "Please provide a commit message"; 
+            else push "$2";
+            fi
+        fi
+    fi
+fi

smodules

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 *,
 ::before,
 ::after {
@@ -166,9 +170,10 @@ button.button-sign-in:focus {
     padding-top: 0.25rem;
 }
 
-.divider-outer:before, .divider-outer:after {
+.divider-outer:before,
+.divider-outer:after {
     content: "";
-    border-bottom: 1px solid  #D1D5DB;
+    border-bottom: 1px solid #D1D5DB;
     flex: 1 0 auto;
     height: .3rem;
 }

styles/globals.css

@@ -1,14 +1,44 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
-  ],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
+    fontSize: {
+      xs: ['0.75rem', { lineHeight: '1rem' }],
+      sm: ['0.875rem', { lineHeight: '1.5rem' }],
+      base: ['1rem', { lineHeight: '1.75rem' }],
+      lg: ['1.125rem', { lineHeight: '2rem' }],
+      xl: ['1.25rem', { lineHeight: '2rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['2rem', { lineHeight: '2.5rem' }],
+      '4xl': ['2.5rem', { lineHeight: '3.5rem' }],
+      '5xl': ['3rem', { lineHeight: '3.5rem' }],
+      '6xl': ['3.75rem', { lineHeight: '1' }],
+      '7xl': ['4.5rem', { lineHeight: '1.1' }],
+      '8xl': ['6rem', { lineHeight: '1' }],
+      '9xl': ['8rem', { lineHeight: '1' }],
+    },
     extend: {
-
+      borderRadius: {
+        '4xl': '2rem',
+      },
+      fontFamily: {
+        sans: ['Inter', ...defaultTheme.fontFamily.sans],
+        mono: ['DM Mono', ...defaultTheme.fontFamily.mono],
+      },
+      maxWidth: {
+        '2xl': '40rem',
+      },
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms')],
+  content: ['./src/**/*.{js,jsx,ts,tsx}', './submodules/react-components/**/*.{js,jsx,ts,tsx}'],
+  safelist: [
+    // new safelist logic https://tailwindcss.com/docs/content-configuration#using-regular-expressions
+    { pattern: /(text)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(500|600|700|800)/ },
+    { pattern: /(border)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(300|400|500)/ },
+    { pattern: /(bg)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|500)/ },
+    { pattern: /grid-cols-(\d+)/ },
+  ],
 }