feat(client): add instructions into contest announcement dialog

judgels-client/.gitignore

@@ -10,5 +10,6 @@ judgels-client.js
 !public/skins/**/*.css
 
 .idea/
+coverage/
 
 *.retry

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.jsx

@@ -54,7 +54,7 @@ export class ContestAnnouncementCreateDialog extends Component {
 
   renderDialogForm = (fields, submitButton) => (
     <>
-      <div className={classNames(Classes.DIALOG_BODY, 'contest-announcement-create-dialog-body')}>{fields}</div>
+      <div className={classNames(Classes.DIALOG_BODY)}>{fields}</div>
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
           <Button text="Cancel" onClick={this.toggleDialog} />

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.scss

@@ -1,20 +1,3 @@
 .contest-announcement-create-dialog {
   width: 750px;
-  height: 650px;
-}
-
-.contest-announcement-create-dialog-body {
-  height: 520px;
-}
-
-// This is to compensate the increase in toolbar height
-
-@media only screen and (max-width: 600px) {
-  .contest-announcement-create-dialog {
-    height: 700px;
-  }
-
-  .contest-announcement-create-dialog-body {
-    height: 570px;
-  }
 }

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateForm/ContestAnnouncementCreateForm.jsx

@@ -6,6 +6,7 @@ import { FormSelect2 } from '../../../../../../components/forms/FormSelect2/Form
 import { FormTextInput } from '../../../../../../components/forms/FormTextInput/FormTextInput';
 import { Required } from '../../../../../../components/forms/validations';
 import { ContestAnnouncementStatus } from '../../../../../../modules/api/uriel/contestAnnouncement';
+import { ContestAnnouncementInstruction } from '../ContestAnnouncementInstruction/ContestAnnouncementInstruction';
 
 export default function ContestAnnouncementCreateForm({ onSubmit, renderFormComponents }) {
   const statusField = {
@@ -34,6 +35,7 @@ export default function ContestAnnouncementCreateForm({ onSubmit, renderFormComp
     <>
       <Field component={FormSelect2} {...statusField} />
       <Field component={FormTextInput} {...titleField} />
+      <ContestAnnouncementInstruction />
       <Field component={FormRichTextArea} {...contentField} />
     </>
   );

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditDialog/ContestAnnouncementEditDialog.jsx

@@ -8,7 +8,7 @@ import './ContestAnnouncementEditDialog.scss';
 export function ContestAnnouncementEditDialog({ contest, announcement, onToggleEditDialog, onUpdateAnnouncement }) {
   const renderDialogForm = (fields, submitButton) => (
     <>
-      <div className={classNames(Classes.DIALOG_BODY, 'contest-announcement-edit-dialog-body')}>{fields}</div>
+      <div className={classNames(Classes.DIALOG_BODY)}>{fields}</div>
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
           <Button text="Cancel" onClick={closeDialog} />

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditDialog/ContestAnnouncementEditDialog.scss

@@ -1,20 +1,3 @@
 .contest-announcement-edit-dialog {
   width: 750px;
-  height: 700px;
-}
-
-.contest-announcement-edit-dialog-body {
-  height: 570px;
-}
-
-// This is to compensate the increase in toolbar height
-
-@media only screen and (max-width: 600px) {
-  .contest-announcement-edit-dialog {
-    height: 750px;
-  }
-
-  .contest-announcement-edit-dialog-body {
-    height: 620px;
-  }
 }

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementEditForm/ContestAnnouncementEditForm.jsx

@@ -6,6 +6,7 @@ import { FormSelect2 } from '../../../../../../components/forms/FormSelect2/Form
 import { FormTextInput } from '../../../../../../components/forms/FormTextInput/FormTextInput';
 import { Required } from '../../../../../../components/forms/validations';
 import { ContestAnnouncementStatus } from '../../../../../../modules/api/uriel/contestAnnouncement';
+import { ContestAnnouncementInstruction } from '../ContestAnnouncementInstruction/ContestAnnouncementInstruction';
 
 export default function ContestAnnouncementEditForm({ onSubmit, initialValues, renderFormComponents }) {
   const statusField = {
@@ -33,6 +34,7 @@ export default function ContestAnnouncementEditForm({ onSubmit, initialValues, r
     <>
       <Field component={FormSelect2} {...statusField} />
       <Field component={FormTextInput} {...titleField} />
+      <ContestAnnouncementInstruction />
       <Field component={FormRichTextArea} {...contentField} />
     </>
   );

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementInstruction/ContestAnnouncementInstruction.jsx

@@ -0,0 +1,36 @@
+import { Button, Callout, Collapse } from '@blueprintjs/core';
+import { useState } from 'react';
+
+export function ContestAnnouncementInstruction() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => setIsOpen(!isOpen);
+
+  return (
+    <div>
+      <Button
+        onClick={handleToggle}
+        rightIcon={isOpen ? 'chevron-up' : 'chevron-down'}
+        text="Add Image to Your Contest Announcement"
+        style={{ marginBottom: '10px' }}
+      />
+      <Collapse isOpen={isOpen}>
+        <Callout className="bp5-icon-info-sign content-card__section">
+          <ol>
+            <li>
+              Navigate to <strong>Settings</strong> and enable the <strong>Files</strong> module.
+            </li>
+            <li>
+              In the <strong>Contest Menu</strong> &gt; <strong>Files</strong> section, click on{' '}
+              <strong>Upload File</strong> to upload your desired image.
+            </li>
+            <li>
+              Insert the uploaded image in the Content form below using the following format:{' '}
+              <code>download/&lt;your-image-file-name.jpg&gt;</code>
+            </li>
+          </ol>
+        </Callout>
+      </Collapse>
+    </div>
+  );
+}