feat(FOROME-1410): Reworked edit behavior (#843)

ForomePlatform · Jul 31, 2022 · 8ad5038 · 8ad5038
1 parent 79ce601
commit 8ad5038
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 59 deletions.
diff --git a/...ner/components/right-column/condition-card/condition-options/condition-options-button.tsx b/...ner/components/right-column/condition-card/condition-options/condition-options-button.tsx
@@ -14,9 +14,8 @@ export const ConditionOptionsButton = ({
 }: IConditionOptionsButtonProps): ReactElement => (
   <Button
     className={className}
-    variant="text"
+    variant="no-border"
     onClick={e => onShowPopover(e.currentTarget)}
-    noBorder
     icon={
       <Icon
         name="Options"

diff --git a/...in/components/selected-dataset/build-flow/components/cards/components/card-edit-title.tsx b/...in/components/selected-dataset/build-flow/components/cards/components/card-edit-title.tsx
@@ -2,38 +2,25 @@ import cn, { Argument } from 'classnames'
 
 import { Button } from '@ui/button'
 import { CardTitle } from '@ui/card'
-import { Icon } from '@ui/icon'
 
 interface ICardTitleWithEditProps {
   title: string
-  isEditDisabled?: boolean
   onEdit: () => void
   className?: Argument
+  isEditShown?: boolean
 }
 
 export const CardTitleWithEdit = ({
   title,
-  isEditDisabled,
   onEdit,
   className,
+  isEditShown = false,
 }: ICardTitleWithEditProps) => (
   <div className={cn('flex items-center justify-between', className)}>
     <CardTitle text={title} />
 
-    <Button
-      variant="secondary"
-      noBorder
-      icon={
-        <Icon
-          name="Edit"
-          className={cn(
-            'cursor-pointer',
-            isEditDisabled ? 'text-grey-blue' : 'text-blue-bright',
-          )}
-        />
-      }
-      disabled={isEditDisabled}
-      onClick={onEdit}
-    />
+    {isEditShown && (
+      <Button variant="no-border" text="Edit choice" onClick={onEdit} />
+    )}
   </div>
 )
diff --git a/...onents/selected-dataset/build-flow/components/cards/description-card/description-card.tsx b/...onents/selected-dataset/build-flow/components/cards/description-card/description-card.tsx
@@ -73,7 +73,7 @@ export const DescriptionCard = observer((props: ICardProps) => {
     >
       <CardTitleWithEdit
         title={ds}
-        isEditDisabled={editDisabled}
+        isEditShown={!editDisabled}
         onEdit={() => wizardStore.editCard(id)}
       />
 
@@ -123,15 +123,19 @@ export const DescriptionCard = observer((props: ICardProps) => {
           isOptionsDisabled={isTyping || contentDisabled}
         />
 
-        <div className="flex justify-end">
-          <Button
-            text={isOpenButton ? 'Open' : 'Continue'}
-            onClick={
-              isOpenButton ? openNextPage : () => wizardStore.finishEditCard(id)
-            }
-            disabled={continueDisabled || isTyping}
-          />
-        </div>
+        {editDisabled && (
+          <div className="flex justify-end">
+            <Button
+              text={isOpenButton ? 'Open' : 'Continue'}
+              onClick={
+                isOpenButton
+                  ? openNextPage
+                  : () => wizardStore.finishEditCard(id)
+              }
+              disabled={continueDisabled || isTyping}
+            />
+          </div>
+        )}
       </div>
     </Card>
   )

diff --git a/src/pages/main/components/selected-dataset/build-flow/components/cards/start-card.tsx b/src/pages/main/components/selected-dataset/build-flow/components/cards/start-card.tsx
@@ -24,7 +24,7 @@ export const StartCard = (props: ICardProps) => {
   const isEditionProhibited =
     isExploreGenomeDisabled || isExploreCandidateDisabled
 
-  const isEditDisabled = isEditionProhibited ?? editDisabled
+  const isEditShown = !isEditionProhibited && !editDisabled
 
   return (
     <Card
@@ -33,7 +33,7 @@ export const StartCard = (props: ICardProps) => {
     >
       <CardTitleWithEdit
         title={title}
-        isEditDisabled={isEditDisabled}
+        isEditShown={isEditShown}
         onEdit={() => wizardStore.editCard(id)}
       />
 
@@ -51,13 +51,15 @@ export const StartCard = (props: ICardProps) => {
           </div>
         ))}
 
-        <div className="flex justify-end">
-          <Button
-            text="Continue"
-            onClick={() => wizardStore.finishEditCard(id)}
-            disabled={continueDisabled}
-          />
-        </div>
+        {!isEditShown && (
+          <div className="flex justify-end">
+            <Button
+              text="Continue"
+              onClick={() => wizardStore.finishEditCard(id)}
+              disabled={continueDisabled}
+            />
+          </div>
+        )}
       </div>
     </Card>
   )

diff --git a/src/pages/main/components/selected-dataset/build-flow/components/cards/whats-next-card.tsx b/src/pages/main/components/selected-dataset/build-flow/components/cards/whats-next-card.tsx
@@ -46,7 +46,7 @@ export const WhatsNextCard = (props: ICardProps) => {
       <>
         <CardTitleWithEdit
           title={title}
-          isEditDisabled={editDisabled}
+          isEditShown={!editDisabled}
           onEdit={() => wizardStore.editCard(id)}
         />
 
@@ -58,21 +58,23 @@ export const WhatsNextCard = (props: ICardProps) => {
             isOptionsDisabled={contentDisabled}
           />
 
-          <div className="flex justify-end">
-            {optionsForOpenButton.includes(selectedValue) ? (
-              <Button
-                text="Open"
-                onClick={openNextPage}
-                disabled={continueDisabled}
-              />
-            ) : (
-              <Button
-                text="Continue"
-                onClick={() => wizardStore.finishEditCard(id)}
-                disabled={continueDisabled}
-              />
-            )}
-          </div>
+          {editDisabled && (
+            <div className="flex justify-end">
+              {optionsForOpenButton.includes(selectedValue) ? (
+                <Button
+                  text="Open"
+                  onClick={openNextPage}
+                  disabled={continueDisabled}
+                />
+              ) : (
+                <Button
+                  text="Continue"
+                  onClick={() => wizardStore.finishEditCard(id)}
+                  disabled={continueDisabled}
+                />
+              )}
+            </div>
+          )}
         </div>
       </>
     </Card>

diff --git a/...ts/selected-dataset/start-flow/components/card-sections/card-previous-explore-section.tsx b/...ts/selected-dataset/start-flow/components/card-sections/card-previous-explore-section.tsx
@@ -38,7 +38,7 @@ export const CardPreviousExploreSection = (): ReactElement => {
   }
 
   return (
-    <div className="w-1/2">
+    <div className="w-1/2 pl-[24px]">
       <CardTitle text={t('home.startFlow.prevWorkWith')} />
 
       <div className="mt-1 text-14 text-grey-dark flex flex-col">

diff --git a/src/ui/button/button.module.css b/src/ui/button/button.module.css
@@ -105,6 +105,12 @@
     }
   }
 
+  &_no-border {
+    @apply button_text;
+    border: none;
+    padding: 0;
+  }
+
   &_secondary,
   &_secondary-dark {
     background-color: inherit;

diff --git a/src/ui/button/button.tsx b/src/ui/button/button.tsx
@@ -20,6 +20,7 @@ export interface IButtonProps {
     | 'tertiary'
     | 'primary-dark'
     | 'diestruction'
+    | 'no-border'
   loaderColor?: 'default' | 'white'
   className?: Argument
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void
@@ -29,7 +30,6 @@ export interface IButtonProps {
   prepend?: ReactNode
   icon?: ReactNode
   isLoading?: boolean
-  noBorder?: boolean
   refEl?: any
   dataTestId?: string
   style?: CSSProperties
@@ -51,7 +51,6 @@ export const Button: FC<IButtonProps> = ({
   prepend,
   icon,
   isLoading = false,
-  noBorder = false,
   refEl,
   dataTestId,
   style = {},
@@ -64,7 +63,6 @@ export const Button: FC<IButtonProps> = ({
     styles[`button_${variant}`],
     styles[`button_${padding}`],
     isOnlyIcon && styles.button_iconOnly,
-    noBorder && styles.button_noBorder,
     className,
   )