UI part of a plugin not displayed

[EricJolibois]

Hello!

In Toucan we've created a small plugin that has just been published https://marketplace.alteryx.com/en-US/apps/428268

Unfortunately one of our clients tried it and the form on the left is empty

The code is very easy

import React, { useContext, useState } from 'react';
import ReactDOM from 'react-dom';
import { AyxAppWrapper, Box, FormControl, Grid, Input, InputLabel, Typography, makeStyles, Theme } from '@alteryx/ui';
import { Context as UiSdkContext, DesignerApi } from '@alteryx/react-comms';

interface ToucanInputs {
  baseroute: string;
  appId: string;
  opaqueToken: string;
  datasetName: string;
};

const useStyles = makeStyles((theme: Theme) => ({
  toucan: {
    height: '125px',
    width: '125px'
  }
}));

const App = () => {
  const classes = useStyles();
  const [model, handleUpdateModel] = useContext(UiSdkContext);
  const handleChange = (field: keyof ToucanInputs) => (event) => {
    handleUpdateModel({ ...model, Configuration: { ...model.Configuration, [field]: event.target.value } });
  };

  return (
    <Box p={4}>
      <Grid container spacing={4} direction="column" alignItems="center">
        <Grid item>
          <FormControl>
            <InputLabel htmlFor="baseroute-input">Baseroute</InputLabel>
            <Input
              id="baseroute-input"
              onChange={handleChange('baseroute')}
            />
          </FormControl>
        </Grid>
        <Grid item>
          <FormControl>
            <InputLabel htmlFor="app-id-input">App id</InputLabel>
            <Input
              id="app-id-input"
              onChange={handleChange('appId')}
            />
          </FormControl>
        </Grid>
        <Grid item>
          <FormControl>
            <InputLabel htmlFor="dataset-name-input">Dataset name</InputLabel>
            <Input
              id="dataset-name-input"
              onChange={handleChange('datasetName')}
            />
          </FormControl>
        </Grid>
        <Grid item>
          <FormControl>
            <InputLabel htmlFor="opaque-token-input">Opaque token</InputLabel>
            <Input
              id="opaque-token-input"
              onChange={handleChange('opaqueToken')}
            />
          </FormControl>
        </Grid>
      </Grid>
    </Box>
  )
}

const Tool = () => {
  return (
    <DesignerApi messages={{}}>
      <AyxAppWrapper> 
        <App />
      </AyxAppWrapper>
    </DesignerApi>
  )
}

ReactDOM.render(
  <Tool />,
  document.getElementById('app')
);

They tried on 2022.3 and 2023.2

Do you know why this happens?

Thank you so much

[baileykaplan]

@EricJolibois this code seems to be working as expected, but there may be an issue with how the frontend code is integrating with the backend code. 

[EricJolibois]

Thank you for the quick reply.
I made https://github.com/PrettyWood/toucalteryx public so that you can check the code.
It's pretty straightforward and I just followed the documentation but I may have missed something

Again thanks for your help

[JarrodT]

@EricJolibois Can you confirm that you used the command --use-ui when you built the yxi?

Here's what the tool folder looks after installing:

But it seems to be missing the app.js, index.html and runtime.js files (see below for another SDK tool's folder). 

Note - the --use-ui command isn't necessary in the newest version of the SDK. 

[EricJolibois]

Yes I used `--use-ui`
As you can see https://github.com/PrettyWood/toucalteryx/tree/main/ui/Toucan is mostly the template generated by the SDK

The weird part is that it worked perfectly on my Alteryx builder when I added the plugin.

[JarrodT]

When you say the "Alteryx builder" are you referring to the harness or installing it for your instance of Designer?

I would try creating a new workspace and copying over the toucan.py file in your backend folder and the index.tsx file in your ui/Toucan/src folder and rebuilding the plugin.