Merge branch 'main' into rework-tool-ui

import { experimentalV2, useExperimentalV2 } from '../vars/experimentalV2'

import SwitchSetting from './generic/SwitchSetting'

const Experimental = () => (

  <SwitchSetting

    title='Experimental V2'

    subtitle='Enable experimental features, these are globally enabled'

    useVar={useExperimentalV2}

    variable={experimentalV2}

  />

)

export default Experimental

import { Section, Switch } from '@blueprintjs/core'

import { relativeTime, useRelativeTime } from '../vars/relativeTime'

import SwitchSetting from './generic/SwitchSetting'

const RelativeTime = () => {

  const View = () => {

    const relativeTimeVar = useRelativeTime()

    return (

      <>

        <span>{relativeTimeVar ? 'Relative time' : 'Absolute time'}</span>

        <Switch

          style={{ margin: '0' }}

          checked={relativeTimeVar}

          onChange={() => relativeTime(!relativeTimeVar)}

const RelativeTime = () => (

  <SwitchSetting

    title='Relative Time'

    subtitle='Change the representation of time in analyst view, either relatively or absolutely.'

    trueValue='Relative Time'

    falseValue='Absolute Time'

    useVar={useRelativeTime}

    variable={relativeTime}

  />

      </>

)

  }

  return (

    <Section

      title={'Relative Time'}

      subtitle={

        'Change the representation of time in analyst view, either relatively or absolutely.'

      }

      rightElement={

        <div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }}>

          <View />

        </div>

      }

    />

  )

}

export default RelativeTime

/* eslint-disable @typescript-eslint/no-explicit-any */

import { Section, Switch } from '@blueprintjs/core'

import type { makeVar } from '@inject/graphql/client/reactive'

import type { FC } from 'react'

const SwitchSetting: FC<{

  useVar: () => any

  variable: ReturnType<typeof makeVar<any>>

  title: string

  subtitle?: string

  trueValue?: string

  falseValue?: string

}> = ({

  useVar,

  variable,

  title,

  subtitle,

  trueValue = 'Yes',

  falseValue = 'No',

}) => {

  const View = () => {

    const reactiveVar = useVar()

    return (

      <>

        <span>{reactiveVar ? trueValue : falseValue}</span>

        <Switch

          style={{ margin: '0' }}

          checked={reactiveVar}

          onChange={() => variable(!reactiveVar)}

        />

      </>

    )

  }

  return (

    <Section

      title={title}

      subtitle={subtitle}

      rightElement={

        <div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }}>

          <View />

        </div>

      }

    />

  )

}

export default SwitchSetting

import { makeVar, useReactiveVar } from '@inject/graphql/client/reactive'

const key = 'useExperimentalV2'

const initialSettings: boolean = localStorage.getItem(key) === 'true'

export const experimentalV2 = makeVar<boolean>(initialSettings)

export const useExperimentalV2 = () => useReactiveVar(experimentalV2)

function change(value: boolean) {

  localStorage.setItem(key, value.toString())

}

experimentalV2.onNextChange(function onNext() {

  change(experimentalV2())

  experimentalV2.onNextChange(onNext)

})

import ColorMode from '@/clientsettings/components/ColorMode'

import Connection from '@/clientsettings/components/Connection'

import Experimental from '@/clientsettings/components/Experimental'

import GraphiQL from '@/clientsettings/components/GraphiQL'

import InstructorTeams from '@/clientsettings/components/InstructorTeams'

import Logout from '@/clientsettings/components/Logout'

          <RelativeTime />

        </>

      )}

      <Experimental />

    </Container>

  )

}