New Directory Setup (#2065)

* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>

web/components/issues/comment/add-comment.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { useRouter } from "next/router";
+// react-hook-form
+import { useForm, Controller } from "react-hook-form";
+// components
+import { TipTapEditor } from "components/tiptap";
+// ui
+import { Icon, SecondaryButton, Tooltip } from "components/ui";
+// types
+import type { IIssueComment } from "types";
+
+const defaultValues: Partial<IIssueComment> = {
+  access: "INTERNAL",
+  comment_html: "",
+};
+
+type Props = {
+  disabled?: boolean;
+  onSubmit: (data: IIssueComment) => Promise<void>;
+  showAccessSpecifier?: boolean;
+};
+
+const commentAccess = [
+  {
+    icon: "lock",
+    key: "INTERNAL",
+    label: "Private",
+  },
+  {
+    icon: "public",
+    key: "EXTERNAL",
+    label: "Public",
+  },
+];
+
+export const AddComment: React.FC<Props> = ({
+  disabled = false,
+  onSubmit,
+  showAccessSpecifier = false,
+}) => {
+  const editorRef = React.useRef<any>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IIssueComment>({ defaultValues });
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!formData.comment_html || isSubmitting) return;
+
+    await onSubmit(formData).then(() => {
+      reset(defaultValues);
+      editorRef.current?.clearEditor();
+    });
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleAddComment)}>
+        <div>
+          <div className="relative">
+            {showAccessSpecifier && (
+              <div className="absolute bottom-2 left-3 z-[1]">
+                <Controller
+                  control={control}
+                  name="access"
+                  render={({ field: { onChange, value } }) => (
+                    <div className="flex border border-custom-border-300 divide-x divide-custom-border-300 rounded overflow-hidden">
+                      {commentAccess.map((access) => (
+                        <Tooltip key={access.key} tooltipContent={access.label}>
+                          <button
+                            type="button"
+                            onClick={() => onChange(access.key)}
+                            className={`grid place-items-center p-1 hover:bg-custom-background-80 ${
+                              value === access.key ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            <Icon
+                              iconName={access.icon}
+                              className={`w-4 h-4 -mt-1 ${
+                                value === access.key
+                                  ? "!text-custom-text-100"
+                                  : "!text-custom-text-400"
+                              }`}
+                            />
+                          </button>
+                        </Tooltip>
+                      ))}
+                    </div>
+                  )}
+                />
+              </div>
+            )}
+            <Controller
+              name="comment_html"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TipTapEditor
+                  workspaceSlug={workspaceSlug as string}
+                  ref={editorRef}
+                  value={!value || value === "" ? "<p></p>" : value}
+                  customClassName="p-3 min-h-[100px] shadow-sm"
+                  debouncedUpdatesEnabled={false}
+                  onChange={(comment_json: Object, comment_html: string) => onChange(comment_html)}
+                />
+              )}
+            />
+          </div>
+
+          <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
+            {isSubmitting ? "Adding..." : "Comment"}
+          </SecondaryButton>
+        </div>
+      </form>
+    </div>
+  );
+};