Add app server developer settings

Author: Shellishack

npm-packages/shared-utils/src/types/types.ts

@@ -139,6 +139,8 @@ export type AppConfig = {
   displayName?: string;
   description?: string;
   materialIcon?: string;
+  license?: string;
+  repository?: string;
   appType?: AppTypeEnum;
   fileTypes?: string[];
   thumbnail?: string;

web/components/interface/navigation/nav.tsx

@@ -23,6 +23,7 @@ import packageJson from "../../../../package.json";
 import readme from "../../../../README.md";
 
 const appInfo: AppInfoModalContent = {
+  id: "pulse-editor",
   name: "Pulse Editor",
   version: packageJson.version,
   author: "ClayPulse",

web/components/marketplace/app/app-preview-card.tsx

@@ -1,4 +1,5 @@
 import { PlatformEnum } from "@/lib/enums";
+import { useAppInfo } from "@/lib/hooks/use-app-info";
 import useExtensionManager from "@/lib/hooks/use-extension-manager";
 import { getRemoteClientBaseURL } from "@/lib/module-federation/remote";
 import {
@@ -50,6 +51,14 @@ export default function AppPreviewCard({
   attributes?: DraggableAttributes;
   listeners?: SyntheticListenerMap;
 }) {
+  const {
+    disableExtension,
+    enableExtension,
+    uninstallExtension,
+    installExtension,
+  } = useExtensionManager();
+  const { openAppInfoModal } = useAppInfo();
+
   const [isEnabled, setIsEnabled] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const [isInstalled, setIsInstalled] = useState(false);
@@ -59,12 +68,6 @@ export default function AppPreviewCard({
     y: 0,
     isOpen: false,
   });
-  const {
-    disableExtension,
-    enableExtension,
-    uninstallExtension,
-    installExtension,
-  } = useExtensionManager();
 
   const editorContext = useContext(EditorContext);
 
@@ -332,7 +335,27 @@ export default function AppPreviewCard({
                 Use
               </Button>
             )}
-            <Button color="secondary" size="sm">
+            <Button
+              color="secondary"
+              size="sm"
+              onPress={() => {
+                openAppInfoModal({
+                  id: extension.config.id,
+                  name: extension.config.displayName ?? extension.config.id,
+                  version: extension.config.version,
+                  author: extension.config.author,
+                  license: extension.config.license,
+                  url: extension.config.repository,
+                  readme: extension.config.repository
+                    ? extension.config.repository + "/README.md"
+                    : undefined,
+                });
+                editorContext?.setEditorStates((prev) => ({
+                  ...prev,
+                  isMarketplaceOpen: false,
+                }));
+              }}
+            >
               Details
             </Button>
             {!isInstalled ? (

web/components/misc/env-input.tsx

@@ -0,0 +1,121 @@
+import { fetchAPI } from "@/lib/pulse-editor-website/backend";
+import { addToast, Button, Input } from "@heroui/react";
+import { useState } from "react";
+import Icon from "./icon";
+
+export default function EnvInput({
+  appId,
+  env,
+  onUpdated,
+}: {
+  appId: string;
+  env: { key: string; value: string; isSecret: boolean };
+  onUpdated: () => void;
+}) {
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [editedValue, setEditedValue] = useState<string>(env.value);
+  const [isSecret, setIsSecret] = useState<boolean>(env.isSecret);
+
+  return (
+    <div className="flex items-center gap-x-1" key={env.key}>
+      <div className="w-1/3 font-mono text-sm break-all">{env.key}</div>
+      <div className="w-2/3 font-mono text-sm break-all">
+        {isEditing ? (
+          <Input
+            size="sm"
+            value={editedValue}
+            onValueChange={setEditedValue}
+            type={isSecret ? "password" : "text"}
+          />
+        ) : (
+          <p>{env.value}</p>
+        )}
+      </div>
+
+      {isEditing ? (
+        <Button
+          isIconOnly
+          variant="light"
+          onPress={async () => {
+            addToast({
+              title: "Updating Variable",
+              description: `Updating environment variable ${env.key}.`,
+            });
+
+            await fetchAPI("/api/app/settings/env/set", {
+              method: "POST",
+              body: JSON.stringify({
+                appId: appId,
+                key: env.key,
+                value: editedValue,
+                isSecret: isSecret,
+              }),
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+
+            onUpdated();
+            setIsEditing((prev) => false);
+
+            addToast({
+              title: "Variable Updated",
+              description: `Environment variable ${env.key} updated successfully.`,
+              color: "success",
+            });
+          }}
+        >
+          <Icon name="check" />
+        </Button>
+      ) : (
+        <Button
+          isIconOnly
+          variant="light"
+          onPress={() => setIsEditing((prev) => true)}
+        >
+          <Icon name="edit" />
+        </Button>
+      )}
+
+      {isEditing ? (
+        <Button
+          isIconOnly
+          variant="light"
+          onPress={() => setIsSecret((prev) => !prev)}
+        >
+          {isSecret ? <Icon name="lock" /> : <Icon name="lock_open" />}
+        </Button>
+      ) : (
+        <Button
+          isIconOnly
+          variant="light"
+          onPress={async () => {
+            addToast({
+              title: "Deleting Variable",
+              description: `Deleting environment variable ${env.key}.`,
+            });
+            await fetchAPI("/api/app/settings/env/delete", {
+              method: "DELETE",
+              body: JSON.stringify({
+                appId: appId,
+                key: env.key,
+              }),
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+            onUpdated();
+
+            addToast({
+              title: "Variable Deleted",
+              description: `Environment variable ${env.key} deleted successfully.`,
+              color: "success",
+            });
+          }}
+        >
+          <Icon name="delete" className="text-danger!" />
+        </Button>
+      )}
+    </div>
+  );
+}

web/components/misc/markdown-render.tsx

@@ -0,0 +1,41 @@
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import remarkAlert from "remark-github-blockquote-alert";
+import "remark-github-blockquote-alert/alert.css";
+
+export default function MarkdownRender({ content }: { content: string }) {
+  return (
+    <div className="markdown-styles">
+      <Markdown
+        remarkPlugins={[remarkGfm, remarkAlert]}
+        rehypePlugins={[rehypeRaw, () => rehypeSanitize(customSchema)]}
+        remarkRehypeOptions={{}}
+      >
+        {content}
+      </Markdown>
+    </div>
+  );
+}
+
+const customSchema = {
+  ...defaultSchema,
+  tagNames: [
+    ...(defaultSchema.tagNames ?? []),
+    "div",
+    "blockquote",
+    "svg",
+    "path",
+    "img",
+  ],
+  attributes: {
+    ...defaultSchema.attributes,
+    div: ["className", "dir", "align"],
+    blockquote: ["className", "dir"],
+    svg: ["className", "viewBox", "width", "height", "aria-hidden"],
+    p: ["className"],
+    path: ["d"],
+    img: ["src", "alt"],
+  },
+};