Merge pull request #2316 from graphcommerce-org/feature/GCOM-1450

Feature/gcom 1450
graphcommerce-org · Jul 10, 2024 · 70acf99 · 70acf99
2 parents c4c6ad8 + 28d4708
commit 70acf99
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 41 deletions.
diff --git a/.changeset/eight-hounds-sit.md b/.changeset/eight-hounds-sit.md
@@ -0,0 +1,5 @@
+---
+"@graphcommerce/hygraph-dynamic-rows-ui": patch
+---
+
+fix hygraph studio bugs in Dynamic Row UI module. Style config screen DR UI app.
diff --git a/packages/hygraph-dynamic-rows-ui/components/PropertyPicker.tsx b/packages/hygraph-dynamic-rows-ui/components/PropertyPicker.tsx
@@ -8,7 +8,7 @@ import { fetchGraphQLInterface } from '../lib/fetchGraphQLInterface'
 import { __Field } from '../types'
 
 export function PropertyPicker() {
-  const { value, onChange, field, extension } = useFieldExtension()
+  const { value, onChange, extension } = useFieldExtension()
   const [localValue, setLocalValue] = useState<string | undefined | null>(
     typeof value === 'string' ? value : undefined,
   )
@@ -29,7 +29,7 @@ export function PropertyPicker() {
     return fetchGraphQLInterface(client)
   }, [extension.config.backend])
 
-  // Prepare options 
+  // Prepare options
   const numberOptions = useMemo(
     () =>
       createOptionsFromInterfaceObject(
@@ -60,10 +60,10 @@ export function PropertyPicker() {
     [numberOptions, textOptions],
   )
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore - outdated types from @hygraph/app-sdk-react
-  const fieldType = field.parent.apiId ?? 'ConditionText'
-  const options = fieldType === 'ConditionNumber' ? allOptions.number : allOptions.text
+  // For now this we can not split number and text field options anymore as Hygraph made parent field apiId unreachable :/
+  // const fieldType = field.parent.apiId ?? 'ConditionText'
+  // const options = fieldType === 'ConditionNumber' ? allOptions.number : allOptions.text
+  const options = [...allOptions.text, ...allOptions.number]
 
   if (!fields) {
     Promise.resolve(graphQLInterfaceQuery)

diff --git a/packages/hygraph-dynamic-rows-ui/components/Setup.tsx b/packages/hygraph-dynamic-rows-ui/components/Setup.tsx
@@ -1,15 +1,14 @@
 import { useApp, Wrapper } from '@hygraph/app-sdk-react'
+import Image from 'next/image'
 import { useState } from 'react'
 import styles from './setup.module.css'
 
 function Install() {
-  // @ts-expect-error - outdated types from @hygraph/app-sdk-react
-  const { updateInstallation, installation, showToast, extension } = useApp()
+  const { updateInstallation, installation, showToast } = useApp()
+
   const installed = installation.status === 'COMPLETED'
   const [gqlUri, setGqlUri] = useState('')
 
-  const changedUri = extension.config.backend !== gqlUri
-
   const saveOnClick = () =>
     updateInstallation({
       config: { backend: gqlUri },
@@ -64,10 +63,8 @@ function Install() {
 
   let buttonText: string
   let buttonAction: typeof uninstallOnClick | typeof installOnClick
-  if (changedUri) {
-    buttonText = 'Save'
-    buttonAction = saveOnClick
-  } else if (installed) {
+
+  if (installed) {
     buttonText = 'Disable app'
     buttonAction = uninstallOnClick
   } else {
@@ -78,34 +75,59 @@ function Install() {
   return (
     <>
       <>
-        <span>GraphQL API URI</span>
+        <span>
+          <strong>GraphQL API URI</strong>
+        </span>
         <input
           name='gql-uri'
-          defaultValue={extension.config.backend}
+          className={styles.textInput}
+          defaultValue={(installation.config.backend as string) ?? ''}
           onChange={(e) => setGqlUri(e.target.value)}
         />
       </>
 
-      <button type='button' className={styles.button} onClick={buttonAction}>
-        {buttonText}
-      </button>
+      <div className={styles.buttonsContainer}>
+        <button type='button' className={styles.button} onClick={saveOnClick} data-save-button>
+          Save
+        </button>
+        <button
+          type='button'
+          className={styles.button}
+          onClick={buttonAction}
+          aria-disabled={installed}
+        >
+          {buttonText}
+        </button>
+      </div>
     </>
   )
 }
 
 export function Page() {
   return (
     <div className={styles.container}>
-      <h1 className={styles.title}>Dynamic Rows Property Selector</h1>
-      <p className={styles.description}>
-        Enhance your content management experience with Dynamic Rows, specifically designed to
-        integrate seamlessly with our Dynamic Row module. It features an intuitive property picker
-        field, allowing for effortless selection and organization of properties to customize your
-        content layout. Press install to get started!
-      </p>
-      <Wrapper>
-        <Install />
-      </Wrapper>
+      <div className={styles.contentWrapper}>
+        <div className={styles.logoWrapper}>
+          <Image
+            src='https://www.graphcommerce.org/_next/static/media/graphcommerce.a8fe7e28.svg'
+            layout='fill'
+            alt='GraphCommerce logo'
+          />
+        </div>
+
+        <h1 className={styles.title}>
+          Dynamic Rows Property Selector <span className={styles.author}>by Joshua Bolk</span>
+        </h1>
+        <p className={styles.description}>
+          Enhance your content management experience with Dynamic Rows, specifically designed to
+          integrate seamlessly with our Dynamic Row module. It features an intuitive property picker
+          field, allowing for effortless selection and organization of properties to customize your
+          content layout. Enable the app and put your graphQL URI to get started.
+        </p>
+        <Wrapper>
+          <Install />
+        </Wrapper>
+      </div>
     </div>
   )
 }
diff --git a/packages/hygraph-dynamic-rows-ui/components/setup.module.css b/packages/hygraph-dynamic-rows-ui/components/setup.module.css
@@ -1,11 +1,28 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   height: 100%;
   max-width: 1200px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.3;
+  font-size: 18px;
+  background-color: aliceblue;
+  padding: 32px 24px;
+  border-radius: 8px;
+  margin: 0 auto;
+}
+
+.contentWrapper {
+  max-width: 700px;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  margin: 0 auto;
+}
+
+.logoWrapper {
+  position: relative;
+  height: 60px;
+  width: 50%;
+  margin-bottom: 32px;
 }
 
 .title {
@@ -15,6 +32,12 @@
   margin-bottom: 16px;
 }
 
+.author {
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 16px;
+}
+
 .desciption {
   font-size: 14px;
   font-weight: 300;
@@ -40,19 +63,51 @@
   text-decoration: none;
   font-weight: 500;
   border: 0px;
-  margin: 16px 0px 0px;
+  margin: 16px 0 0 0;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 18px;
   line-height: 16px;
-  height: 24px;
+  height: 40px;
   min-width: 24px;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
   color: rgb(255, 255, 255);
-  background-color: rgb(90, 92, 236);
+  background-color: #2563eb;
+  transition: background-color 0.2s ease 0s;
 }
 
 .button:hover {
   cursor: pointer;
-  background-color: rgb(58, 48, 166);
+  background-color: #1d4ed8;
+}
+
+.button[aria-disabled='true'] {
+  background-color: rgb(200, 200, 200);
+}
+
+.button[aria-disabled='true']:hover {
+  background-color: rgb(192, 192, 192);
+}
+
+.button[aria-disabled='false'] {
+  background-color: #16a34a;
+}
+
+.button[aria-disabled='false']:hover {
+  background-color: #15803d;
+}
+
+.buttonsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  column-gap: 24px;
+}
+
+.textInput {
+  display: inline;
+  margin: 24px 0;
+  font-size: 18px;
+  padding: 12px 6px;
 }