diff --git a/frontend/src/components/alert.tsx b/frontend/src/components/alert.tsx index 7034d2692f..6d097fef45 100644 --- a/frontend/src/components/alert.tsx +++ b/frontend/src/components/alert.tsx @@ -123,8 +123,8 @@ export const Alert = (props: AlertProps) => { return (
-
-
{getIcon()}
+
+
{getIcon()}
{details ? {alertDetails} : alertMessage}
diff --git a/frontend/src/components/code-editor.tsx b/frontend/src/components/code-editor.tsx index 694d7fe06e..99e70fd914 100644 --- a/frontend/src/components/code-editor.tsx +++ b/frontend/src/components/code-editor.tsx @@ -1,27 +1,59 @@ // import "prismjs/components/prism-clike"; +import { ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from "@heroicons/react/24/outline"; import Prism from "prismjs"; // import "prismjs/components/prism-javascript"; import "prismjs/components/prism-json"; // need this import "prismjs/themes/prism.css"; //Example style, you can use another +import { useState } from "react"; import Editor from "react-simple-code-editor"; +import { toast } from "react-toastify"; +import { ALERT_TYPES, Alert } from "./alert"; +import { BUTTON_TYPES, Button } from "./button"; export const CodeEditor = (props: any) => { - const { onChange, ...propsToPass } = props; + const { onChange, enableCopy, ...propsToPass } = props; + + const [isCopied, setIsCopied] = useState(false); + + const handleCopy = async () => { + setIsCopied(true); + + await navigator.clipboard.writeText(props.value); + + toast(); + + setTimeout(() => { + setIsCopied(false); + }, 3000); + }; return ( - onChange(code)} - highlight={(code) => Prism.highlight(code, Prism.languages.json, "json")} - padding={10} - style={{ - fontFamily: "'Fira code', 'Fira Mono', monospace", - fontSize: 12, - resize: "vertical", - }} - className="rounded-md shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 border-gray-300 bg-custom-white sm:text-sm sm:leading-6 disabled:cursor-not-allowed disabled:bg-gray-100 focus:ring-2 focus:ring-inset focus:ring-custom-blue-600 focus:border-custom-blue-600 focus:outline-none" - /> +
+ {enableCopy && ( + + )} + + onChange(code)} + highlight={(code) => Prism.highlight(code, Prism.languages.json, "json")} + padding={10} + style={{ + fontFamily: "'Fira code', 'Fira Mono', monospace", + fontSize: 12, + resize: "vertical", + }} + className="rounded-md shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 border-gray-300 bg-custom-white sm:text-sm sm:leading-6 disabled:cursor-not-allowed disabled:bg-gray-100 focus:ring-2 focus:ring-inset focus:ring-custom-blue-600 focus:border-custom-blue-600 focus:outline-none" + /> +
); }; diff --git a/frontend/src/components/file.tsx b/frontend/src/components/file.tsx index 6506014cec..601aac72d6 100644 --- a/frontend/src/components/file.tsx +++ b/frontend/src/components/file.tsx @@ -8,10 +8,11 @@ import { CodeEditor } from "./code-editor"; type tFile = { url: string; + enableCopy?: boolean; }; export const File = (props: tFile) => { - const { url } = props; + const { url, enableCopy } = props; const [isLoading, setIsLoading] = useState(false); const [fileContent, setFileContent] = useState(""); @@ -47,7 +48,7 @@ export const File = (props: tFile) => { return (
- +
); }; diff --git a/frontend/src/config/config.ts b/frontend/src/config/config.ts index 51ccdbb841..85ae0af935 100644 --- a/frontend/src/config/config.ts +++ b/frontend/src/config/config.ts @@ -24,13 +24,15 @@ export const CONFIG = { DATA_DIFF_URL: (branch?: string) => `${INFRAHUB_API_SERVER_URL}/api/diff/data-new?branch=${branch}`, FILES_DIFF_URL: (branch?: string) => `${INFRAHUB_API_SERVER_URL}/api/diff/files?branch=${branch}`, + SCHEMA_DIFF_URL: (branch?: string) => + `${INFRAHUB_API_SERVER_URL}/api/diff/schema?branch=${branch}`, ARTIFACTS_DIFF_URL: (branch?: string) => `${INFRAHUB_API_SERVER_URL}/api/diff/artifacts?branch=${branch}`, ARTIFACTS_GENERATE_URL: (id?: string) => `${INFRAHUB_API_SERVER_URL}/api/artifact/generate/${id}`, - SCHEMA_DIFF_URL: (branch?: string) => - `${INFRAHUB_API_SERVER_URL}/api/diff/schema?branch=${branch}`, - FILES_CONTENT_URL: (repositoryId: string, location: string) => - `${INFRAHUB_API_SERVER_URL}/api/file/${repositoryId}/${encodeURIComponent(location)}`, ARTIFACTS_CONTENT_URL: (storageId: string) => `${INFRAHUB_API_SERVER_URL}/api/storage/object/${storageId}`, + ARTIFACT_DETAILS_URL: (id: string) => `${INFRAHUB_API_SERVER_URL}/api/artifact/${id}`, + FILES_CONTENT_URL: (repositoryId: string, location: string) => + `${INFRAHUB_API_SERVER_URL}/api/file/${repositoryId}/${encodeURIComponent(location)}`, + STORAGE_DETAILS_URL: (id: string) => `${INFRAHUB_API_SERVER_URL}/api/storage/object/${id}`, }; diff --git a/frontend/src/config/constants.tsx b/frontend/src/config/constants.tsx index 80ab4effcb..1436c31c5a 100644 --- a/frontend/src/config/constants.tsx +++ b/frontend/src/config/constants.tsx @@ -85,6 +85,8 @@ export const MENU_EXCLUDELIST = [ "CoreArtifactValidator", ]; +export const ATTRIBUTES_NAME_EXCLUDELIST = ["checksum", "storage_id"]; + export const ATTRIBUTES_EXCLUDELIST = ["HashedPassword"]; export const COLUMNS_EXCLUDELIST = ["TextArea", "JSON"]; diff --git a/frontend/src/screens/artifacts/object-item-details-paginated.tsx b/frontend/src/screens/artifacts/object-item-details-paginated.tsx index 11f536c745..de2358dacb 100644 --- a/frontend/src/screens/artifacts/object-item-details-paginated.tsx +++ b/frontend/src/screens/artifacts/object-item-details-paginated.tsx @@ -2,7 +2,6 @@ import { gql, useReactiveVar } from "@apollo/client"; import { ChevronRightIcon } from "@heroicons/react/20/solid"; import { LockClosedIcon, - PencilIcon, PencilSquareIcon, RectangleGroupIcon, Square3Stack3DIcon, @@ -158,14 +157,6 @@ export default function ObjectItemDetails() { definitionid={objectDetailsData?.definition?.node?.id} /> - -