Merge pull request #118 from platformatic/15-add-missing-details-for-…

…template-and-plugins 15 add missing details for template and plugins
platformatic · Dec 22, 2023 · dbd56b7 · dbd56b7
2 parents 685269b + 2e17400
commit dbd56b7
Show file tree

Hide file tree

Showing 22 changed files with 396 additions and 89 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
     "@fastify/error": "^3.4.1",
-    "@platformatic/ui-components": "^0.1.130",
+    "@platformatic/ui-components": "^0.1.137",
     "autoprefixer": "^10.4.16",
     "boring-name-generator": "^1.0.3",
     "electron-log": "^5.0.1",

diff --git a/src/renderer/src/components/plugins/Plugin.jsx b/src/renderer/src/components/plugins/Plugin.jsx
@@ -5,31 +5,64 @@ import Icons from '@platformatic/ui-components/src/components/icons'
 import typographyStyles from '~/styles/Typography.module.css'
 import commonStyles from '~/styles/CommonStyles.module.css'
 import styles from './Plugin.module.css'
-import { Button } from '@platformatic/ui-components'
+import { Button, ModalDirectional } from '@platformatic/ui-components'
+import { useState } from 'react'
+import PluginDetail from './PluginDetail'
 
-function Plugin ({ name, onClick, isSelected }) {
+function Plugin ({ name, onClickCardPlugin, isSelected, description, tags, author }) {
+  const [showModalDetail, setShowModalDetail] = useState(false)
   let className = `${commonStyles.smallFlexBlock} ${styles.container} `
   className += isSelected ? styles.selected : styles.unSelected
 
+  function handleShowModal (event) {
+    event.stopPropagation()
+    setShowModalDetail(true)
+  }
+
+  function handleClickSelectPluginDetail () {
+    setShowModalDetail(false)
+    onClickCardPlugin()
+  }
+
   return (
-    <div className={className} onClick={() => onClick()} {...{ 'data-cy': 'template' }}>
-      <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth} ${styles.overflowHidden}`}>
-        <Icons.StackablesPluginIcon color={TERTIARY_BLUE} size={MEDIUM} />
-        <p
-          className={`${typographyStyles.desktopHeadline4} ${typographyStyles.textWhite} ${styles.ellipsis}`}
-          title={name}
-        >
-          {name}
-        </p>
+    <>
+      <div className={className} onClick={() => onClickCardPlugin()} {...{ 'data-cy': 'template' }}>
+        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth} ${styles.overflowHidden}`}>
+          <Icons.StackablesPluginIcon color={TERTIARY_BLUE} size={MEDIUM} />
+          <p
+            className={`${typographyStyles.desktopHeadline4} ${typographyStyles.textWhite} ${styles.ellipsis}`}
+            title={name}
+          >
+            {name}
+          </p>
+        </div>
+        <Button
+          type='button'
+          color={WHITE}
+          label='View Details'
+          platformaticIconAfter={{ iconName: 'ArrowLongRightIcon', color: WHITE }}
+          bordered={false}
+          classes={commonStyles.noPadding}
+          onClick={(event) => handleShowModal(event)}
+        />
       </div>
-      <Button
-        color={WHITE}
-        label='View Details'
-        platformaticIconAfter={{ iconName: 'ArrowLongRightIcon', color: WHITE }}
-        bordered={false}
-        classes={commonStyles.noPadding}
-      />
-    </div>
+      {showModalDetail && (
+        <ModalDirectional
+          key={name}
+          setIsOpen={() => setShowModalDetail(false)}
+          title='Back to Plugin'
+          titleClassName={`${typographyStyles.desktopBody} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}
+        >
+          <PluginDetail
+            name={name}
+            description={description}
+            tags={tags}
+            author={author}
+            onClickSelectPlugin={() => handleClickSelectPluginDetail()}
+          />
+        </ModalDirectional>
+      )}
+    </>
   )
 }
 
@@ -41,12 +74,28 @@ Plugin.propTypes = {
   /**
    * isSelected
     */
-  isSelected: PropTypes.bool
+  isSelected: PropTypes.bool,
+  /**
+   * description
+    */
+  description: PropTypes.string,
+  /**
+   * tags
+    */
+  tags: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * author
+    */
+  author: PropTypes.string
+
 }
 
 Plugin.defaultProps = {
   name: '',
-  isSelected: false
+  isSelected: false,
+  description: '',
+  tags: [],
+  author: ''
 }
 
 export default Plugin
diff --git a/src/renderer/src/components/plugins/PluginDetail.jsx b/src/renderer/src/components/plugins/PluginDetail.jsx
@@ -0,0 +1,94 @@
+'use strict'
+import PropTypes from 'prop-types'
+import typographyStyles from '~/styles/Typography.module.css'
+import commonStyles from '~/styles/CommonStyles.module.css'
+import styles from './PluginDetail.module.css'
+import Title from '~/components/ui/Title'
+import { Button, HorizontalSeparator, Icons, Tag } from '@platformatic/ui-components'
+import { MARGIN_0, OPACITY_30, RICH_BLACK, SMALL, WHITE } from '@platformatic/ui-components/src/components/constants'
+
+function PluginDetail ({ name, description, tags, author, onClickSelectPlugin }) {
+  return (
+    <div className={styles.container}>
+      <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`}>
+        <div className={commonStyles.mediumFlexBlock}>
+          <Title
+            title={name}
+            iconName='StackablesPluginIcon'
+            dataAttrName='cy'
+            dataAttrValue='modal-title'
+          />
+          <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{description}</p>
+          <div className={`${commonStyles.mediumFlexRow} ${commonStyles.fullWidth} ${commonStyles.itemsCenter} `}>
+            <div className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter}`}>
+              <Icons.UserComputerIcon color={WHITE} size={SMALL} />
+              <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{author}</span>
+            </div>
+          </div>
+        </div>
+
+        <HorizontalSeparator marginBottom={MARGIN_0} marginTop={MARGIN_0} color={WHITE} opacity={OPACITY_30} />
+        {tags.length > 0 && (
+          <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
+            <h4 className={`${typographyStyles.desktopHeadline4} ${typographyStyles.textWhite}`}>Tags</h4>
+            <div className={`${commonStyles.smallFlexRow} ${commonStyles.fullWidth}`}>
+              {tags.map(tag =>
+                <Tag
+                  key={tag}
+                  text={tag.toUpperCase()}
+                  textClassName={`${typographyStyles.desktopOtherOverlineNormal} ${typographyStyles.textWhite}`}
+                  backgroundColor={WHITE}
+                  bordered={false}
+                  opaque={OPACITY_30}
+                  fullRounded
+                />)}
+            </div>
+
+          </div>
+        )}
+      </div>
+
+      <Button
+        classes={commonStyles.buttonPadding}
+        label={`Select ${name}`}
+        backgroundColor={WHITE}
+        color={RICH_BLACK}
+        fullWidth
+        bordered={false}
+        onClick={() => onClickSelectPlugin()}
+      />
+    </div>
+  )
+}
+
+PluginDetail.propTypes = {
+  /**
+   * name
+    */
+  name: PropTypes.string.isRequired,
+  /**
+   * description
+    */
+  description: PropTypes.string,
+  /**
+   * tags
+    */
+  tags: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * author
+    */
+  author: PropTypes.string,
+  /**
+   * onClickSelectPlugin
+    */
+  onClickSelectPlugin: PropTypes.func
+}
+
+PluginDetail.defaultProps = {
+  description: '',
+  tags: [],
+  author: '',
+  onClickSelectPlugin: () => {}
+}
+
+export default PluginDetail
diff --git a/src/renderer/src/components/plugins/PluginDetail.module.css b/src/renderer/src/components/plugins/PluginDetail.module.css
@@ -0,0 +1,3 @@
+.container {
+  @apply flex flex-col justify-between h-full w-full
+}
diff --git a/src/renderer/src/components/plugins/PluginEnvVarsForm.jsx b/src/renderer/src/components/plugins/PluginEnvVarsForm.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { BorderedBox, Forms } from '@platformatic/ui-components'
 import commonStyles from '~/styles/CommonStyles.module.css'
 import typographyStyles from '~/styles/Typography.module.css'
-import { OPACITY_30, TRANSPARENT, WHITE } from '@platformatic/ui-components/src/components/constants'
+import { OPACITY_30, RICH_BLACK, TRANSPARENT, WHITE } from '@platformatic/ui-components/src/components/constants'
 
 function PluginEnvVarsForm ({
   configuredServices,
@@ -34,7 +34,7 @@ function PluginEnvVarsForm ({
           value={pluginFound.form[element].value}
           onChange={onChange}
           errorMessage={pluginFound.validations.formErrors[element]}
-          backgroundTransparent
+          backgroundColor={RICH_BLACK}
           inputTextClassName={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}
           verticalPaddingClassName={commonStyles.noVerticalPadding}
           dataAttrName='cy'

diff --git a/src/renderer/src/components/plugins/SelectPlugin.jsx b/src/renderer/src/components/plugins/SelectPlugin.jsx
@@ -133,7 +133,7 @@ function SelectPlugin ({ onClick, serviceName }) {
             <Plugin
               key={plugin.name}
               isSelected={pluginsSelected.find(pluginSelected => pluginSelected.name === plugin.name) !== undefined}
-              onClick={() => handleClickPlugin(plugin)}
+              onClickCardPlugin={() => handleClickPlugin(plugin)}
               {...plugin}
             />
           )}

diff --git a/src/renderer/src/components/services/EditService.jsx b/src/renderer/src/components/services/EditService.jsx
@@ -51,7 +51,7 @@ function EditService ({ name, onClickCancel, onClickConfirm }) {
           value={form.service}
           onChange={handleChange}
           errorMessage={validations.formErrors.service}
-          backgroundTransparent
+          backgroundColor={RICH_BLACK}
           inputTextClassName={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}
           verticalPaddingClassName={commonStyles.noVerticalPadding}
         />

diff --git a/src/renderer/src/components/steps/ConfigureApplication.jsx b/src/renderer/src/components/steps/ConfigureApplication.jsx
@@ -122,7 +122,7 @@ const ConfigureApplication = React.forwardRef(({ onNext, onBack }, ref) => {
                 value={form.port}
                 onChange={handleChange}
                 errorMessage={validations.formErrors.port}
-                backgroundTransparent
+                backgroundColor={RICH_BLACK}
                 inputTextClassName={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}
                 verticalPaddingClassName={commonStyles.noVerticalPadding}
               />

diff --git a/src/renderer/src/components/steps/CreateApplication.jsx b/src/renderer/src/components/steps/CreateApplication.jsx
@@ -100,7 +100,7 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
               value={form.application}
               onChange={handleChangeApplication}
               errorMessage={validations.formErrors.application}
-              backgroundTransparent
+              backgroundColor={RICH_BLACK}
             />
           </Forms.Field>
           <Forms.Field title='Select destination folder' titleColor={WHITE} required>
@@ -111,7 +111,7 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
               onClick={async () => handleOpenFolder()}
               color={WHITE}
               backgroundColor={TRANSPARENT}
-              classes={`${commonStyles.buttonPadding} cy-action-open-folder`}
+              classes={`${commonStyles.buttonPaddingBordered} ${typographyStyles.desktopBody} ${typographyStyles.textWhite} cy-action-open-folder`}
             />
             <Forms.Input
               placeholder='Select the destination folder of your application using the Button'
@@ -120,7 +120,7 @@ const CreateApplication = React.forwardRef(({ onNext }, ref) => {
               value={form.folder}
               onChange={mockUse ? handleChange : () => {}}
               errorMessage={validations.formErrors.folder}
-              backgroundTransparent
+              backgroundColor={RICH_BLACK}
               readOnly={!mockUse}
             />
           </Forms.Field>

diff --git a/src/renderer/src/components/steps/GeneratingApplication.jsx b/src/renderer/src/components/steps/GeneratingApplication.jsx
@@ -77,7 +77,7 @@ const GeneratingApplication = React.forwardRef(({ onRestartProcess }, ref) => {
   }
 
   return !restartInProgress && (
-    <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`} ref={ref}>
+    <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`} ref={ref}>
       <div className={commonStyles.mediumFlexBlock}>
         <Title
           title={`Generating ${formData.createApplication.application}`}
@@ -89,6 +89,16 @@ const GeneratingApplication = React.forwardRef(({ onRestartProcess }, ref) => {
           We are generating your app. <br />Once all the steps are done you will be able to complete and use your new application.
         </p>
       </div>
+      <div className={`${commonStyles.smallFlexRow} ${commonStyles.fullWidth} ${commonStyles.justifyEnd}`}>
+        <Button
+          disabled={!appGenerated}
+          label='Copy Logs'
+          onClick={() => onClickCopyLogs()}
+          color={WHITE}
+          backgroundColor={RICH_BLACK}
+          classes={`${commonStyles.buttonPadding} cy-action-donwload-logs`}
+        />
+      </div>
       <BorderedBox classes={`${commonStyles.fullWidth} ${styles.content}`} backgroundColor={TRANSPARENT} borderColorOpacity={OPACITY_30} color={WHITE}>
         <div className={`${commonStyles.flexBlockNoGap} `}>
           {npmLogs.map((log, index) => renderLog(log, index))}
@@ -98,14 +108,6 @@ const GeneratingApplication = React.forwardRef(({ onRestartProcess }, ref) => {
         <CountDown status={countDownStatus} />
       </div>
       <div className={`${styles.buttonContainer} ${commonStyles.fullWidth}`}>
-        <Button
-          disabled={!appGenerated}
-          label='Copy Logs'
-          onClick={() => onClickCopyLogs()}
-          color={WHITE}
-          backgroundColor={RICH_BLACK}
-          classes={`${commonStyles.buttonPadding} cy-action-donwload-logs`}
-        />
         <Button
           disabled={!appGenerated}
           label='Continue'

diff --git a/src/renderer/src/components/steps/GeneratingApplication.module.css b/src/renderer/src/components/steps/GeneratingApplication.module.css
@@ -2,7 +2,7 @@
   @apply overflow-x-hidden overflow-y-auto max-h-[calc(100vH-22rem)] min-h-[calc(100vH-22rem)] lg:max-h-[calc(100vH-32rem)] lg:min-h-[calc(100vH-32rem)];
 }
 .buttonContainer {
-  @apply flex justify-between;
+  @apply flex justify-end;
 }
 
 .paddingStep {