App improvements

* Abr profile storage/drm changes

* Add error details for production_master/init failed call

* Save file size to display in Details

* Add writeToken and nodeUrl to job details

* Add prompt when no audio/video streams found

* Add error log dialog

* Update client and remove ethers warningFilter

* Get file size for s3 uploads

* Add try/catch to LRO status

* Update elv-lro-status

* LRO error states, use react-copy-to-clipboard package

* Add lastUpdatedTime and active props, fix clear inactive

* Add content type to job details

* Require content type in create form

* Clear lro status interval on error at beginning of loop

* Add drm public access option, sort access groups and libraries

* Update abr-profile

* Remove abr cache from finished job to preserve browser storagespace

* Decouple nested Form components/functions, add default clear profile

* Set default abr profile based on presence of library drm cert

* UI and loading improvements
- Re-format mezzanine and master sections
- Remove mezzanine name and description inputs
- Move useMasterAsMez above libraries
- Create LoadDependencies in ingestStore and rely on loaded prop to display PageLoader
- Load content types and display as dropdown on Create page

* Revise clear/drm disabling and add drm + clear profile

* Support hash and type name for mez content type, use drm+clear profile for libraries with cert but no abr

* Separate master and mez details on Job page, use client ContentType

* Save mez write token and node url from StartABRMezzanineJobs

* Always encrypt master file, change store_clear=true for clear ingests

* Prep abr profiles on library load and set supported encryption options

* Check for truthy playout formats when prepping library abr profiles

---------

Co-authored-by: eponymous301 <michael.parker@eluv.io>

package.json

@@ -16,20 +16,20 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@eluvio/elv-abr-profile": "^1.0.0",
-    "@eluvio/elv-client-js": "^4.0.0",
-    "@eluvio/elv-lro-status": "^3.0.6",
+    "@eluvio/elv-abr-profile": "^1.0.1",
+    "@eluvio/elv-client-js": "^4.0.22",
+    "@eluvio/elv-lro-status": "^3.0.7",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
     "mobx": "^6.6.0",
     "mobx-react": "^7.5.0",
     "pretty-bytes": "^6.0.0",
     "react": "17.0.2",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "17.0.2",
     "react-dropzone": "^14.2.0",
     "react-inlinesvg": "^3.0.1",
     "react-router-dom": "5.2.0",
-    "select": "^1.1.2",
     "url-join": "^5.0.0"
   },
   "devDependencies": {

src/components/FabricLoader.js

@@ -1,26 +1,18 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect} from "react";
 import {observer} from "mobx-react";
 import {PageLoader} from "Components/common/Loader";
 import {ingestStore} from "Stores";
 
 const FabricLoader = observer(({children}) => {
-  const [loading, setLoading] = useState(false);
-
   const LoadDependencies = async () => {
-    await ingestStore.LoadLibraries();
-    await ingestStore.LoadAccessGroups();
+    await ingestStore.LoadDependencies();
   };
 
   useEffect(() => {
-    setLoading(true);
-    try {
-      LoadDependencies();
-    } finally {
-      setLoading(false);
-    }
+    LoadDependencies();
   }, []);
 
-  if(loading || !ingestStore.libraries || !ingestStore.accessGroups) {
+  if(!ingestStore.loaded) {
     return <PageLoader />;
   } else {
     return children;

src/components/LeftNavigation.js

@@ -5,7 +5,7 @@ const LeftNavigation = () => {
   return (
     <nav className="navigation">
       <NavLink to={"/new"} className="navigation__link">Create</NavLink>
-      <NavLink to={"/jobs"} className="navigation__link">Active Jobs</NavLink>
+      <NavLink to={"/jobs"} className="navigation__link">Jobs</NavLink>
     </nav>
   );
 };

src/components/WarningDialog.js

@@ -0,0 +1,23 @@
+import React from "react";
+import {observer} from "mobx-react";
+import Dialog from "Components/common/Dialog";
+import {ingestStore} from "Stores";
+
+const WarningDialog = observer(() => {
+  if(!ingestStore.showDialog) { return null; }
+
+  return (
+    <Dialog
+      title={ingestStore.dialog.title}
+      description={ingestStore.dialog.description}
+      open={ingestStore.showDialog}
+      onOpenChange={() => {}}
+      ConfirmCallback={() => ingestStore.HideWarningDialog("YES")}
+      confirmText="Yes"
+      CancelCallback={() => ingestStore.HideWarningDialog("NO")}
+      cancelText="No"
+    />
+  );
+});
+
+export default WarningDialog;

src/components/common/Copyable.js

@@ -1,28 +1,33 @@
 import React, {useState} from "react";
-import {CopyText} from "Utils/Clipboard";
 import CopyIcon from "Assets/icons/clipboard.svg";
 import CheckmarkIcon from "Assets/icons/check.svg";
 import Tooltip from "Components/common/Tooltip";
+import {CopyToClipboard} from "react-copy-to-clipboard/lib/Component";
 
 export const Copyable = ({copy, children, className}) => {
   const [copied, setCopied] = useState(false);
 
   return (
     <span className={`copyable ${className || ""}`}>
-      { children }
-      <Tooltip
-        message="Copied"
-        open={copied}
-        icon={copied ? CheckmarkIcon : CopyIcon}
-        delayDuration={300}
-        onClick={() => {
-          CopyText(copy);
-          setCopied(true);
-          setTimeout(() => {
-            setCopied(false);
-          }, 3000);
-        }}
-      />
+      {
+        children &&
+        <div className="copyable__text">{ children }</div>
+      }
+      <CopyToClipboard text={copy} onCopy={() => {
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 3000);
+      }}>
+        <Tooltip
+          className="copyable__tooltip"
+          message="Copied"
+          open={copied}
+          icon={copied ? CheckmarkIcon : CopyIcon}
+          delayDuration={300}
+          title="Copy to Clipboard"
+        />
+      </CopyToClipboard>
     </span>
   );
 };

src/components/common/Dialog.js

@@ -1,7 +1,27 @@
 import React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 
-const Dialog = ({trigger, title, description, ConfirmCallback}) => {
+const dialogSizes = {
+  "XS": "xs",
+  "SM": "sm",
+  "MD": "md",
+  "LG": "lg"
+};
+
+const Dialog = ({
+  trigger,
+  title,
+  description,
+  ConfirmCallback,
+  CancelCallback,
+  confirmText="Confirm",
+  cancelText="Cancel",
+  hideCancelButton=false,
+  open,
+  onOpenChange,
+  children,
+  size="SM"
+}) => {
   const Dialog = DialogPrimitive.Root;
   const DialogTrigger = DialogPrimitive.Trigger;
   const DialogOverlay = DialogPrimitive.Overlay;
@@ -12,21 +32,30 @@ const Dialog = ({trigger, title, description, ConfirmCallback}) => {
 
   return (
     <div className="dialog">
-      <Dialog>
+      <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogTrigger asChild>{ trigger }</DialogTrigger>
         <DialogOverlay className="dialog__overlay">
-          <DialogContent className="dialog__content">
-            <DialogTitle>{ title }</DialogTitle>
-            <DialogDescription>{ description }</DialogDescription>
+          <DialogContent className={`dialog__content dialog__content--${dialogSizes[size]}`}>
+            <DialogTitle className="dialog__content__body__title">{ title }</DialogTitle>
+            <div className="dialog__content__body">
+              {
+                description &&
+                <DialogDescription>{ description }</DialogDescription>
+              }
+              { children }
+            </div>
             <div className="dialog__actions">
-              <DialogClose asChild>
-                <button type="button" className="secondary-button">
-                  Cancel
-                </button>
-              </DialogClose>
+              {
+                !hideCancelButton &&
+                <DialogClose asChild>
+                  <button type="button" className="secondary-button" onClick={CancelCallback}>
+                    { cancelText }
+                  </button>
+                </DialogClose>
+              }
               <DialogClose asChild>
                 <button type="button" className="primary-button" onClick={ConfirmCallback}>
-                  Confirm
+                  { confirmText }
                 </button>
               </DialogClose>
             </div>

src/components/common/InlineNotification.js

@@ -2,7 +2,15 @@ import React, {useState} from "react";
 import ImageIcon from "Components/common/ImageIcon";
 import CloseIcon from "Assets/icons/close.svg";
 
-const InlineNotification = ({title, message, type="error"}) => {
+const InlineNotification = ({
+  title,
+  message,
+  subtext,
+  type="error",
+  hideCloseButton=false,
+  actionText,
+  ActionCallback
+}) => {
   const [isOpen, setIsOpen] = useState(true);
 
   const HandleClose = () => {
@@ -11,19 +19,44 @@ const InlineNotification = ({title, message, type="error"}) => {
 
   if(!isOpen) { return null; }
 
-  return (
-    <div className={`inline-notification inline-notification--${type}`}>
-      <span className="inline-notification__title">{ title }</span>
-      { message }
+  const CloseButton = () => {
+    if(hideCloseButton) { return null; }
+
+    return (
       <button
         type="button"
         title="Close notification"
         aria-label="Close notification"
         onClick={HandleClose}
-        className="inline-notification__close-button"
+        className="inline-notification__main__right-container__close-button"
       >
-        <ImageIcon className="inline-notification__close-button__icon" icon={CloseIcon} />
+        <ImageIcon className="inline-notification__main__right-container__close-button__icon" icon={CloseIcon} />
       </button>
+    );
+  };
+
+  return (
+    <div className={`inline-notification inline-notification--${type}`}>
+      <div className="inline-notification__main">
+        {
+          title &&
+        <span className="inline-notification__main__title">{ title }</span>
+        }
+
+        { message }
+        <div className="inline-notification__main__right-container">
+          {
+            actionText && ActionCallback &&
+            <button className="inline-notification__main__right-container__action" onClick={ActionCallback}>
+              { actionText }
+            </button>
+          }
+          { CloseButton() }
+        </div>
+      </div>
+      <div className="inline-notification__subtext">
+        { subtext || "" }
+      </div>
     </div>
   );
 };

src/components/common/Inputs.js

@@ -28,12 +28,17 @@ export const Select = ({
       >
         {
           "label" in defaultOption && "value" in defaultOption ?
-            <option value={defaultOption.value}>{defaultOption.label}</option> : null
+            <option value={defaultOption.value} title={defaultOption.title}>{defaultOption.label}</option> : null
         }
         {
-          options.map(({value, label, disabled}) => (
-            <option value={value} key={value} disabled={disabled}>
-              { label }
+          options.map(option => (
+            <option
+              value={option.value}
+              key={option.value}
+              disabled={option.disabled}
+              title={option.title}
+            >
+              { option.label }
             </option>
           ))
         }

src/components/common/JSONView.js

@@ -0,0 +1,18 @@
+import React from "react";
+import {Copyable} from "Components/common/Copyable";
+
+const JSONView = ({json, copyable=false}) => {
+  return (
+    <pre className="json-view">
+      <span className="json-view__data">{ json }</span>
+      {
+        copyable &&
+        <div className="json-view__copy-button">
+          <Copyable copy={json} />
+        </div>
+      }
+    </pre>
+  );
+};
+
+export default JSONView;

src/components/common/Table.js

@@ -26,11 +26,22 @@ const Table = ({headers=[], rows=[]}) => {
       </div>
       <div className="table__body">
         {
-          rows.map((row) => (
-            <Link to={`./jobs/${row.id}`} key={`row-${row.id}`} className="table__body__row table__body__row--clickable" role="tr">
-              { TableRowColumns({row}) }
-            </Link>
-          ))
+          rows.map((row) => {
+            if(row.link) {
+              return (
+                <Link
+                  to={row.link}
+                  key={`row-${row.id}`}
+                  className="table__body__row table__body__row--clickable"
+                  role="tr"
+                >
+                  {TableRowColumns({row})}
+                </Link>
+              );
+            } else {
+              return TableRowColumns({row});
+            }
+          })
         }
       </div>
     </div>

src/components/common/Tooltip.js

@@ -3,20 +3,21 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import ImageIcon from "Components/common/ImageIcon";
 import InfoIcon from "Assets/icons/circle-info.svg";
 
-const Tooltip = ({open, icon, message, side="top", onClick, delayDuration}) => {
+const Tooltip = ({open, icon, message, side="top", onClick, delayDuration, className="", title=""}) => {
   const TooltipProvider = TooltipPrimitive.Provider;
   const TooltipRoot = TooltipPrimitive.Root;
   const TooltipTrigger = TooltipPrimitive.Trigger;
   const TooltipContent = TooltipPrimitive.Content;
 
   return (
-    <div className="tooltip">
+    <div className={`tooltip ${className}`}>
       <TooltipProvider delayDuration={delayDuration}>
         <TooltipRoot open={open}>
           <TooltipTrigger asChild>
             <button
+              className="tooltip__button"
               type="button"
-              title="Copy to Clipboard"
+              title={title}
               onClick={onClick}
             >
               <ImageIcon className="tooltip__icon" icon={icon || InfoIcon} />