Merge pull request #1027 from opsmill/ple-artifacts-updates

Artifacts updates (buttons, clipboard, links)
opsmill · Sep 7, 2023 · 1302648 · 1302648
2 parents 49a9d85 + ec9c15d
commit 1302648
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 39 deletions.
diff --git a/frontend/src/components/alert.tsx b/frontend/src/components/alert.tsx
@@ -123,8 +123,8 @@ export const Alert = (props: AlertProps) => {
 
   return (
     <div className={classNames("rounded-m p-4", alertClasses.container)}>
-      <div className="flex">
-        <div className="flex-shrink-0 flex items-start pt-1">{getIcon()}</div>
+      <div className="flex items-center">
+        <div className="flex-shrink-0 flex items-start">{getIcon()}</div>
         <div className="ml-3">
           {details ? <Accordion title={alertMessage}>{alertDetails}</Accordion> : alertMessage}
         </div>

diff --git 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(<Alert message="Content copied" type={ALERT_TYPES.INFO} />);
+
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 3000);
+  };
 
   return (
-    <Editor
-      {...propsToPass}
-      // value={code}
-      onValueChange={(code) => 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"
-    />
+    <div className="relative">
+      {enableCopy && (
+        <Button
+          className="absolute z-10 top-0 right-0"
+          buttonType={BUTTON_TYPES.INVISIBLE}
+          onClick={handleCopy}>
+          {!isCopied && <ClipboardDocumentIcon className="h-4 w-4" />}
+
+          {isCopied && <ClipboardDocumentCheckIcon className="h-4 w-4" />}
+        </Button>
+      )}
+
+      <Editor
+        {...propsToPass}
+        // value={code}
+        onValueChange={(code) => 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"
+      />
+    </div>
   );
 };
diff --git 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 (
     <div className="p-4">
-      <CodeEditor value={fileContent} disabled />
+      <CodeEditor value={fileContent} disabled enableCopy={enableCopy} />
     </div>
   );
 };
diff --git 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
@@ -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
@@ -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}
             />
 
-            <Button
-              disabled={!auth?.permissions?.write}
-              onClick={() => setShowEditDrawer(true)}
-              className="mr-4">
-              Edit
-              <PencilIcon className="-mr-0.5 h-4 w-4" aria-hidden="true" />
-            </Button>
-
             <Button
               disabled={!auth?.permissions?.write}
               onClick={() => setShowAddToGroupDrawer(true)}
@@ -180,17 +171,24 @@ export default function ObjectItemDetails() {
       {!qspTab && (
         <div className="flex flex-col-reverse xl:flex-row">
           <div className="flex-1">
-            <File url={fileUrl} />
+            <File url={fileUrl} enableCopy />
           </div>
 
           <div className="flex-1 bg-custom-white p-4">
             <dl className="sm:divide-y sm:divide-gray-200">
               <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-3 sm:px-6">
                 <dt className="text-sm font-medium text-gray-500 flex items-center">ID</dt>
                 <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                  {objectDetailsData.id}
+                  <a
+                    href={CONFIG.ARTIFACT_DETAILS_URL(objectDetailsData.id)}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="cursor-pointer underline">
+                    {objectDetailsData.id}
+                  </a>
                 </dd>
               </div>
+
               {attributes?.map((attribute) => {
                 if (
                   !objectDetailsData[attribute.name] ||
@@ -213,7 +211,21 @@ export default function ObjectItemDetails() {
                           "mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
                           // attribute.kind === "TextArea" ? "whitespace-pre-wrap mr-2" : ""
                         )}>
-                        {getObjectItemDisplayValue(objectDetailsData, attribute, schemaKindName)}
+                        {attribute.name === "storage_id" &&
+                          objectDetailsData[attribute.name]?.value && (
+                            <a
+                              href={CONFIG.STORAGE_DETAILS_URL(
+                                objectDetailsData[attribute.name].value
+                              )}
+                              target="_blank"
+                              rel="noreferrer"
+                              className="cursor-pointer underline">
+                              {objectDetailsData[attribute.name].value}
+                            </a>
+                          )}
+
+                        {attribute.name !== "storage_id" &&
+                          getObjectItemDisplayValue(objectDetailsData, attribute, schemaKindName)}
                       </dd>
 
                       {objectDetailsData[attribute.name] && (

diff --git a/frontend/src/utils/getSchemaObjectColumns.ts b/frontend/src/utils/getSchemaObjectColumns.ts
@@ -1,5 +1,9 @@
 import * as R from "ramda";
-import { ATTRIBUTES_EXCLUDELIST, COLUMNS_EXCLUDELIST } from "../config/constants";
+import {
+  ATTRIBUTES_EXCLUDELIST,
+  ATTRIBUTES_NAME_EXCLUDELIST,
+  COLUMNS_EXCLUDELIST,
+} from "../config/constants";
 import { iGenericSchema, iNodeSchema } from "../state/atoms/schema.atom";
 
 interface iColumn {
@@ -57,15 +61,16 @@ export const getSchemaRelationshipsTabs = (schema: iNodeSchema | iGenericSchema)
 
 export const getSchemaAttributeColumns = (
   schema: iNodeSchema | iGenericSchema,
-  disableBlackList?: boolean
+  disableExcludeLists?: boolean
 ): iColumn[] => {
   if (!schema) {
     return [];
   }
 
   const attributes: iColumn[] = (schema.attributes || [])
     .filter((row) => !ATTRIBUTES_EXCLUDELIST.includes(row.kind))
-    .filter((row) => (disableBlackList ? true : !COLUMNS_EXCLUDELIST.includes(row.kind)))
+    .filter((row) => (disableExcludeLists ? true : !ATTRIBUTES_NAME_EXCLUDELIST.includes(row.kind)))
+    .filter((row) => (disableExcludeLists ? true : !COLUMNS_EXCLUDELIST.includes(row.kind)))
     .map((row) => ({
       label: row.label ?? "",
       name: row.name,
@@ -77,13 +82,13 @@ export const getSchemaAttributeColumns = (
 
 export const getSchemaObjectColumns = (
   schema: iNodeSchema | iGenericSchema,
-  disableBlackList?: boolean
+  disableExcludeLists?: boolean
 ): iColumn[] => {
   if (!schema) {
     return [];
   }
 
-  const attributes = getSchemaAttributeColumns(schema, disableBlackList);
+  const attributes = getSchemaAttributeColumns(schema, disableExcludeLists);
   const relationships = getSchemaRelationshipColumns(schema);
 
   const columns = R.concat(attributes, relationships);