Merge branch 'new-ui' into integrate-actions-e2e

Author: jsajal

.eslintrc.js

@@ -21,10 +21,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['react', 'react-hooks', 'prettier'],
-  rules: {
-    'react/prop-types': 'off', // keeping off for first phase
-    'no-unused-vars': 'off', // Getting a lot of Error for: '_' is assigned a value but never used  no-unused-vars. For now disabling this because  need to understand more about the use '_'.
-  },
+  rules: {},
   settings: {
     'import/resolver': {
       node: {

src/components/atoms/EditableTextItem.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PropTypes } from 'prop-types';
 import { EditText } from 'react-edit-text';
 import 'react-edit-text/dist/index.css';
 
@@ -7,4 +8,9 @@ const EditableTextItem = ({ initialText }) => {
   return <EditText name='editText' className='text-xl' defaultValue={initialText} placeholder={initialText} />;
 };
 
+// https://legacy.reactjs.org/docs/typechecking-with-proptypes.html
+EditableTextItem.propTypes = {
+  initialText: PropTypes.string.isRequired,
+};
+
 export default EditableTextItem;

src/components/atoms/Tabs.js

@@ -10,7 +10,7 @@ const Tabs = () => {
   const activeTabStyles =
     'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0';
   const tabCommonStyles =
-    'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-wider transition duration-500 ease-in';
+    'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm';
   return (
     <div role='tablist' className='tabs tabs-lg'>
       {tabs.map((tab, index) => {

src/components/atoms/common/Button.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PropTypes } from 'prop-types';
 
 // ToDo: can be more generalized
 const Button = ({ children, btnType, isDisabled, onClickHandle, fullWidth }) => {
@@ -32,4 +33,11 @@ const Button = ({ children, btnType, isDisabled, onClickHandle, fullWidth }) =>
   );
 };
 
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  btnType: PropTypes.string.isRequired,
+  isDisabled: PropTypes.boolean.isRequired,
+  onClickHandle: PropTypes.func,
+  fullWidth: PropTypes.boolean,
+};
 export default Button;

src/components/molecules/modals/ImportCollectionModal.js

@@ -1,4 +1,5 @@
 import React, { Fragment, useRef } from 'react';
+import { PropTypes } from 'prop-types';
 import { Dialog, Transition } from '@headlessui/react';
 import { DocumentArrowUpIcon } from '@heroicons/react/24/outline';
 import ImportCollectionTypes from 'constants/ImportCollectionTypes';
@@ -63,7 +64,7 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
         </Transition.Child>
 
         <div className='fixed inset-0 overflow-y-auto'>
-          <div className='flex items-center justify-center min-h-full p-4 text-center'>
+          <div className='flex min-h-full items-center justify-center p-4 text-center'>
             <Transition.Child
               as={Fragment}
               enter='ease-out duration-300'
@@ -73,21 +74,21 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
               leaveFrom='opacity-100 scale-100'
               leaveTo='opacity-0 scale-95'
             >
-              <Dialog.Panel className='w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl'>
+              <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
                 <Dialog.Title
                   as='h3'
-                  className='pb-4 text-lg font-semibold text-center text-gray-900 border-b border-neutral-300'
+                  className='border-b border-neutral-300 pb-4 text-center text-lg font-semibold text-gray-900'
                 >
                   Collections
                 </Dialog.Title>
                 <div className='mt-4'>
                   <ul className='text-sm font-medium'>
                     <li
-                      className='flex items-center justify-start gap-2 p-2 border border-transparent rounded-md cursor-pointer hover:bg-slate-100'
+                      className='flex cursor-pointer items-center justify-start gap-2 rounded-md border border-transparent p-2 hover:bg-slate-100'
                       onClick={handleImportCollectionClick}
                       data-import-type='yaml'
                     >
-                      <DocumentArrowUpIcon className='w-4 h-4' />
+                      <DocumentArrowUpIcon className='h-4 w-4' />
                       Import a YAML file
                       {/* Ref: https://stackoverflow.com/questions/37457128/react-open-file-browser-on-click-a-div */}
                       <div className='hidden'>
@@ -134,4 +135,9 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
   );
 };
 
+ImportCollectionModal.propTypes = {
+  closeFn: PropTypes.func.isRequired,
+  open: PropTypes.boolean.isRequired,
+};
+
 export default ImportCollectionModal;

src/components/molecules/modals/create/NewCollectionModal.js

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import Button from 'components/atoms/common/Button';
 import { BUTTON_TYPES } from 'constants/Common';
+import { PropTypes } from 'prop-types';
 
 const NewCollectionModal = ({ closeFn = () => null, open = false }) => {
   // ToDo: Save the file with the given file name
@@ -25,7 +26,7 @@ const NewCollectionModal = ({ closeFn = () => null, open = false }) => {
         </Transition.Child>
 
         <div className='fixed inset-0 overflow-y-auto'>
-          <div className='flex items-center justify-center min-h-full p-4 text-center'>
+          <div className='flex min-h-full items-center justify-center p-4 text-center'>
             <Transition.Child
               as={Fragment}
               enter='ease-out duration-300'
@@ -35,22 +36,22 @@ const NewCollectionModal = ({ closeFn = () => null, open = false }) => {
               leaveFrom='opacity-100 scale-100'
               leaveTo='opacity-0 scale-95'
             >
-              <Dialog.Panel className='w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl'>
+              <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
                 <Dialog.Title
                   as='h3'
-                  className='pb-4 text-lg font-semibold text-center text-gray-900 border-b border-neutral-300'
+                  className='border-b border-neutral-300 pb-4 text-center text-lg font-semibold text-gray-900'
                 >
                   Create a new collection
                 </Dialog.Title>
                 <div className='mt-6'>
                   <input
                     type='text'
-                    className='w-full rounded input input-bordered'
+                    className='input input-bordered w-full rounded'
                     placeholder='Collection name'
                     required
                   />
                 </div>
-                <div className='flex items-center gap-2 mt-6'>
+                <div className='mt-6 flex items-center gap-2'>
                   <Button btnType={BUTTON_TYPES.error} isDisabled={false} onClickHandle={closeFn} fullWidth={true}>
                     Cancel
                   </Button>
@@ -67,4 +68,9 @@ const NewCollectionModal = ({ closeFn = () => null, open = false }) => {
   );
 };
 
+NewCollectionModal.propTypes = {
+  closeFn: PropTypes.func.isRequired,
+  open: PropTypes.boolean.isRequired,
+};
+
 export default NewCollectionModal;

src/components/molecules/modals/workspaceDirectory/NewLabelModal.js

@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+import { PropTypes } from 'prop-types';
 import { Dialog, Transition } from '@headlessui/react';
 import { createFolder, createFlowTest } from 'service/collection';
 
@@ -109,4 +110,12 @@ const NewLabelModal = ({ closeFn = () => null, open = false, pathName, collectio
   );
 };
 
+NewLabelModal.propTypes = {
+  closeFn: PropTypes.func.isRequired,
+  open: PropTypes.boolean.isRequired,
+  pathName: PropTypes.string.isRequired,
+  collectionId: PropTypes.string.isRequired,
+  menuOption: PropTypes.string.isRequired,
+};
+
 export default NewLabelModal;

src/components/molecules/workspaceDirectory/Directories.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { PropTypes } from 'prop-types';
 import Directory from 'components/molecules/workspaceDirectory/Directory';
 import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
 import NewLabelModal from '../modals/workspaceDirectory/NewLabelModal';
@@ -93,4 +94,8 @@ const Directories = ({ collections }) => {
   );
 };
 
+Directories.propTypes = {
+  directoriesData: PropTypes.object.isRequired,
+};
+
 export default Directories;

src/components/molecules/workspaceDirectory/Directory.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { PropTypes } from 'prop-types';
 import { FLOW_FILE_SUFFIX_REGEX } from 'constants/Common';
 import { ArchiveBoxIcon, FolderIcon, DocumentIcon } from '@heroicons/react/24/outline';
 import OptionsMenu from './OptionsMenu';
@@ -103,4 +104,9 @@ const Directory = ({ collectionId, item, depth }) => {
   );
 };
 
+Directory.propTypes = {
+  directory: PropTypes.object.isRequired,
+  depth: PropTypes.number.isRequired,
+};
+
 export default Directory;

src/components/molecules/workspaceDirectory/OptionsMenu.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PropTypes } from 'prop-types';
 import { Menu, Transition } from '@headlessui/react';
 import { Fragment } from 'react';
 import { FolderPlusIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
@@ -96,4 +97,9 @@ const OptionsMenu = ({ directory, itemType }) => {
   );
 };
 
+OptionsMenu.propTypes = {
+  directory: PropTypes.object.isRequired,
+  itemType: PropTypes.string.isRequired,
+};
+
 export default OptionsMenu;