Commit fdd1e5db authored by Patrik Kotúček's avatar Patrik Kotúček
Browse files

Merge branch '245-enable-omitting-tool-header-in-the-tool-output' into 'main' 

245 Tool header with argument

Closes inject-issues#245

See merge request inject/frontend!814
parents 78f69335 6b8e4b4b

frontend/src/actionlog/InjectMessage/Content/ToolContent.tsx

+11 −28
Original line number Diff line number Diff line 
import { css } from '@emotion/css'

import type { IToolDetails, TToolDetails } from '@inject/graphql'

import { useTranslationFrontend } from '@inject/locale'

import { breakWord } from '@inject/shared'

import type { NavigateOptions } from '@tanstack/react-router'

import type { FC } from 'react'

import ContentComponent from '../../../components/ContentComponent'
@@ -25,10 +23,6 @@ const response = css` 
  overflow: auto;

`



const emphasized = css`

  font-weight: bold;

`



interface ToolContentProps {

  details: TToolDetails | IToolDetails

  teamId: string
@@ -42,18 +36,8 @@ const ToolContent: FC<ToolContentProps> = ({ 
  exerciseId,

  inInstructor,

  getFileLink,

}) => {

  const { t } = useTranslationFrontend()

  return (

}) => (

  <div className={wrapper}>

      {details.tool.requiresInput && (

        <>

          <div className={emphasized}>{t('tools.argument')}</div>

          <div className={breakWord}>{details.argument}</div>

          <div />

        </>

      )}

      <div className={emphasized}>{t('tools.response')}</div>

    <div className={response}>

      <ContentComponent

        getFileLink={getFileLink}
@@ -64,6 +48,5 @@ const ToolContent: FC<ToolContentProps> = ({ 
    </div>

  </div>

)

}



export default ToolContent

frontend/src/actionlog/InjectMessage/index.tsx

+27 −3
Original line number Diff line number Diff line
@@ -3,6 +3,7 @@ import { Classes, Icon, Spinner } from '@blueprintjs/core' 
import { css } from '@emotion/css'

import type { ActionLog } from '@inject/graphql'

import { isOverlay, SetTimestampRead, useTypedMutation } from '@inject/graphql'

import { useTranslationFrontend } from '@inject/locale'

import {

  HelpIcon,

  LinkButton,
@@ -21,6 +22,16 @@ const title = css` 
  font-weight: bold;

`



const argument = css`

  display: block;

`



const titleWrapper = css`

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

`



// TODO: ellipsize for too long messages, expand onInspect

interface InjectMessageProps {

  actionLog: ActionLog
@@ -43,6 +54,8 @@ const InjectMessage: FC<InjectMessageProps> = ({ 
}) => {

  const [, setTimestampRead] = useTypedMutation(SetTimestampRead)



  const { t } = useTranslationFrontend()



  // this ensures the message is rendered as 'not read' the first time it's rendered

  const [initialTimestampRead, setInitialTimestampRead] = useState(false)
@@ -101,11 +114,22 @@ const InjectMessage: FC<InjectMessageProps> = ({ 
          <MessageHeaderItem>

            <Icon

              className={Classes.TEXT_MUTED}

              style={{ paddingLeft: '0.25rem' }}

              style={{ paddingLeft: '0.25rem', paddingRight: '0.5rem' }}

              icon={getIcon(actionLog.logType)}

            />



            <div className={titleWrapper}>

              <span className={title}>{getTitle(actionLog.details)}</span>

              {(actionLog.details.__typename === 'IToolDetailsType' ||

                actionLog.details.__typename === 'TToolDetailsType') &&

                actionLog.details.tool.requiresInput && (

                  <span className={argument}>

                    <span className={Classes.TEXT_MUTED}>

                      {t('tools.argument')}

                    </span>

                    {` ${actionLog.details.argument}`}

                  </span>

                )}

            </div>

            {postExerciseSubmission && (

              <HelpIcon

                text='This questionnaire can be answered after the exercise is finished.'

shared/components/Message/HeaderItem.tsx

+1 −1
Original line number Diff line number Diff line
@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react' 
const headerItem = css`

  display: flex;

  gap: 0.5rem;

  height: 2.5rem;

  height: 3rem;

  align-items: center;

`