feat: issues (#2180)

src/components/IssueDetails/IssueDescription/index.tsx

@@ -0,0 +1,152 @@
+import { Menu, Transition } from '@headlessui/react';
+import { DotsVerticalIcon } from '@heroicons/react/solid';
+import { Field, Form, Formik } from 'formik';
+import React, { Fragment, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import ReactMarkdown from 'react-markdown';
+import { Permission, useUser } from '../../../hooks/useUser';
+import Button from '../../Common/Button';
+
+const messages = defineMessages({
+  description: 'Description',
+  edit: 'Edit Description',
+  cancel: 'Cancel',
+  save: 'Save Changes',
+  deleteissue: 'Delete Issue',
+});
+
+interface IssueDescriptionProps {
+  issueId: number;
+  description: string;
+  onEdit: (newDescription: string) => void;
+  onDelete: () => void;
+}
+
+const IssueDescription: React.FC<IssueDescriptionProps> = ({
+  issueId,
+  description,
+  onEdit,
+  onDelete,
+}) => {
+  const intl = useIntl();
+  const { user, hasPermission } = useUser();
+  const [isEditing, setIsEditing] = useState(false);
+
+  return (
+    <div className="relative">
+      <div className="flex items-center justify-between">
+        <div className="font-semibold text-gray-100 lg:text-xl">
+          {intl.formatMessage(messages.description)}
+        </div>
+        {(hasPermission(Permission.MANAGE_ISSUES) || user?.id === issueId) && (
+          <Menu as="div" className="relative inline-block text-left">
+            {({ open }) => (
+              <>
+                <div>
+                  <Menu.Button className="flex items-center text-gray-400 rounded-full hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
+                    <span className="sr-only">Open options</span>
+                    <DotsVerticalIcon className="w-5 h-5" aria-hidden="true" />
+                  </Menu.Button>
+                </div>
+
+                <Transition
+                  show={open}
+                  as={Fragment}
+                  enter="transition ease-out duration-100"
+                  enterFrom="transform opacity-0 scale-95"
+                  enterTo="transform opacity-100 scale-100"
+                  leave="transition ease-in duration-75"
+                  leaveFrom="transform opacity-100 scale-100"
+                  leaveTo="transform opacity-0 scale-95"
+                >
+                  <Menu.Items
+                    static
+                    className="absolute right-0 w-56 mt-2 origin-top-right bg-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  >
+                    <div className="py-1">
+                      <Menu.Item>
+                        {({ active }) => (
+                          <button
+                            onClick={() => setIsEditing(true)}
+                            className={`block w-full text-left px-4 py-2 text-sm ${
+                              active
+                                ? 'bg-gray-600 text-white'
+                                : 'text-gray-100'
+                            }`}
+                          >
+                            {intl.formatMessage(messages.edit)}
+                          </button>
+                        )}
+                      </Menu.Item>
+
+                      <Menu.Item>
+                        {({ active }) => (
+                          <button
+                            onClick={() => onDelete()}
+                            className={`block w-full text-left px-4 py-2 text-sm ${
+                              active
+                                ? 'bg-gray-600 text-white'
+                                : 'text-gray-100'
+                            }`}
+                          >
+                            {intl.formatMessage(messages.deleteissue)}
+                          </button>
+                        )}
+                      </Menu.Item>
+                    </div>
+                  </Menu.Items>
+                </Transition>
+              </>
+            )}
+          </Menu>
+        )}
+      </div>
+      {isEditing ? (
+        <Formik
+          initialValues={{ newMessage: description }}
+          onSubmit={(values) => {
+            onEdit(values.newMessage);
+            setIsEditing(false);
+          }}
+        >
+          {() => {
+            return (
+              <Form className="mt-4">
+                <Field
+                  id="newMessage"
+                  name="newMessage"
+                  as="textarea"
+                  className="h-40"
+                />
+                <div className="flex justify-end mt-2">
+                  <Button
+                    buttonType="default"
+                    className="mr-2"
+                    type="button"
+                    onClick={() => setIsEditing(false)}
+                  >
+                    <span>{intl.formatMessage(messages.cancel)}</span>
+                  </Button>
+                  <Button buttonType="primary">
+                    <span>{intl.formatMessage(messages.save)}</span>
+                  </Button>
+                </div>
+              </Form>
+            );
+          }}
+        </Formik>
+      ) : (
+        <div className="mt-4 prose">
+          <ReactMarkdown
+            allowedElements={['p', 'img', 'strong', 'em']}
+            skipHtml
+          >
+            {description}
+          </ReactMarkdown>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default IssueDescription;