a little cleanup on the add button

src/components/AddServiceIconButton.tsx

@@ -15,24 +15,28 @@ import { SRV_DEVICE_SCRIPT_MANAGER } from "../../jacdac-ts/src/jdom/constants"
 export default function AddServiceIconButton(props: {
  onAdd: (service: jdspec.ServiceSpec) => void
  serviceFilter?: (service: jdspec.ServiceSpec) => boolean
+ serviceSorter?: (
+ left: jdspec.ServiceSpec,
+ right: jdspec.ServiceSpec
+ ) => number
  error?: string
  children?: JSX.Element | JSX.Element[]
 }) {
- const { error, onAdd, children, serviceFilter } = props
+ const { error, onAdd, children, serviceFilter, serviceSorter } = props
  const [servicesAnchorEl, setServicesAnchorEl] =
  useState<null | HTMLElement>(null)
  const servicesMenuId = useId()
- const services = useMemo(
- () =>
- serviceSpecifications()
- .filter(
- srv =>
-  srv.classIdentifier === SRV_DEVICE_SCRIPT_MANAGER ||
-  !isInfrastructure(srv)
-  )
-  .filter(srv => !serviceFilter || serviceFilter(srv)),
- [serviceFilter]
- )
+ const services = useMemo(() => {
+ let res = serviceSpecifications()
+ .filter(
+ srv =>
+ srv.classIdentifier === SRV_DEVICE_SCRIPT_MANAGER ||
+ !isInfrastructure(srv)
+ )
+ .filter(srv => !serviceFilter || serviceFilter(srv))
+ if (serviceSorter) res = res.sort(serviceSorter)
+ return res
+ }, [serviceFilter])
 
  const handleServiceAddClick = (
  event: React.MouseEvent<HTMLButtonElement>

src/components/alert/SimulateDeviceAlert.tsx

@@ -83,14 +83,6 @@ export function SimulateDeviceHint() {
  >
  <LinearScaleIcon />
  </IconButtonWithTooltip>
- <IconButtonWithTooltip
- trackName="simulator.hint.joystick"
- onClick={handleStartSimulator(SRV_GAMEPAD)}
- title="joystick"
- aria-label="start joystick simulator"
- >
- <VideogameAssetIcon />
- </IconButtonWithTooltip>
  <IconButtonWithTooltip
  trackName="simulator.hint.led"
  onClick={handleStartSimulator(SRV_LED)}
@@ -99,14 +91,6 @@ export function SimulateDeviceHint() {
  >
  <TungstenIcon />
  </IconButtonWithTooltip>
- <IconButtonWithTooltip
- trackName="simulator.hint.traffic"
- onClick={handleStartSimulator(SRV_TRAFFIC_LIGHT)}
- title="traffic light"
- aria-label="start traffic light simulator"
- >
- <TrafficIcon />
- </IconButtonWithTooltip>
  or click &nbsp;
  <IconButtonWithTooltip
  trackName="simulator.hint.start"

src/components/makecode/MakeCodeRoleEditorExtension.tsx

@@ -1,5 +1,5 @@
 import { Grid, TextField, Typography } from "@mui/material"
-import React, { ChangeEvent, useMemo } from "react"
+import React, { ChangeEvent, useCallback, useMemo } from "react"
 import { clone, uniqueName } from "../../../jacdac-ts/src/jdom/utils"
 // tslint:disable-next-line: no-submodule-imports match-default-export-name
 import DeleteIcon from "@mui/icons-material/Delete"
@@ -96,14 +96,18 @@ export default function MakeRoleCodeEditorExtension() {
  const { target, configuration, setConfiguration } =
  useMakeCodeEditorExtensionClient()
 
- const hasMakeCodeService = (srv: jdspec.ServiceSpec) => {
- const mkc = resolveMakecodeService(srv)
- return (
- mkc &&
- target &&
- (!mkc.client.targets || mkc.client.targets.indexOf(target.id) > -1)
- )
- }
+ const hasMakeCodeService = useCallback(
+ (srv: jdspec.ServiceSpec) => {
+ const mkc = resolveMakecodeService(srv)
+ return (
+ mkc &&
+ target &&
+ (!mkc.client.targets ||
+ mkc.client.targets.indexOf(target.id) > -1)
+ )
+ },
+ [target]
+ )
  const update = () => {
  setConfiguration(clone(configuration))
  }
@@ -125,6 +129,15 @@ export default function MakeRoleCodeEditorExtension() {
  update()
  }
 
+ const makecodeServiceSorter = useCallback(
+ (l: jdspec.ServiceSpec, r: jdspec.ServiceSpec) => {
+ // favor makecode services supported by released hardware kits
+
+ return l.name.localeCompare(r.name)
+ },
+ []
+ )
+
  return (
  <Grid container direction="row" spacing={2}>
  <Grid item xs={12}>
@@ -149,6 +162,7 @@ export default function MakeRoleCodeEditorExtension() {
  <Grid item xs={12}>
  <AddServiceIconButton
  serviceFilter={hasMakeCodeService}
+ serviceSorter={makecodeServiceSorter}
  onAdd={handleAddService}
  />
  </Grid>