Merge pull request #245 from ynput/enhancement/ynput_cloud_support

Ynput Cloud support

src/components/Menu/Menus/AppMenu.jsx

@@ -3,7 +3,7 @@ import InstallerDownload from '/src/components/InstallerDownload/InstallerDownlo
 import Menu from '../MenuComponents/Menu'
 import { confirmDialog } from 'primereact/confirmdialog'
 import { useRestartServerMutation } from '/src/services/restartServer'
-import YnputConnector from '/src/components/YnputConnect/YnputConnector'
+import YnputConnector from '/src/components/YnputCloud/YnputConnector'
 import { useRestartOnBoardingMutation } from '/src/services/onBoarding/onBoarding'
 import { toast } from 'react-toastify'
 
@@ -105,7 +105,14 @@ export const AppMenu = ({ user, ...props }) => {
   return (
     <>
       <Menu menu={items} footer={ayonClient.settings?.version} {...props} />
-      {isAdmin && <YnputConnector redirect={location.pathname + '/appMenu'} smallLogo />}
+      {isAdmin && (
+        <YnputConnector
+          redirect={location.pathname + '/appMenu'}
+          smallLogo
+          darkMode
+          showDisconnect={false}
+        />
+      )}
     </>
   )
 }

src/components/YnputConnect/YnputConnect.styled.js → src/components/YnputCloud/YnputCloud.styled.js

@@ -35,10 +35,25 @@ export const HeaderButton = styled(ayonButton)`
 
   .icon {
     color: var(--md-sys-color-on-tertiary);
-    font-size: 2rem;
+    font-size: 1.5rem;
     font-variation-settings: 'FILL' 1;
   }
 
+  /* if $darkMode show inverse colors */
+  ${({ $darkMode }) =>
+    $darkMode &&
+    css`
+      background-color: var(--md-sys-color-surface-container-lowest);
+      color: var(--md-sys-color-on-surface);
+      &:hover {
+        background-color: var(--md-sys-color-surface-container-low);
+      }
+
+      .icon {
+        color: var(--md-sys-color-on-surface);
+      }
+    `}
+
   /* when loading show shimmer */
   ${({ $isLoading }) =>
     $isLoading &&
@@ -72,7 +87,10 @@ export const Container = styled.div`
   display: grid;
   flex-direction: column;
   align-items: center;
-  background-color: var(--md-sys-color-tertiary-container);
+  background-color: ${({ $darkMode }) =>
+    $darkMode
+      ? 'var(--md-sys-color-surface-container-lowest)'
+      : 'var(--md-sys-color-tertiary-container)'};
   border-radius: 8px;
   gap: 0;
 `

src/components/YnputConnect/YnputConnectButton.jsx → src/components/YnputCloud/YnputCloudButton.jsx

@@ -1,25 +1,25 @@
 import React from 'react'
-import * as Styled from './YnputConnect.styled'
+import * as Styled from './YnputCloud.styled'
 import { Icon, Spacer } from '@ynput/ayon-react-components'
 import Type from '/src/theme/typography.module.css'
+import CloudLogo from '/src/svg/CloudLogo'
 
-const YnputConnectButton = React.forwardRef(
-  ({ isConnected, showStatus, showDropdown, isOpen, isLoading, smallLogo, ...props }, ref) => {
+const YnputCloudButton = React.forwardRef(
+  (
+    { isConnected, showStatus, showDropdown, isOpen, isLoading, smallLogo, darkMode, ...props },
+    ref,
+  ) => {
     return (
       <Styled.HeaderButton
         {...props}
         ref={ref}
         $disabled={props.disabled || isLoading}
         $isLoading={isLoading}
         $isOpen={isOpen}
+        $darkMode={darkMode}
         style={{ borderRadius: 8 }}
       >
-        <img
-          src="/ynput-connect-logo.svg"
-          style={{
-            height: smallLogo ? 20 : 29,
-          }}
-        />
+        <CloudLogo style={{ height: smallLogo ? 20 : 29 }} darkMode={darkMode} />
         {(showStatus || showDropdown) && (
           <Styled.Status className="status">
             {showStatus && (
@@ -39,6 +39,6 @@ const YnputConnectButton = React.forwardRef(
   },
 )
 
-YnputConnectButton.displayName = 'YnputConnectButton'
+YnputCloudButton.displayName = 'YnputCloudButton'
 
-export default YnputConnectButton
+export default YnputCloudButton

src/components/YnputConnect/YnputConnector.jsx → src/components/YnputCloud/YnputConnector.jsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react'
 import { Section } from '@ynput/ayon-react-components'
 import { StringParam, useQueryParam, withDefault } from 'use-query-params'
-import YnputConnectButton from './YnputConnectButton'
+import YnputCloudButton from './YnputCloudButton'
 import {
   useConnectYnputMutation,
   useDiscountYnputMutation,
   useGetYnputConnectionsQuery,
 } from '/src/services/ynputConnect'
 import LoadingPage from '/src/pages/LoadingPage'
-import * as Styled from './YnputConnect.styled'
+import * as Styled from './YnputCloud.styled'
 import { useLocation } from 'react-router'
 import { useSelector } from 'react-redux'
 
@@ -27,6 +27,7 @@ const YnputConnector = ({
   onClick,
   styleContainer,
   user,
+  darkMode,
   ...props
 }) => {
   const location = useLocation()
@@ -101,9 +102,11 @@ const YnputConnector = ({
     }
   }
 
+  if (isLoading) return null
+
   return (
-    <Styled.Container style={styleContainer}>
-      <YnputConnectButton
+    <Styled.Container style={styleContainer} $darkMode={isConnected && darkMode}>
+      <YnputCloudButton
         disabled={disabled}
         isLoading={isLoadingConnect || isLoading}
         onClick={handleClick}
@@ -112,20 +115,21 @@ const YnputConnector = ({
         isConnected={isConnected}
         isOpen={isOpen}
         smallLogo={smallLogo}
+        darkMode={isConnected && darkMode}
         {...props}
       />
 
       <Styled.DropdownContainer $isOpen={isOpen}>
         <Styled.Dropdown className="dropdown">
-          <span>Name: {connectData?.userName || user?.name}</span>
-          <span>Email: {connectData?.userEmail || user?.email}</span>
-          <Styled.Footer>
-            {showDisconnect && (
+          <span>Instance: {connectData?.instanceName || '???'}</span>
+          <span>Organization: {connectData?.orgName || '???'}</span>
+          {showDisconnect && (
+            <Styled.Footer>
               <Styled.Button onClick={handleDisconnect} className="disconnect">
                 Disconnect
               </Styled.Button>
-            )}
-          </Styled.Footer>
+            </Styled.Footer>
+          )}
         </Styled.Dropdown>
       </Styled.DropdownContainer>
     </Styled.Container>

src/pages/OnBoarding/Step/BoostrapStart.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import * as Styled from '../util/OnBoardingStep.styled'
 
-import YnputConnector from '../../../components/YnputConnect/YnputConnector'
-import * as YnputConnect from '../../../components/YnputConnect/YnputConnect.styled'
+import YnputConnector from '/src/components/YnputCloud/YnputConnector'
+import * as YnputConnect from '/src/components/YnputCloud/YnputCloud.styled'
 
 export const BootstrapStart = ({
   nextStep,

src/pages/OnBoarding/Step/ConnectionDetails.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import * as Styled from '../util/OnBoardingStep.styled'
-import YnputConnector from '/src/components/YnputConnect/YnputConnector'
+import YnputConnector from '/src/components/YnputCloud/YnputConnector'
 
 export const ConnectionDetails = ({ Header, Body, Footer, userForm }) => {
   return (
@@ -10,7 +10,6 @@ export const ConnectionDetails = ({ Header, Body, Footer, userForm }) => {
       <YnputConnector
         initIsOpen={true}
         showDropdown={false}
-        showDisconnect={false}
         styleContainer={{ width: '70%', margin: '8px 0' }}
         style={{ width: '100%' }}
         user={userForm}

src/pages/OnBoarding/Step/Landing.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import * as Styled from '../util/OnBoardingStep.styled'
-import YnputConnector from '../../../components/YnputConnect/YnputConnector'
+import YnputConnector from '/src/components/YnputCloud/YnputConnector'
 
 export const Landing = ({ Header, Body, nextStep, setUserForm, setIsConnecting }) => {
   const [showMore, setShowMore] = useState(false)
@@ -19,13 +19,13 @@ export const Landing = ({ Header, Body, nextStep, setUserForm, setIsConnecting }
       {showMore && (
         <>
           <Styled.More>
-            <Header>{`What is Ynput Connect?`}</Header>
+            <Header>{`What is Ynput Cloud?`}</Header>
             <Body>
-              AYON is a highly modular platform. Connecting your Ynput account to AYON lets us
+              AYON is a highly modular platform. Connecting your Ynput Cloud account to AYON lets us
               automatically download and setup all you need to take full advantage of AYON in your
               production.
               <br /> <br />
-              If you are in offline environment or you would rather download and install all the
+              If you are in an offline environment or you would rather download and install all the
               addons, desktop distribution and dependencies manually, you can skip this step.
             </Body>
             <Styled.Skip className="skip" onClick={(e) => nextStep(e, 1)}>

src/pages/SettingsPage/AddonInstall/AddonUpload.jsx

@@ -84,7 +84,7 @@ const AddonUpload = ({ onClose, type = 'addon', onInstall }) => {
       console.log('finished: created ' + type)
       return true
     } catch (error) {
-      setErrorMessage(error?.data?.detail)
+      setErrorMessage(error?.response?.data?.detail)
       console.error(error)
       return false
     }
@@ -215,7 +215,7 @@ const AddonUpload = ({ onClose, type = 'addon', onInstall }) => {
       setIsUploading(false)
       setIsComplete(true)
       dispatch(onUploadFinished())
-      setErrorMessage('ERROR: ' + error?.response?.data?.traceback)
+      setErrorMessage('ERROR: ' + error?.response?.data?.detail)
     }
   }
 

src/pages/SettingsPage/Secrets.jsx

@@ -116,9 +116,16 @@ const Secrets = () => {
           <SecretItem name="" value="" stored={false} />
           <h2>Stored secrets</h2>
           {data?.length &&
-            data.map((secret) => (
-              <SecretItem key={secret.name} name={secret.name} value={secret.value} stored={true} />
-            ))}
+            data
+              .filter((secret) => secret.name !== 'ynput_cloud_key')
+              .map((secret) => (
+                <SecretItem
+                  key={secret.name}
+                  name={secret.name}
+                  value={secret.value}
+                  stored={true}
+                />
+              ))}
         </SecretList>
       </ScrollPanel>
     </Section>

src/svg/CloudLogo.jsx

@@ -0,0 +1,49 @@
+const CloudLogo = ({ darkMode, ...props }) => (
+  <svg viewBox="0 0 1402 254" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g clipPath="url(#clip0_138_97)">
+      <path
+        d="M849.75 181.5C864.5 181.5 877 176.5 886.75 166.25V180.5C877 188.25 863.5 193 849.5 193C813.5 193 784.25 163.5 784.25 127.25C784.25 90.9999 813.5 61.4999 849.5 61.4999C863.5 61.4999 877 66.2499 886.75 73.9999V88.2499C877 77.9999 864.5 72.9999 849.75 72.9999C820.25 72.9999 796.5 96.9999 796.5 127.25C796.5 157.5 820.25 181.5 849.75 181.5ZM923.192 -0.000151677H935.692V190H923.192V-0.000151677ZM1036.75 193C1001.25 193 972 163.5 972 127.25C972 90.9999 1001.25 61.4999 1036.75 61.4999C1072.25 61.4999 1101.5 90.9999 1101.5 127.25C1101.5 163.5 1072.25 193 1036.75 193ZM1036.75 72.7499C1007.75 72.7499 984.5 96.9999 984.5 127.25C984.5 157.5 1007.75 181.75 1036.75 181.75C1065.75 181.75 1089 157.5 1089 127.25C1089 96.9999 1065.75 72.7499 1036.75 72.7499ZM1223.54 140.75V64.4999H1236.04V190H1223.54V167.25C1217.29 182 1201.54 193 1182.29 193C1152.29 193 1136.79 170.25 1136.79 143.5V64.4999H1149.29V141C1149.29 163.75 1161.04 181.5 1186.04 181.5C1208.54 181.5 1223.54 163.5 1223.54 140.75ZM1336.28 61.4999C1359.53 61.4999 1381.78 76.7499 1389.28 96.9999V-0.000151677H1401.78V190H1389.28V157.5C1381.78 177.75 1359.53 193 1336.28 193C1299.78 193 1272.53 163.25 1272.53 127.25C1272.53 91.2499 1299.78 61.4999 1336.28 61.4999ZM1337.53 72.7499C1308.53 72.7499 1285.03 97.2499 1285.03 127.25C1285.03 157.25 1308.53 181.75 1337.53 181.75C1366.28 181.75 1389.78 157.25 1389.78 127.25C1389.78 97.2499 1366.28 72.7499 1337.53 72.7499Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M199.039 190.012H166.045V61.9219H199.039V76.9329C205.789 66.6754 219.038 58.9238 235.287 58.9238C264.782 58.9238 282.031 79.1846 282.031 107.706V190.012H249.037V116.458C249.037 101.451 240.537 88.6915 224.038 88.6915C208.289 88.6915 199.039 101.451 199.039 116.712V190.012Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M349.028 125.965C349.028 147.981 364.777 164.744 385.276 164.744C405.525 164.744 421.52 147.981 421.52 125.965C421.52 103.949 405.525 87.4409 385.276 87.4409C364.777 87.4409 349.028 103.949 349.028 125.965ZM454.018 125.965C454.018 163.993 427.024 193.01 391.775 193.01C372.776 193.01 357.027 183.253 350.028 171.999V242.547H317.029V61.9221H350.028V79.9312C357.027 68.6771 372.776 58.9199 391.775 58.9199C427.024 58.9199 454.018 88.1873 454.018 125.965Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M562.513 61.9224H595.511V190.012H562.513V175.001C555.763 185.259 542.514 193.01 526.269 193.01C496.77 193.01 480.021 172.75 480.021 144.479V61.9224H513.015V135.973C513.015 151.234 521.015 163.743 537.514 163.743C553.263 163.743 562.513 150.984 562.513 135.973V61.9224Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M689.751 164.489C697 164.489 703.5 162.238 709 157.738V187.006C702.504 190.759 692.755 193.01 683.251 193.01C657.256 193.01 638.007 177.753 638.007 148.477V88.1873H617.009V61.918H638.007V32.1503L671.006 21.6426V61.918H705.254V88.1873H671.006V144.975C671.006 157.738 678.005 164.489 689.751 164.489Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M73.8961 61.9224L36.9481 125.965L0 61.9224H73.8961Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M147.788 61.9224L110.84 125.965L73.8918 61.9224H147.788Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M110.84 125.965L73.8917 190.008L36.9478 125.965H110.84Z"
+        fill={darkMode ? 'white' : 'black'}
+      />
+      <path
+        d="M73.8961 190.012L36.9481 254.055L0 190.012H73.8961Z"
+        fill={darkMode ? '#00D7A0' : 'black'}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_138_97">
+        <rect width="1402" height="254" fill={darkMode ? 'white' : 'black'} />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default CloudLogo