Merge pull request #556 from RobinNagpal/dawood/remove-url-field

remove url field
RobinNagpal · Nov 25, 2024 · 2279ca4 · 2279ca4
2 parents 7bcba78 + e1587ef
commit 2279ca4
Show file tree

Hide file tree

Showing 16 changed files with 399 additions and 179 deletions.
diff --git a/academy-ui/src/components/byteCollection/ByteCollections/ByteCollectionEditModal.tsx b/academy-ui/src/components/byteCollection/ByteCollections/ByteCollectionEditModal.tsx
@@ -51,15 +51,7 @@ export default function ByteCollectionEditModal(props: ByteCollectionEditorProps
                 Video URL
               </Input>
 
-              <Input
-                modelValue={byteCollection.order}
-                number
-                onUpdate={(v) => helperFunctions.updateByteCollectionOrder(v ? parseInt(v.toString()) : 100)}
-                label="Byte Collection Order *"
-                required
-              />
-
-              <div className="py-4">
+              <div className="py-4 flex justify-center items-center">
                 <Button
                   variant="contained"
                   primary

diff --git a/academy-ui/src/components/bytes/Edit/EditByteStepperItem.tsx b/academy-ui/src/components/bytes/Edit/EditByteStepperItem.tsx
@@ -2,7 +2,6 @@ import CreateQuestion from '@/components/app/Common/CreateQuestion';
 import UploadImageFromDeviceModal from '@/components/app/Image/UploadImageFromDeviceModal';
 import MarkdownEditor from '@/components/app/Markdown/MarkdownEditor';
 import { ByteQuestionFragmentFragment, GuideQuestion, ImageDisplayMode, ImageType } from '@/graphql/generated/generated-types';
-import dummyImage from '@/images/TidbitsHub/image-placeholder.png';
 import { EditByteStep, EditByteType, StepItemInputGenericInput } from '@/types/request/ByteRequests';
 import { SpaceWithIntegrationsDto } from '@/types/space/SpaceDto';
 import { Question, UserInput } from '@/types/stepItems/stepItemDto';
@@ -12,9 +11,8 @@ import DeleteConfirmationModal from '@dodao/web-core/components/app/Modal/Delete
 import AddStepItemModal from '@dodao/web-core/components/app/Modal/StepItem/AddStepItemModal';
 import IconButton from '@dodao/web-core/components/core/buttons/IconButton';
 import { IconTypes } from '@dodao/web-core/components/core/icons/IconTypes';
-import ViewEditableImage from '@dodao/web-core/components/core/image/ViewEditableImage';
+import EditableImage from '@dodao/web-core/components/core/image/EditableImage';
 import Input from '@dodao/web-core/components/core/input/Input';
-import OverlayOnHover from '@dodao/web-core/components/core/overlay/OverlayOnHover';
 import StyledSelect, { StyledSelectItem } from '@dodao/web-core/components/core/select/StyledSelect';
 import { InputType, QuestionType, UserDiscordConnectType } from '@dodao/web-core/types/deprecated/models/enums';
 import { ByteErrors } from '@dodao/web-core/types/errors/byteErrors';
@@ -25,7 +23,6 @@ import isEqual from 'lodash/isEqual';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import styles from './EditByteStepperItem.module.scss';
 
 interface EditByteStepperItemProps {
   space: SpaceWithIntegrationsDto;
@@ -445,37 +442,15 @@ For background of the image, use the color ${backgroundColor} and for the primar
               setSelectedItemId={(value) => updateStepDisplayMode(value!)}
             />
           </div>
-          <div className="w-full lg:w-1/2 my-4 flex justify-center items-center">
-            {step.imageUrl ? (
-              <div className="relative inline-block h-[200px] group justify-center">
-                <img
-                  src={step.imageUrl}
-                  style={{ height: '100%' }}
-                  className="cursor-pointer border border-color"
-                  title="Click to change image"
-                  onLoad={() => setImageLoaded(true)}
-                />
-                {imageLoaded && (
-                  <OverlayOnHover>
-                    <ViewEditableImage onClickEditIcon={() => setSelectImageUploadModal(true)} onClickTrashIcon={() => updateStepImageUrl('')} />
-                  </OverlayOnHover>
-                )}
-              </div>
-            ) : (
-              <div className="relative h-[150px] group">
-                <img src={dummyImage.src} style={{ height: '100%' }} className="cursor-pointer border border-color" />
-                <OverlayOnHover>
-                  <IconButton
-                    tooltip="Add Image"
-                    iconName={IconTypes.PlusIcon}
-                    height="30"
-                    width="30"
-                    className={`p-1 rounded-full ${styles.iconsColorToggle}`}
-                    onClick={() => setSelectImageUploadModal(true)}
-                  />
-                </OverlayOnHover>
-              </div>
-            )}
+          <div className="w-full lg:w-1/2 flex justify-center items-center">
+            <EditableImage
+              label="Select Image"
+              afterUploadLabel="Image Selected"
+              imageUrl={step.imageUrl}
+              onRemove={() => updateStepImageUrl(null)}
+              onUpload={() => setSelectImageUploadModal(true)}
+              height="200px"
+            />
           </div>
         </div>
         {step.displayMode === ImageDisplayMode.FullScreenImage ? (

diff --git a/academy-ui/src/components/clickableDemoHtmlCapture/SelectHtmlCaptureModal.tsx b/academy-ui/src/components/clickableDemoHtmlCapture/SelectHtmlCaptureModal.tsx
@@ -83,7 +83,7 @@ export default function SelectHtmlCaptureModal(props: SelectHtmlCaptureModalProp
   };
 
   return (
-    <FullPageModal open={showSelectHtmlCaptureModal} onClose={onClose} title={'Select HTML Capture'}>
+    <FullPageModal open={showSelectHtmlCaptureModal} onClose={onClose} title={'Select Screen Capture'}>
       {loading ? (
         <div className="text-center min-h-[40vh] flex justify-center items-center">
           <LoadingIcon />
@@ -126,8 +126,8 @@ export default function SelectHtmlCaptureModal(props: SelectHtmlCaptureModalProp
               ))}
             </Grid4Cols>
           ) : (
-            <div className="text-center mt-16 pb-8">
-              <p>Install the extension to capture HTML</p>
+            <div className="text-center my-20">
+              <p>Install and use the extension to capture screens.</p>
             </div>
           )}
 
@@ -143,7 +143,7 @@ export default function SelectHtmlCaptureModal(props: SelectHtmlCaptureModalProp
             }}
             disabled={!selectedHtmlCaptureId}
           >
-            Select HTML Capture
+            Select Capture
           </Button>
         </div>
       )}

diff --git a/academy-ui/src/components/clickableDemos/Edit/EditClickableDemoStepperItem.tsx b/academy-ui/src/components/clickableDemos/Edit/EditClickableDemoStepperItem.tsx
@@ -1,5 +1,3 @@
-import CaptureInput from '@/components/clickableDemos/CaptureSelector/CaptureInput';
-import SelectElementInput from '@/components/clickableDemos/ElementSelector/SelectElementInput';
 import { ClickableDemoStepInput, UpsertClickableDemoInput } from '@/graphql/generated/generated-types';
 import { TooltipPlacement } from '@/types/clickableDemos/ClickableDemoDto';
 import { SpaceWithIntegrationsDto } from '@/types/space/SpaceDto';
@@ -11,6 +9,10 @@ import { ClickableDemoErrors, ClickableDemoStepError } from '@dodao/web-core/typ
 import { slugify } from '@dodao/web-core/utils/auth/slugify';
 import { useState } from 'react';
 import styles from './EditClickableDemoStepperItem.module.scss';
+import EditableImage from '@dodao/web-core/components/core/image/EditableImage';
+import { ClickableDemoHtmlCaptureDto } from '@/types/html-captures/ClickableDemoHtmlCaptureDto';
+import SelectHtmlCaptureModal from '@/components/clickableDemoHtmlCapture/SelectHtmlCaptureModal';
+import ElementSelectorModal from '../ElementSelector/ElementSelectorModal';
 
 interface StepProps {
   space: SpaceWithIntegrationsDto;
@@ -58,6 +60,16 @@ export default function EditClickableDemoStepperItem({
   onUpdateStep,
   uploadToS3AndReturnScreenshotUrl,
 }: StepProps) {
+  const [showSelectHtmlCaptureModal, setShowSelectHtmlCaptureModal] = useState(false);
+  const [showElementSelectorModal, setShowElementSelectorModal] = useState(false);
+
+  const inputId = 'capture-input';
+
+  const handleSelectHtmlCapture = (selectedCapture: ClickableDemoHtmlCaptureDto) => {
+    updateStepUrl(selectedCapture.fileUrl, selectedCapture.fileImageUrl);
+    setShowSelectHtmlCaptureModal(false);
+  };
+
   const [uploadHTMLFileLoading, setUploadHTMLFileLoading] = useState(false);
 
   const updateStepSelector = (selector: string | number | undefined, elementImgUrl: string | undefined) => {
@@ -82,8 +94,6 @@ export default function EditClickableDemoStepperItem({
     return error ? error.toString() : '';
   };
 
-  console.log('step.placement', step.placement);
-
   return (
     <div className={`${styles.StyledStepContainer} p-5`} style={{ border: !!clickableDemoErrors?.steps?.[step.id] ? '1px solid red' : 'none' }}>
       <div className="flex justify-end min-h-10">
@@ -118,43 +128,53 @@ export default function EditClickableDemoStepperItem({
           />
         </div>
       </div>
-      <div className="w-full">
-        <div className="mt-4">
-          <CaptureInput
-            label="HTML Capture"
-            error={inputError('url') ? 'URL is required' : ''}
-            modelValue={step.url}
-            onInput={updateStepUrl}
-            demoId={clickableDemo.id}
-            spaceId={space.id}
-          />
-          {step.screenImgUrl && (
-            <div className="mt-4">
-              <img src={step.screenImgUrl} alt="Screenshot" className="rounded-lg shadow-md max-w-full h-[150px] object-fit" />
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="w-full">
-        <div className="mt-4">
-          <SelectElementInput
-            label="Selector"
-            error={inputError('selector') ? 'Selector is required' : ''}
-            space={space}
-            modelValue={step.selector}
-            stepIndex={stepIndex}
-            objectId={(space?.name && slugify(space?.name)) || space?.id || 'new-space'}
-            fileUrl={step.url}
-            onInput={updateStepSelector}
-            uploadToS3AndReturnScreenshotUrl={uploadToS3AndReturnScreenshotUrl}
-          />
-          {step.elementImgUrl && ( // Assuming `step.screenImgUrl` holds the URL of the screenshot image
-            <div className="mt-4">
-              <img src={step.elementImgUrl} alt="Screenshot" className="rounded-lg shadow-md max-w-full max-h-60" />
-            </div>
-          )}
-        </div>
+
+      <div className="w-full my-2 flex flex-wrap sm:flex-nowrap justify-around items-end gap-5">
+        <EditableImage
+          label="Select Capture"
+          afterUploadLabel="Capture Selected"
+          imageUrl={step.screenImgUrl}
+          onRemove={() => updateStepUrl('', '')}
+          onUpload={() => setShowSelectHtmlCaptureModal(true)}
+          height="200px"
+          error={inputError('url') ? 'Screen Capture is required' : ''}
+        />
+
+        <EditableImage
+          label="Select Element"
+          afterUploadLabel="Element Selected"
+          imageUrl={step.elementImgUrl}
+          onRemove={() => updateStepSelector('', '')}
+          onUpload={() => setShowElementSelectorModal(true)}
+          height="150px"
+          maxWidth="250px"
+          disabled={step.screenImgUrl != ''}
+          disabledTooltip="Please select a capture first"
+          error={inputError('selector') ? 'Selector is required' : ''}
+        />
       </div>
+      {showSelectHtmlCaptureModal && (
+        <SelectHtmlCaptureModal
+          showSelectHtmlCaptureModal={showSelectHtmlCaptureModal}
+          onClose={() => setShowSelectHtmlCaptureModal(false)}
+          selectHtmlCapture={handleSelectHtmlCapture}
+          demoId={clickableDemo.id}
+          spaceId={space.id}
+        />
+      )}
+      {showElementSelectorModal && (
+        <ElementSelectorModal
+          space={space}
+          onInput={updateStepSelector}
+          showModal={showElementSelectorModal}
+          objectId={(space?.name && slugify(space?.name)) || space?.id || 'new-space'}
+          fileUrl={step.url!}
+          xPath={step.selector || ''}
+          setShowModal={setShowElementSelectorModal}
+          uploadToS3AndReturnScreenshotUrl={uploadToS3AndReturnScreenshotUrl}
+          stepIndex={stepIndex}
+        />
+      )}
     </div>
   );
 }