Add ICE design for create Announcement view

refs VICE-4189
flag=instui_nav

Test plan:
 - Enable instui_nav FF
 - Go to Announcements (or Discussions) page
 - Click to '+ Announcement' in the right corner os page
 - Check the loaded page contains this header: Create Announcement
 - It need to be works same in Discussion page

Change-Id: Ia8c3bc47b99d182c1f0522e342064b5fff9822d8
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/348427
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Roland Beres <roland.beres@instructure.com>
Reviewed-by: Daniel Matyas Vincze <daniel.vincze@instructure.com>
Product-Review: Donát Bali-Papp <donat.balipapp@instructure.com>

ui/features/discussion_topic_edit_v2/react/components/DiscussionTopicForm/DiscussionTopicForm.jsx

@@ -73,9 +73,13 @@ import {
 import {MissingSectionsWarningModal} from '../MissingSectionsWarningModal/MissingSectionsWarningModal'
 import {flushSync} from 'react-dom'
 import {SavingDiscussionTopicOverlay} from '../SavingDiscussionTopicOverlay/SavingDiscussionTopicOverlay'
+import {Heading} from "@instructure/ui-heading";
+import WithBreakpoints, {breakpointsShape} from '@canvas/with-breakpoints'
 
 const I18n = useI18nScope('discussion_create')
 
+const instUINavEnabled = () => window.ENV?.FEATURES?.instui_nav
+
 export const getAbGuidArray = event => {
   const {data} = event.data
 
@@ -99,7 +103,7 @@ export const isGuidDataValid = event => {
   return true
 }
 
-export default function DiscussionTopicForm({
+function DiscussionTopicForm({
   isEditing,
   currentDiscussionTopic,
   isStudent,
@@ -112,6 +116,7 @@ export default function DiscussionTopicForm({
   apolloClient,
   isSubmitting,
   setIsSubmitting,
+  breakpoints,
 }) {
   const rceRef = useRef()
   const textInputRef = useRef()
@@ -600,15 +605,28 @@ export default function DiscussionTopicForm({
     })
   }
 
+  const renderHeading = () => {
+    const itemMargin = breakpoints.desktopOnly ? '0 0 large' : '0 0 medium'
+    const headerText = isAnnouncement ? I18n.t('Create Announcement') : I18n.t('Create Discussion')
+    const titleContent = title ?? headerText
+    return (
+      instUINavEnabled() ? (
+          <Flex direction="column" as="div">
+            <Flex.Item margin={itemMargin} overflow="hidden">
+              <Heading level="h1">{headerText}</Heading>
+            </Flex.Item>
+          </Flex>
+        ) : (
+        <ScreenReaderContent>
+          <h1>{titleContent}</h1>
+        </ScreenReaderContent>
+      )
+    )
+  }
+
   return (
     <>
-      <ScreenReaderContent>
-        {title ? (
-          <h1>{title}</h1>
-        ) : (
-          <h1>{isAnnouncement ? I18n.t('New Announcement') : I18n.t('New Discussion')}</h1>
-        )}
-      </ScreenReaderContent>
+      {renderHeading()}
       <FormFieldGroup description="" rowSpacing="small">
         {(isUnpublishedAnnouncement || isEditingAnnouncement) && (
           <Alert variant={announcementAlertProps().variant}>{announcementAlertProps().text}</Alert>
@@ -1052,6 +1070,7 @@ DiscussionTopicForm.propTypes = {
   apolloClient: PropTypes.object,
   isSubmitting: PropTypes.bool,
   setIsSubmitting: PropTypes.func,
+  breakpoints: breakpointsShape,
 }
 
 DiscussionTopicForm.defaultProps = {
@@ -1064,3 +1083,5 @@ DiscussionTopicForm.defaultProps = {
   isSubmitting: false,
   setIsSubmitting: () => {},
 }
+
+export default WithBreakpoints(DiscussionTopicForm)

ui/features/discussion_topic_edit_v2/react/components/DiscussionTopicForm/__tests__/DiscussionTopicForm.test.jsx

@@ -17,7 +17,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import {render, waitFor, fireEvent} from '@testing-library/react'
+import {render, waitFor, fireEvent, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import DiscussionTopicForm, {isGuidDataValid, getAbGuidArray} from '../DiscussionTopicForm'
@@ -79,6 +79,30 @@ describe('DiscussionTopicForm', () => {
     }
   })
 
+  describe('instui_nav feature flag is enabled', () => {
+    const oldEnv = window.ENV
+    beforeEach(() => {
+      window.ENV.FEATURES =  {instui_nav: true}
+    })
+
+    afterEach(() => {
+      window.ENV = oldEnv
+    })
+
+    it('renders title if came from Announcements page', () => {
+      window.ENV.DISCUSSION_TOPIC.ATTRIBUTES.is_announcement = true
+      const document = setup()
+      expect(document.getAllByText('Create Announcement').length).toBe(1)
+    })
+
+    it('renders title if came from Discussion page', () => {
+      window.ENV.DISCUSSION_TOPIC.ATTRIBUTES.is_announcement = false
+      const document = setup()
+      expect(document.getAllByText('Create Discussion').length).toBe(1)
+    })
+
+  })
+
   it('renders', () => {
     const document = setup()
     expect(document.getByText('Topic Title')).toBeInTheDocument()

ui/features/discussion_topics_index/react/components/IndexHeader.jsx

@@ -220,8 +220,8 @@ export default class IndexHeader extends Component {
                     href={`/${this.props.contextType}s/${this.props.contextId}/discussion_topics/new`}
                     color="primary"
                     id="add_discussion"
+                    renderIcon={IconPlusLine}
                   >
-                    <IconPlusLine />
                     <ScreenReaderContent>{I18n.t('Add discussion')}</ScreenReaderContent>
                     <PresentationContent>{I18n.t('Discussion')}</PresentationContent>
                   </Button>