Merge remote-tracking branch 'origin' into 432-Testing-Setup-Playwrig…

…ht-end-to-end-testing-and-write-first-tests
ynput · Aug 13, 2024 · 808c2d1 · 808c2d1
2 parents 034ad79 + 0dfbfac
commit 808c2d1
Show file tree

Hide file tree

Showing 75 changed files with 515 additions and 814 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -103,7 +103,7 @@ Notes
 - Avoid spinners
 - Avoid layout shifts when the data loads in.
 - Use skeleton shimmer placeholders.
-- Use `${getShimmerStyles}` in styled components.
+- Use `loading` class for loading shimmer.
 
 Example loading shimmer
 ![Image](https://github.com/ynput/ayon-frontend/assets/49156310/f589ca02-37a3-41e4-a64a-3e2062083407)
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "@rtk-query/codegen-openapi": "^1.2.0",
     "@rtk-query/graphql-request-base-query": "^2.3.1",
     "@uiw/react-textarea-code-editor": "^2.1.9",
-    "@ynput/ayon-react-components": "^1.5.7",
+    "@ynput/ayon-react-components": "^1.5.9",
     "axios": "^1.6.3",
     "chart.js": "^4.2.0",
     "clsx": "^2.1.1",

diff --git a/src/components/ActionsDropdown/ActionsDropdown.jsx b/src/components/ActionsDropdown/ActionsDropdown.jsx
@@ -19,7 +19,7 @@ const ActionsDropdown = ({ options, isLoading, onAction }) => {
   return (
     <StyledDropdown
       disabled={isLoading}
-      className={clsx('more', { isLoading: isLoading })}
+      className={clsx('more', { loading: isLoading })}
       options={options}
       value={[]}
       placeholder=""

diff --git a/src/components/ActionsDropdown/ActionsDropdown.styled.js b/src/components/ActionsDropdown/ActionsDropdown.styled.js
@@ -1,4 +1,4 @@
-import { Dropdown, getShimmerStyles } from '@ynput/ayon-react-components'
+import { Dropdown } from '@ynput/ayon-react-components'
 import styled from 'styled-components'
 
 export const StyledDropdown = styled(Dropdown)`
@@ -23,21 +23,6 @@ export const StyledDropdown = styled(Dropdown)`
       background-color: var(--md-sys-color-surface-container-highest-hover);
     }
   }
-
-  &.isLoading {
-    button {
-      position: relative;
-      background-color: unset;
-    }
-    ${getShimmerStyles()}
-    opacity: 1;
-    overflow: hidden;
-    border-radius: var(--border-radius-m);
-
-    .icon {
-      opacity: 0 !important;
-    }
-  }
 `
 
 export const DropdownItem = styled.div`

diff --git a/src/components/AddonIcon/AddonIcon.jsx b/src/components/AddonIcon/AddonIcon.jsx
@@ -15,7 +15,7 @@ const AddonIcon = ({ isPlaceholder, size, ...props }) => {
 
   const isLoading = isPlaceholder || imageLoading
   return (
-    <Styled.Icon className={clsx({ isLoading, isError: imageError })} $size={size}>
+    <Styled.Icon className={clsx({ loading: isLoading, isError: imageError })} $size={size}>
       {imageError || !props.src ? (
         <Icon icon="extension" />
       ) : (

diff --git a/src/components/AddonIcon/AddonIcon.styled.js b/src/components/AddonIcon/AddonIcon.styled.js
@@ -1,4 +1,3 @@
-import { getShimmerStyles } from '@ynput/ayon-react-components'
 import styled from 'styled-components'
 
 export const Icon = styled.div`
@@ -13,13 +12,8 @@ export const Icon = styled.div`
     object-fit: contain;
   }
 
-  &.isLoading {
-    ${getShimmerStyles(undefined, undefined, { opacity: 1 })}
+  &.loading {
     border-radius: 100%;
-    img {
-      opacity: 0;
-    }
-    overflow: hidden;
   }
 
   .icon {

diff --git a/src/components/CommentInput/helpers.jsx b/src/components/CommentInput/helpers.jsx
@@ -53,7 +53,7 @@ export const uploadFile = (file, projectName, onUploadProgress) => {
       .catch((error) => {
         reject({ error: 'Upload failed' })
         console.error('File upload:', error)
-        toast.error('Upload failed: ' + error.response.data.detail)
+        toast.error('Upload failed:' + JSON.stringify(error))
       })
   })
 }

diff --git a/src/components/Details/EntityDetailsHeader.jsx b/src/components/Details/EntityDetailsHeader.jsx
@@ -7,7 +7,6 @@ import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 import { OverflowField } from '@ynput/ayon-react-components'
 import copyToClipboard from '@helpers/copyToClipboard'
-import getShimmerStyles from '@/styles/getShimmerStyles'
 import { productTypes } from '@state/project'
 
 const ToolsStyled = styled.div`
@@ -19,16 +18,7 @@ const ToolsStyled = styled.div`
   margin-right: 1px;
 `
 
-const StyledLoading = styled.div`
-  width: 100%;
-  height: 37px;
-  border-radius: var(--border-radius-m);
-  position: relative;
-
-  ${getShimmerStyles()}
-`
-
-const EntityDetailsHeader = ({ values = [], tools, isLoading, hideThumbnail }) => {
+const EntityDetailsHeader = ({ values = [], tools, hideThumbnail }) => {
   const { folders, tasks } = useSelector((state) => state.project)
   const changes = useSelector((state) => state.editor.changes)
   const uri = useSelector((state) => state.context.uri)
@@ -82,39 +72,33 @@ const EntityDetailsHeader = ({ values = [], tools, isLoading, hideThumbnail }) =
   return (
     <DetailHeader>
       {!hideThumbnail && (
-        <StackedThumbnails
-          thumbnails={thumbnails}
-          isLoading={isLoading}
-          portalId={'editor-entity-details-container'}
-        />
+        <StackedThumbnails thumbnails={thumbnails} portalId={'editor-entity-details-container'} />
       )}
-      {isLoading ? (
-        <StyledLoading />
-      ) : (
-        <div style={{ overflowX: 'clip', paddingLeft: 3, marginLeft: -3 }}>
-          {!isMultiple ? (
-            <NameField
-              node={values[0]}
-              changes={changes}
-              styled
-              tasks={tasks}
-              folders={folders}
-              productTypes={productTypes}
-              style={{ display: 'flex', gap: 4, fontWeight: 'bold' }}
-              iconStyle={{ fontSize: 19, marginRight: 0 }}
-              prefix={`${values[0]?.product?.name}`}
-            />
-          ) : (
-            <span style={{ whiteSpace: 'nowrap' }}>Multiple Selected ({values.length})</span>
-          )}
-          <OverflowField
-            value={subTitle}
-            style={{ left: -3 }}
-            align="left"
-            onClick={() => copyToClipboard(breadcrumbs.join('/'), true)}
+
+      <div style={{ overflowX: 'clip', paddingLeft: 3, marginLeft: -3 }}>
+        {!isMultiple ? (
+          <NameField
+            node={values[0]}
+            changes={changes}
+            styled
+            tasks={tasks}
+            folders={folders}
+            productTypes={productTypes}
+            style={{ display: 'flex', gap: 4, fontWeight: 'bold' }}
+            iconStyle={{ fontSize: 19, marginRight: 0 }}
+            prefix={`${values[0]?.product?.name}`}
           />
-        </div>
-      )}
+        ) : (
+          <span style={{ whiteSpace: 'nowrap' }}>Multiple Selected ({values.length})</span>
+        )}
+        <OverflowField
+          value={subTitle}
+          style={{ left: -3 }}
+          align="left"
+          onClick={() => copyToClipboard(breadcrumbs.join('/'), true)}
+        />
+      </div>
+
       {tools && <ToolsStyled>{tools}</ToolsStyled>}
     </DetailHeader>
   )

diff --git a/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx b/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx
@@ -60,7 +60,7 @@ const EmptyPlaceholder = ({ icon, message, error, children }: EmptyPlaceholderPr
       <Placeholder className={'isError'}>
         <Icon icon="error" className="placeholder-icon" />
         <h3 className={Typography.titleLarge}>Something went wrong.</h3>
-        <span className="error-message">ERROR: {error}</span>
+        <span className="error-message">ERROR: {JSON.stringify(message)}</span>
         <span>This should not happen. Please send a screenshot to the Ynput team!</span>
         {children}
       </Placeholder>
@@ -70,7 +70,7 @@ const EmptyPlaceholder = ({ icon, message, error, children }: EmptyPlaceholderPr
   return (
     <Placeholder>
       <Icon icon={icon} className="placeholder-icon" />
-      <h3 className={Typography.titleLarge}>{message}</h3>
+      <h3 className={Typography.titleLarge}>{JSON.stringify(message)}</h3>
       {children}
     </Placeholder>
   )

diff --git a/src/components/EntityPath/EntityPath.styled.ts b/src/components/EntityPath/EntityPath.styled.ts
@@ -1,4 +1,3 @@
-import { getShimmerStyles } from '@ynput/ayon-react-components'
 import styled, { css } from 'styled-components'
 
 export const Path = styled.div`
@@ -16,18 +15,6 @@ export const Path = styled.div`
   }
 
   flex: 1;
-
-  &.loading {
-    overflow: hidden;
-    & > * {
-      opacity: 0;
-      &::before {
-        opacity: 0;
-      }
-    }
-
-    ${getShimmerStyles()}
-  }
 `
 
 export const SegmentWrapper = styled.div`

diff --git a/src/components/ListItem/ListItem.styled.js b/src/components/ListItem/ListItem.styled.js
@@ -2,7 +2,6 @@ import styled from 'styled-components'
 import ThumbnailSimple from '@containers/ThumbnailSimple'
 import StatusSelect from '../status/statusSelect'
 import { AssigneeSelect } from '@ynput/ayon-react-components'
-import getShimmerStyles from '@/styles/getShimmerStyles'
 
 export const Item = styled.li`
   /* reset defaults */
@@ -76,12 +75,7 @@ export const Item = styled.li`
   }
 
   &.loading {
-    ${getShimmerStyles()}
     border-color: var(--md-sys-color-surface-container-low);
-
-    &:hover {
-      background-color: var(--md-sys-color-surface-container-low);
-    }
   }
 `
 

diff --git a/src/components/MarketAddonCard/MarketAddonCard.jsx b/src/components/MarketAddonCard/MarketAddonCard.jsx
@@ -49,9 +49,12 @@ const MarketAddonCard = ({
   }
 
   return (
-    <Styled.Container {...props} className={clsx({ isSelected, isPlaceholder })}>
+    <Styled.Container
+      {...props}
+      className={clsx({ selected: isSelected, loading: isPlaceholder }, 'no-shimmer')}
+    >
       <AddonIcon isPlaceholder={isPlaceholder} size={32} src={icon} alt={title + ' icon'} />
-      <Styled.Content className="content">
+      <Styled.Content className={clsx({ loading: isPlaceholder })}>
         <Styled.TitleWrapper className="header">
           <Styled.Title className={Type.titleMedium}>{title}</Styled.Title>
           {isOfficial && <img src="/favicon-32x32.png" width={15} height={15} />}

diff --git a/src/components/MarketAddonCard/MarketAddonCard.styled.js b/src/components/MarketAddonCard/MarketAddonCard.styled.js
@@ -1,4 +1,4 @@
-import { Button, getShimmerStyles } from '@ynput/ayon-react-components'
+import { Button } from '@ynput/ayon-react-components'
 import styled, { keyframes } from 'styled-components'
 
 export const Container = styled.div`
@@ -19,21 +19,17 @@ export const Container = styled.div`
     background-color: var(--md-sys-color-surface-container-low-hover);
   }
 
-  &.isSelected {
+  &.selected {
     background-color: var(--md-sys-color-primary-container);
 
     border-radius: var(--border-radius-m);
     border-color: var(--md-sys-color-primary);
   }
 
-  &.isPlaceholder {
-    ${getShimmerStyles()}
-
-    .content {
-      border-radius: var(--border-radius-m);
-      overflow: hidden;
-      position: relative;
-      ${getShimmerStyles(undefined, undefined, { opacity: 1 })}
+  &.loading {
+    cursor: default;
+    &:hover {
+      background-color: var(--md-sys-color-surface-container-low);
     }
   }
 `
@@ -43,6 +39,8 @@ export const Content = styled.div`
   flex-direction: column;
   justify-content: start;
   align-items: start;
+  min-height: 40px;
+  flex: 1;
 `
 
 export const TitleWrapper = styled.div`

diff --git a/src/components/Release/ReleasePreset.jsx b/src/components/Release/ReleasePreset.jsx
@@ -3,6 +3,7 @@ import * as Styled from './ReleasePreset.styled'
 import { Icon } from '@ynput/ayon-react-components'
 import { format, formatDistanceToNow } from 'date-fns'
 import Type from '@/theme/typography.module.css'
+import clsx from 'clsx'
 
 const ReleasePreset = ({
   label,
@@ -44,8 +45,7 @@ const ReleasePreset = ({
 
   return (
     <Styled.Preset
-      $selected={isSelected}
-      $loading={isLoading}
+      className={clsx({ loading: isLoading, selected: isSelected })}
       onClick={onClick}
       {...props}
       tabIndex={0}

diff --git a/...mponents/Release/ReleasePreset.styled.jsx → ...omponents/Release/ReleasePreset.styled.js b/...mponents/Release/ReleasePreset.styled.jsx → ...omponents/Release/ReleasePreset.styled.js
@@ -1,5 +1,4 @@
-import styled, { css } from 'styled-components'
-import getShimmerStyles from '@/styles/getShimmerStyles'
+import styled from 'styled-components'
 
 export const Preset = styled.li`
   display: flex;
@@ -29,32 +28,16 @@ export const Preset = styled.li`
     width: 100%;
   }
 
-  ${({ $selected }) =>
-    $selected &&
-    css`
-      &,
-      &:hover {
-        background-color: var(--md-sys-color-primary-container);
-      }
-
-      .bio {
-        white-space: normal;
-      }
-    `}
-
-  ${({ $loading }) =>
-    $loading &&
-    css`
-      /* hide all text */
-      & > * {
-        visibility: hidden;
-        user-select: none;
-        pointer-events: none;
-      }
+  &.selected {
+    &,
+    &:hover {
+      background-color: var(--md-sys-color-primary-container);
+    }
 
-      /* add shimmer */
-      ${getShimmerStyles(undefined, undefined, { opacity: 0.5 })}
-    `}
+    .bio {
+      white-space: normal;
+    }
+  }
 `
 
 export const Header = styled.header`

diff --git a/src/components/Thumbnail/Thumbnail.styled.ts b/src/components/Thumbnail/Thumbnail.styled.ts
@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import getShimmerStyles from '../../styles/getShimmerStyles'
 
 export const Card = styled.div`
   position: relative;
@@ -89,17 +88,9 @@ export const Card = styled.div`
     }
   }
 
-  &.shimmer {
-    .icon {
-      opacity: 0;
-      animation: none;
-    }
-
+  &.loading {
     border: none;
     border-color: transparent;
-    background-color: unset;
-
-    ${getShimmerStyles()}
   }
 `