[FEAT] Code Artifacts UI screen

src/common/Editor/Editor.jsx

@@ -0,0 +1,92 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+import MonacoEditor from '@monaco-editor/react'
+import { Loader } from 'igz-controls/components'
+import { loader } from '@monaco-editor/react'
+
+import { getScssVariableValue } from 'igz-controls/utils/common.util'
+
+loader.init().then(monaco => {
+  const alabasterColor = getScssVariableValue('--alabasterColor')
+  const mischkaColor = getScssVariableValue('--mischkaColor')
+  const spunPearlColor = getScssVariableValue('--spunPearlColor')
+  const whiteSolidColor = getScssVariableValue('--whiteSolidColor')
+
+  monaco.editor.defineTheme('custom-theme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': alabasterColor,
+      'editorGutter.background': alabasterColor,
+      'editor.lineHighlightBackground': whiteSolidColor,
+      'editorLineNumber.foreground': spunPearlColor,
+      'editor.selectionBackground': mischkaColor
+    }
+  })
+})
+
+const Editor = ({ value, language, readOnly = true, contextmenu = false }) => {
+  return (
+    <MonacoEditor
+      height="100%"
+      language={language || 'plaintext'}
+      theme="custom-theme"
+      value={value}
+      wrapperProps={{
+        style: {
+          display: 'flex',
+          position: 'relative',
+          textAlign: 'initial',
+          width: '100%'
+        }
+      }}
+      options={{
+        automaticLayout: true,
+        bracketPairColorization: { enabled: true },
+        contextmenu: contextmenu,
+        fontFamily: "'Fira Code', 'Menlo', monospace",
+        fontLigatures: true,
+        fontSize: 14,
+        guides: { bracketPairs: true },
+        minimap: { enabled: false },
+        readOnly: readOnly,
+        renderLineHighlight: 'all',
+        scrollBeyondLastLine: false,
+        scrollbar: {
+          verticalScrollbarSize: 4,
+          horizontalScrollbarSize: 4
+        }
+      }}
+      loading={<Loader section />}
+    />
+  )
+}
+
+Editor.propTypes = {
+  contextmenu: PropTypes.bool,
+  value: PropTypes.string.isRequired,
+  language: PropTypes.string,
+  readOnly: PropTypes.bool
+}
+
+export default Editor

src/common/Editor/editor.util.js

@@ -0,0 +1,63 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+export const commonLanguages = {
+  cpp: 'cpp',
+  c: 'cpp',
+  h: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  hpp: 'cpp',
+  hh: 'cpp',
+  hxx: 'cpp',
+  csharp: 'csharp',
+  cs: 'csharp',
+  go: 'go',
+  java: 'java',
+  javascript: 'javascript',
+  js: 'javascript',
+  jsx: 'javascript',
+  python: 'python',
+  py: 'python',
+  r: 'r',
+  ruby: 'ruby',
+  rb: 'ruby',
+  scala: 'scala',
+  shell: 'shell',
+  sh: 'shell',
+  bash: 'shell',
+  sql: 'sql',
+  mysql: 'sql',
+  pgsql: 'sql',
+  typescript: 'typescript',
+  ts: 'typescript',
+  tsx: 'typescript'
+}
+
+export const getEditorLanguage = (fileFormat, descriptiveLanguage) => {
+  if (commonLanguages[fileFormat]) {
+    return commonLanguages[fileFormat]
+  }
+
+  if (descriptiveLanguage) {
+    return descriptiveLanguage.split(':')[0]
+  }
+
+  return 'plaintext'
+}

src/components/ArtifactsPreview/ArtifactsPreview.jsx

@@ -25,7 +25,7 @@ import ArtifactsPreviewView from './ArtifactsPreviewView'
 import NoData from '../../common/NoData/NoData'
 import { Loader } from 'igz-controls/components'
 
-const ArtifactsPreview = ({ className = '', noData, preview }) => {
+const ArtifactsPreview = ({ className = '', noData, preview, popupButton }) => {
   const [showErrorBody, setShowErrorBody] = useState(false)
   const artifactsPreviewClasses = classnames('artifact-preview', className)
 
@@ -44,6 +44,7 @@ const ArtifactsPreview = ({ className = '', noData, preview }) => {
           preview={previewItem}
           setShowErrorBody={setShowErrorBody}
           showErrorBody={showErrorBody}
+          popupButton={popupButton}
         />
       ))}
     </>
@@ -66,7 +67,8 @@ ArtifactsPreview.propTypes = {
         content: PropTypes.any.isRequired
       })
     })
-  ).isRequired
+  ).isRequired,
+  popupButton: PropTypes.element
 }
 
 export default ArtifactsPreview

src/components/ArtifactsPreview/ArtifactsPreviewView.jsx

@@ -23,14 +23,22 @@ import Prism from 'prismjs'
 
 import DetailsResults from '../DetailsResults/DetailsResults'
 import PreviewError from './PreviewError/PreviewError'
+import CodePreview from './CodePreview/CodePreview'
+import Download from '../../common/Download/Download'
 import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
 import WarningMessage from '../../common/WarningMessage/WarningMessage'
 
 import { ARTIFACT_PREVIEW_TABLE_ROW_LIMIT, ERROR_STATE, UNKNOWN_STATE } from '../../constants'
 
 import './artifactsPreview.scss'
 
-const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorBody }) => {
+const ArtifactsPreviewView = ({
+  className,
+  preview,
+  setShowErrorBody,
+  showErrorBody,
+  popupButton
+}) => {
   const [showWarningMsg, setShowWarningMsg] = useState(true)
   const content = useMemo(
     () =>
@@ -47,7 +55,7 @@ const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorB
       {showWarningMsg && preview.warningMsg && (
         <WarningMessage message={preview.warningMsg} handleClose={() => setShowWarningMsg(false)} />
       )}
-      <div className="artifact-preview__wrapper">
+      <div className={`artifact-preview__wrapper artifact-preview__wrapper-${preview?.type}`}>
         {preview.header && (
           <div className="artifact-preview__header">
             <h5 className="artifact-preview__header-title">{preview.header}</h5>
@@ -113,6 +121,9 @@ const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorB
               {preview?.type === 'text' && (
                 <div className="artifact-preview__text">{preview?.data.content}</div>
               )}
+              {preview?.type === 'code' && (
+                <CodePreview preview={preview} popupButton={popupButton} />
+              )}
               {preview?.type === 'html' && (
                 <iframe src={preview?.data.content} frameBorder="0" title="Preview" />
               )}
@@ -145,6 +156,22 @@ const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorB
                   alt="preview"
                 />
               )}
+              {preview?.type === 'archive' && (
+                <div className="artifact-preview__archive">
+                  <span className="artifact-preview__archive-text">
+                    This artifact is an archive (.{preview?.data?.fileFormat})
+                  </span>
+                  <div className="artifact-preview__archive-download">
+                    <Download
+                      path={preview?.data?.path}
+                      user={preview?.data?.user}
+                      projectName={preview?.data?.projectName}
+                      withoutIcon
+                    />
+                    <span> to view contents</span>
+                  </div>
+                </div>
+              )}
               {preview?.type === UNKNOWN_STATE && (
                 <h3 className="artifact-preview__no-data">
                   {preview?.data?.content ? preview?.data.content : 'No preview'}
@@ -162,7 +189,8 @@ ArtifactsPreviewView.propTypes = {
   className: PropTypes.string.isRequired,
   preview: PropTypes.object.isRequired,
   setShowErrorBody: PropTypes.func.isRequired,
-  showErrorBody: PropTypes.bool.isRequired
+  showErrorBody: PropTypes.bool.isRequired,
+  popupButton: PropTypes.element
 }
 
 export default ArtifactsPreviewView

src/components/ArtifactsPreview/CodePreview/CodePreview.jsx

@@ -0,0 +1,112 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Editor from '../../../common/Editor/Editor'
+import { CopyToClipboard } from 'igz-controls/components'
+import { getEditorLanguage } from '../../../common/Editor/editor.util'
+
+import './codePreview.scss'
+
+const CodePreview = ({ preview, popupButton = null }) => {
+  const { content, fileFormat } = preview?.data || {}
+  const { artifact } = preview || {}
+  const code_type = artifact?.code_type || artifact?.spec?.code_type
+  const requirements = artifact?.requirements || artifact?.spec?.requirements
+  const language = artifact?.language || artifact?.spec?.language
+  const artifactName =
+    preview?.header || artifact?.name || artifact?.db_key || preview?.artifactName
+
+  const renderRequirements = requirements => {
+    if (!requirements) return null
+
+    const reqArray = Array.isArray(requirements) ? requirements : [requirements]
+
+    return reqArray.map((req, idx) => (
+      <span key={idx} className="code-preview__requirement-chip">
+        {req}
+      </span>
+    ))
+  }
+
+  return (
+    <div className="code-preview">
+      {artifact.kind && (
+        <div className="code-preview__header">
+          <div className="code-preview__header-title">
+            <div className="code-preview__header-title-container">
+              {artifactName && <span className="code-preview__name">{artifactName}</span>}
+              {code_type && <span className="code-preview__kind-chip">{code_type}</span>}
+            </div>
+            {popupButton}
+          </div>
+          {(language || requirements) && (
+            <div className="code-preview__header-details">
+              {language && (
+                <span className="code-preview__language">
+                  Language: <span className="code-preview__language-value">{language}</span>
+                </span>
+              )}
+              {language && requirements && <span className="code-preview__separator"> | </span>}
+              {requirements && (
+                <span className="code-preview__requirements">
+                  Requirements: {renderRequirements(requirements)}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      <div className="code-preview__body">
+        <div className="code-preview__editor-container">
+          <Editor value={content} language={getEditorLanguage(fileFormat, language)} />
+        </div>
+        <div className="code-preview__actions">
+          <CopyToClipboard textToCopy={content} tooltipText="Copy" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+CodePreview.propTypes = {
+  preview: PropTypes.shape({
+    header: PropTypes.string,
+    artifact: PropTypes.shape({
+      name: PropTypes.string,
+      db_key: PropTypes.string,
+      kind: PropTypes.string,
+      language: PropTypes.string,
+      spec: PropTypes.shape({
+        language: PropTypes.string,
+        requirements: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
+      })
+    }),
+    data: PropTypes.shape({
+      content: PropTypes.string,
+      fileFormat: PropTypes.string
+    }),
+    artifactName: PropTypes.string
+  }).isRequired,
+  popupButton: PropTypes.element
+}
+
+export default CodePreview