Merge branch 'develop' of https://dev.azure.com/imagetemplates/documa…

…ti.io/_git/dqoado into develop
dqops · Feb 9, 2024 · 35b685a · 35b685a
2 parents 8733d48 + a5ef8c6
commit 35b685a
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 70 deletions.
diff --git a/dqops/src/main/frontend/src/components/Connection/CommentsView/CommentItem.tsx b/dqops/src/main/frontend/src/components/Connection/CommentsView/CommentItem.tsx
@@ -29,29 +29,43 @@ const CommentItem = ({
   };
 
   return (
-    <tr>
-      <td className="pr-4 min-w-40 py-2">
+    <div className="w-full flex items-center">
+      <div className="pr-4 min-w-40 py-2 w-9/12 whitespace-normal">
         {isEditing ? (
-          <Input className="focus:!ring-0 focus:!border" value={text} onChange={(e) => setText(e.target.value)} />
+          <Input
+            className="focus:!ring-0 focus:!border"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+          />
         ) : (
           comment.comment
         )}
-      </td>
-      <td className="px-8 min-w-60 py-2">{comment.comment_by}</td>
-      <td className="px-8 min-w-60 py-2">
+      </div>
+      <div className=" w-1/12 py-2">{comment.comment_by}</div>
+      <div className=" w-1/12 py-2">
         {moment(comment.date).format('MMM, DD YYYY')}
-      </td>
-      <td className="px-8 min-w-34 max-w-34 py-2">
+      </div>
+      <div className="px-8 min-w-34 max-w-34 py-2">
         <div className="flex space-x-2 items-center justify-end">
-          <IconButton size="sm" onClick={isEditing ? onSave : onEdit} color="teal" className="!shadow-none">
+          <IconButton
+            size="sm"
+            onClick={isEditing ? onSave : onEdit}
+            color="teal"
+            className="!shadow-none"
+          >
             <SvgIcon name={isEditing ? 'save' : 'edit'} className="w-4" />
           </IconButton>
-          <IconButton size="sm" onClick={() => onRemove(idx)} color="teal" className="!shadow-none">
+          <IconButton
+            size="sm"
+            onClick={() => onRemove(idx)}
+            color="teal"
+            className="!shadow-none"
+          >
             <SvgIcon name="delete" className="w-4" />
           </IconButton>
         </div>
-      </td>
-    </tr>
+      </div>
+    </div>
   );
 };
 

diff --git a/dqops/src/main/frontend/src/components/Connection/CommentsView/index.tsx b/dqops/src/main/frontend/src/components/Connection/CommentsView/index.tsx
@@ -67,32 +67,28 @@ const CommentsView = ({
 
   return (
     <div className="p-4 text-sm">
-      <table className={clsx('w-full', className)}>
-        <thead>
-          <tr>
-            <th className="text-left min-w-40 w-full pr-4 py-2">Comment</th>
-            <th className="text-left px-8 py-2">Author</th>
-            <th className="text-left px-8 py-2">Date</th>
-            <th className="px-8 py-2 text-center max-w-34 min-w-34 w-34">
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {comments
-            ? comments.map((comment, index) => (
-                <CommentItem
-                  comment={comment}
-                  key={index}
-                  idx={index}
-                  onChange={onChangeComment}
-                  onRemove={onRemoveComment}
-                />
-              ))
-            : ''}
-        </tbody>
-      </table>
-      <div className="flex items-center w-full ">
+      <div className={clsx('w-full', className)}>
+        <div className="flex items-center font-bold">
+          <div className="w-9/12">Comment</div>
+          <div className="w-1/12">Author</div>
+          <div className="w-1/12">Date</div>
+          <div className="px-8 py-2 text-center max-w-34 min-w-34 w-34">
+            Action
+          </div>
+        </div>
+        {comments
+          ? comments.map((comment, index) => (
+              <CommentItem
+                comment={comment}
+                key={index}
+                idx={index}
+                onChange={onChangeComment}
+                onRemove={onRemoveComment}
+              />
+            ))
+          : ''}
+      </div>
+      <div className="flex items-center w-full">
         <div className="pr-4 min-w-40 py-2 w-11/12">
           <Input
             className="h-10 focus:!ring-0 focus:!border"

diff --git a/dqops/src/main/frontend/src/components/Connection/LabelsView/LabelItem.tsx b/dqops/src/main/frontend/src/components/Connection/LabelsView/LabelItem.tsx
@@ -9,7 +9,7 @@ interface ILabelItemProps {
   label: string;
   onChange: (key: number, value: string) => void;
   onRemove: (key: number) => void;
-  canUserEditLabel?: boolean
+  canUserEditLabel?: boolean;
 }
 
 const LabelItem = ({
@@ -20,8 +20,15 @@ const LabelItem = ({
   canUserEditLabel
 }: ILabelItemProps) => {
   return (
-    <tr className={clsx(canUserEditLabel !== true ? "pointer-events-none cursor-not-allowed" : "")}>
-      <td className="pr-4 min-w-40 py-2">
+    <div
+      className={clsx(
+        'flex items-center w-full ',
+        canUserEditLabel !== true
+          ? 'pointer-events-none cursor-not-allowed'
+          : ''
+      )}
+    >
+      <div className="pr-4 min-w-40 w-11/12 py-2">
         <div>
           <Input
             className="focus:!ring-0 focus:!border"
@@ -30,8 +37,8 @@ const LabelItem = ({
             error={label === ''}
           />
         </div>
-      </td>
-      <td className="px-8 max-w-34 min-w-34 py-2">
+      </div>
+      <div className="px-8 max-w-34 min-w-34 py-2">
         <div className="flex justify-center">
           <IconButton
             color="teal"
@@ -43,8 +50,8 @@ const LabelItem = ({
             <SvgIcon name="delete" className="w-4" />
           </IconButton>
         </div>
-      </td>
-    </tr>
+      </div>
+    </div>
   );
 };
 

diff --git a/dqops/src/main/frontend/src/components/Connection/LabelsView/index.tsx b/dqops/src/main/frontend/src/components/Connection/LabelsView/index.tsx
@@ -46,31 +46,23 @@ const LabelsView = ({ labels = [], onChange, hasAdd }: ILabelsViewProps) => {
   };
 
   return (
-    <div className="p-4 text-sm">
-      <table className="w-full">
-        <thead>
-          <tr>
-            <th className="text-left min-w-40 w-full pr-4 py-2">Label</th>
-            <th className="text-left px-8 py-2"></th>
-            <th className="text-left px-8 py-2"></th>
-            <th className="px-8 py-2 text-center max-w-34 min-w-34 w-34">
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {labels.slice(0, labels.length - 1).map((label, index) => (
-            <LabelItem
-              label={label}
-              key={index}
-              idx={index}
-              onChange={onChangeLabel}
-              onRemove={onRemoveLabel}
-              canUserEditLabel={userProfile.can_edit_labels}
-            />
-          ))}
-        </tbody>
-      </table>
+    <div className="p-4 text-sm w-full">
+      <div className="flex items-center font-bold">
+        <div className="text-left min-w-40 w-11/12 pr-4 py-2">Label</div>
+        <div className="px-8 py-2 text-center max-w-34 min-w-34 w-34">
+          Action
+        </div>
+      </div>
+      {labels.slice(0, labels.length - 1).map((label, index) => (
+        <LabelItem
+          label={label}
+          key={index}
+          idx={index}
+          onChange={onChangeLabel}
+          onRemove={onRemoveLabel}
+          canUserEditLabel={userProfile.can_edit_labels}
+        />
+      ))}
       <div className="flex items-center w-full">
         <div className="pr-4 min-w-40 py-2 w-11/12">
           <Input