Commit 52fed210 authored by Marek Veselý's avatar Marek Veselý
Browse files

Merge branch '590-back-button' into 'main' 

Refactor back button behaviour

Closes #590

See merge request inject/frontend!525
parents efc4895a b913d818

frontend/src/components/LinkButton/index.tsx

+8 −2
Original line number Diff line number Diff line
@@ -12,9 +12,15 @@ export interface LinkButtonProps { 
  link?: LinkType

  button: AnchorButtonProps

  end?: boolean

  disableActive?: boolean

}



const LinkButton: FC<LinkButtonProps> = ({ link, button, end }) => {

const LinkButton: FC<LinkButtonProps> = ({

  link,

  button,

  end,

  disableActive,

}) => {

  const nav = useNavigate()

  const href = useHref(

    /*
@@ -43,7 +49,7 @@ const LinkButton: FC<LinkButtonProps> = ({ link, button, end }) => { 
          right: -16px;

        }

      `}

      active={!!active}

      active={!!active && !disableActive}

      {...button}

      href={link ? href : undefined}

      onClick={e => {

frontend/src/instructor/InstructorTeamSelector/SelectorPage.tsx

+2 −0
Original line number Diff line number Diff line
@@ -135,6 +135,8 @@ const SelectorPage: FC<{ exerciseId: string }> = ({ exerciseId }) => { 
            params: {

              exerciseId,

            },

            replace: true,

            flushSync: true,

          })

        }}

      >

frontend/src/instructor/InstructorTodoLog/LogItem.tsx

+71 −13
Original line number Diff line number Diff line 
import { getTitle } from '@/actionlog/InjectMessage/utils'

import { EmailSelection } from '@/analyst/utilities'

import { useNavigate } from '@/router'

import type { BackLoc } from '@/views/InstructorView/useLeftNavbar'

import { Button, ButtonGroup, Classes, Icon, Tag } from '@blueprintjs/core'

import type { IconName } from '@blueprintjs/icons'

import { css, cx } from '@emotion/css'
@@ -43,7 +44,8 @@ const GetTemplateCount: FC<{ 


const GetContent: FC<{

  actionLog: SimplifiedActionLog

}> = ({ actionLog }) => {

  contextType: 'exercise' | 'team'

}> = ({ actionLog, contextType }) => {

  const { details } = actionLog

  const nav = useNavigate()
@@ -73,10 +75,12 @@ const GetContent: FC<{ 
                    threadId: details.thread.id,

                    exerciseId: actionLog.team.exercise.id,

                    teamId: actionLog.team.id,

                    tab: actionLog.requiresAttention

                      ? EmailSelection.SENT

                      : EmailSelection.RECEIVED,

                    tab: EmailSelection.SENT,

                  },

                  state: {

                    autoRedirect: true,

                    backloc: constructBackUrl(actionLog, contextType),

                  } as BackLoc,

                })

              }}

              round
@@ -129,7 +133,41 @@ const getIcon = (channelType: SimplifiedActionLog['type']): IconName => { 
  }

}



export const useNavTo = () => {

const constructBackUrl = (

  actionLog: SimplifiedActionLog,

  contextType: 'exercise' | 'team' | 'none'

) =>

  contextType !== 'none'

    ? {

        button: {

          text: 'Back to Overview',

          minimal: true,

          icon: 'double-chevron-left',

        },

        end: true,

        link:

          contextType === 'exercise'

            ? [

                '/instructor/:exerciseId/',

                {

                  params: {

                    exerciseId: actionLog.team.exercise.id,

                  },

                },

              ]

            : [

                '/instructor/:exerciseId/:teamId',

                {

                  params: {

                    exerciseId: actionLog.team.exercise.id,

                    teamId: actionLog.team.id,

                  },

                },

              ],

      }

    : undefined



export const useNavTo = (contextType: 'exercise' | 'team' | 'none') => {

  const nav = useNavigate()

  return useCallback((actionLog: SimplifiedActionLog) => {

    switch (actionLog.details.__typename) {
@@ -141,6 +179,9 @@ export const useNavTo = () => { 
            exerciseId: actionLog.team.exercise.id,

            teamId: actionLog.team.id,

          },

          state: {

            backloc: constructBackUrl(actionLog, contextType),

          } as BackLoc,

        })

        break

      case 'CustomInjectDetailsType':
@@ -151,6 +192,9 @@ export const useNavTo = () => { 
            exerciseId: actionLog.team.exercise.id,

            teamId: actionLog.team.id,

          },

          state: {

            backloc: constructBackUrl(actionLog, contextType),

          } as BackLoc,

        })

        break

      case 'EmailType':
@@ -163,7 +207,8 @@ export const useNavTo = () => { 
          },

          state: {

            autoRedirect: true,

          },

            backloc: constructBackUrl(actionLog, contextType),

          } as BackLoc,

        })

        break

      case 'TeamQuestionnaireStateType':
@@ -174,6 +219,9 @@ export const useNavTo = () => { 
            exerciseId: actionLog.team.exercise.id,

            teamId: actionLog.team.id,

          },

          state: {

            backloc: constructBackUrl(actionLog, contextType),

          } as BackLoc,

        })

        break

      case 'ToolDetailsType':
@@ -184,6 +232,9 @@ export const useNavTo = () => { 
            exerciseId: actionLog.team.exercise.id,

            teamId: actionLog.team.id,

          },

          state: {

            backloc: constructBackUrl(actionLog, contextType),

          } as BackLoc,

        })

        break

    }
@@ -237,8 +288,9 @@ const RequiresAttention: React.FC = () => ( 


const LogItemActions: React.FC<{

  actionLog: SimplifiedActionLog

}> = ({ actionLog }) => {

  const navTo = useNavTo()

  contextType: 'exercise' | 'team'

}> = ({ actionLog, contextType }) => {

  const navTo = useNavTo(contextType)

  const client = useClient()

  const formDisabled =

    actionLog.details.__typename === 'TeamQuestionnaireStateType' &&
@@ -332,8 +384,9 @@ const LogItemRender = forwardRef< 
  {

    style?: CSSProperties

    actionLog: SimplifiedActionLog

    contextType: 'exercise' | 'team'

  }

>(function LogItem({ actionLog, style }, ref) {

>(function LogItem({ actionLog, contextType, style }, ref) {

  return (

    <div

      ref={ref}
@@ -362,11 +415,11 @@ const LogItemRender = forwardRef< 
            <Timestamp minimal datetime={new Date(actionLog.timestamp || 0)} />

          </>

        )}

        <GetContent actionLog={actionLog} />

        <GetContent actionLog={actionLog} contextType={contextType} />

      </div>



      <div style={{ width: 'max-content' }}>

        <LogItemActions actionLog={actionLog} />

        <LogItemActions actionLog={actionLog} contextType={contextType} />

      </div>

    </div>

  )
@@ -377,8 +430,9 @@ const LogItemSuspenseLoader = forwardRef< 
  {

    style?: CSSProperties

    actionLogId: string

    contextType: 'exercise' | 'team'

  }

>(function LogItem({ actionLogId, style }, ref) {

>(function LogItem({ actionLogId, contextType, style }, ref) {

  const [{ data }] = useTypedQuery({

    query: GetSingleActionLog,

    variables: {
@@ -401,6 +455,7 @@ const LogItemSuspenseLoader = forwardRef< 
      key={actionLogId}

      actionLog={data.actionLog}

      ref={ref}

      contextType={contextType}

      style={style}

    />

  )
@@ -412,8 +467,9 @@ const LogItem = forwardRef< 
    style?: CSSProperties

    actionLog: SimplifiedActionLog | null

    actionLogId: string

    contextType: 'exercise' | 'team'

  }

>(function LogItem({ actionLog, actionLogId, style }, ref) {

>(function LogItem({ actionLog, contextType, actionLogId, style }, ref) {

  if (actionLog === null) {

    return (

      <Suspense fallback={<LogSkeleton style={style} />} key={actionLogId}>
@@ -421,6 +477,7 @@ const LogItem = forwardRef< 
          ref={ref}

          style={style}

          actionLogId={actionLogId}

          contextType={contextType}

        />

      </Suspense>

    )
@@ -430,6 +487,7 @@ const LogItem = forwardRef< 
        ref={ref}

        style={style}

        actionLog={actionLog}

        contextType={contextType}

        key={actionLog.id}

      />

    )

frontend/src/instructor/InstructorTodoLog/index.tsx

+3 −0
Original line number Diff line number Diff line
@@ -17,6 +17,7 @@ const InstructorTodoLog: FC< 
    height: string

    done?: boolean

    noAttention?: boolean

    contextType: 'exercise' | 'team'

    selectedTeams: string[]

  } & (

    | {
@@ -31,6 +32,7 @@ const InstructorTodoLog: FC< 
> = ({

  actionLogs,

  actionLogIds,

  contextType,

  done,

  height,

  selectedTeams,
@@ -112,6 +114,7 @@ const InstructorTodoLog: FC< 
                    : null

                }

                actionLogId={filtered[item.index].id}

                contextType={contextType}

              />

            </div>

          ))}

frontend/src/pages/(navbar)/_layout.tsx

+3 −3
Original line number Diff line number Diff line 
import NavbarUi from '@/components/Navbar'

import Navbar from '@/views/Navbar'

import { css } from '@emotion/css'

import { Outlet } from 'react-router-dom'
@@ -8,9 +8,9 @@ const page = css` 


const Layout = () => (

  <div className={page}>

    <NavbarUi>

    <Navbar>

      <Outlet />

    </NavbarUi>

    </Navbar>

  </div>

)