Issue under advanced configuration dialog content within the Endpoint page

[ashera96]

Description

The following pop-up appears when clicking on the Endpoint Configuration icon within the Endpoints page. We need to fix the misaligned Action text highlighted below.

Note, we need to fix this for normal APIs, AI APIs and MCP Servers

Steps to Reproduce

1. Deploy sample pizzashack API
2. Navigate to the Endpoints page
3. Click on Endpoint Configurations under the production or sandbox endpoint
4. You will be able to notice the above-highlighted UI.

Version

4.6.0

Environment Details (with versions)

No response

[Iduranga-Uwanpriya]

Hi @chamilaadhi I’d like to reserve this issue. I can fix the UI alignment of the Action text in the Endpoint Configuration popup and ensure consistency across normal APIs, AI APIs, and MCP Servers.

[dhananjayaaps]

Hi, I am interested in this issue. Could you assign it to me if it is still available?

[Sanjaya-Samudra]

Hi! 👋 Thanks for pointing this out. I’ve reviewed the issue and clearly see the misaligned "Enable Token Forwarding" label in the pop-up. I’ll go ahead and fix the alignment to ensure everything looks clean and consistent in the UI. I’ll also make sure the change works across all relevant API types (normal APIs, AI APIs, and MCP Servers) as mentioned.

Looking forward to submitting a fix if you can assign me!

[yasandu0505]

I can work on this @ashera96 . Thanks

[tharikaGitHub]

@dhananjayaaps you can start working on this issue.

@Iduranga-Uwanpriya as you already have a couple of issues assigned I will assign this issue to @dhananjayaaps. Once you complete the existing issues, we will assign you a new one.

[tharikaGitHub]

Hi @dhananjayaaps how is the progress of this issue?

[dhananjayaaps]

I am still working on this and will try to fix it as soon as possible.

[tharikaGitHub]

Hi @dhananjayaaps did you get a chance to check this issue?

[dhananjayaaps]

I did some work on this, but with my busy schedule, I think it would be better to hand it over to someone else for Hacktoberfest.

[tharikaGitHub]

Hi @dhananjayaaps Ack. Thanks for informing.

[Chamal1120]

@ashera96 @tharikaGitHub Since I already worked with the API Manager and there is no assignee to this can I get this assigned?

[tharikaGitHub]

Hi @Chamal1120,

Yes sure you can start working on this. I have assigned the issue to you.

Thanks, Tharika.

[Chamal1120]

@tharikaGitHub @ashera96 It seems to be that this is how MUI default styling is defined. The component that related this in the current codebase does not override any property that affects the input labels.

followings are the all overrides for this component. Only width has overrided.

const Root = styled('div')(({ theme }) => ({
    [`& .${classes.formControl}`]: {
        width: '500px',
    },
    [`& .${classes.subTitle}`]: {
        fontSize: '1rem',
        paddingTop: theme.spacing(1),
        paddingBottom: theme.spacing(1),
        marginBottom: theme.spacing(1),
    },
    [`& .${classes.configContainer}`]: {
        paddingTop: '10px',
    },
    [`& .${classes.configSubContainer}`]: {
        paddingBottom: '10px',
        marginTop: '5px',
        padding: '5px',
    },
    [`& .${classes.textField}`]: {
        marginRight: theme.spacing(1),
        width: '45%',
    },
    [`& .${classes.advanceDialogActions}`]: {
        display: 'flex',
        justifyContent: 'flex-end',
    },
}));

If I override the input label property and try to make the input lables align with the other left aligned tags as folows, (MUI uses transform to align labels)

    [`& .${classes.formControl} .MuiInputLabel-outlined`]: {
        transform: 'translate(0, 6px) scale(1)',
    },

This affects to all input labels but labels which are not inside the input boxes does not goes as we expect.

Results in a inconsistency like this

Then tried adjusting it through this classes.subTitle class but it didn't reflect any change.

My guess is we should keep this as the way it is now in the original code since it is perfectly aligned with other input labels (Error Code, Initial Duration, Factor and etc) using the default MUI styling.

If Action label needs to be algined with the Connection timeout for some intentional reason, I could specifically target and override that tag's style using MUI's sx property.

Let me know what to do or if I have misunderstood anything.

[tharikaGitHub]

Hi @Chamal1120,

Thank you for the analysis. As we have a default value already set for the Action dropdown in the Connection Timeout section, the input label Action is seen closer to the heading than it should ideally be. This gives a disconnected feeling to the Action label and the dropdown that it should be attached to.

We could either increase the gap between the heading and the Action label to give more sense to it. What do you think?

Thanks, Tharika.

[Chamal1120]

@tharikaGitHub I can agree with providing a space between Connection timeout heading and Action label would make it much pleasing to the eye. The target css variable for these labels without input boxes is classes.subTitle I think. I tried adding various classic css properties to it but they never reflect a change. I'll try grepping the MUI documentation once more.

Otherwise the only option is to manually target these two label tags (error code and action) and use sx property. Will that be fine?

[ashera96]

Hi @Chamal1120,

Can you maybe try to change the dropdown styling to align the other input fields (refer to [1])? Then the action label will remain within the boundaries of that dropdown itself. Can you try that change and attach a screenshot?

[1] https://mui.com/material-ui/react-select/#basic-select

[Chamal1120]

Hi @Chamal1120,

Can you maybe try to change the dropdown styling to align the other input fields (refer to [1])? Then the action label will remain within the boundaries of that dropdown itself. Can you try that change and attach a screenshot?

[1] mui.com/material-ui/react-select#basic-select

I'll check this and let you know.

[Chamal1120]

@tharikaGitHub I can agree with providing a space between Connection timeout heading and Action label would make it much pleasing to the eye. The target css variable for these labels without input boxes is classes.subTitle I think. I tried adding various classic css properties to it but they never reflect a change. I'll try grepping the MUI documentation once more.

Otherwise the only option is to manually target these two label tags (error code and action) and use sx property. Will that be fine?

Tried @tharikaGitHub advice and increased the gap between the labels subtitles. Was able to do that easily by adding a top margin property to the formControl tag.

This looks somewhat better when all dropdowns are selected as can be seen below.

However when dropdowns are deselected, this is how it looks

Watch this video to see how it transitions

https://github.com/user-attachments/assets/a4d51c68-8354-4d5c-b6a4-f81c5ca5b63d

What are your thoughts @ashera96 @tharikaGitHub ?

[Chamal1120]

Also @ashera96 how do I test the Advanced Configurations modals of AI APIs and MCP Servers? Is there a guide to create those as well like PizzaShack API?

[Chamal1120]

@tharikaGitHub @ashera96 Can I get a review on my analysis on the UI change?

[tharikaGitHub]

Hi @Chamal1120, these changes are fine, but this results in an extra space in the top drop downs as well. Is there a possibility to use the boxed styling as per [1] for the 3 drop downs like below? I think it would address our concerns. WDYT?

instead of,

[1] https://mui.com/material-ui/react-select/

[Chamal1120]

Hi @Chamal1120, these changes are fine, but this results in an extra space in the top drop downs as well. Is there a possibility to use the boxed styling as per [1] for the 3 drop downs like below? I think it would address our concerns. WDYT?

instead of, [1] [mui.com/material-ui/react-select](https://mui.com/material-ui/react-select/)

@tharikaGitHub this is possible. But won't that go against the uniformity with other boxes in the complete application? Since I'm pretty new to these products (I have only seen the UIs relating to the issues I worked on) I don't know where else these formcontrol tags are used. Also changing it on bunch of components would also become a very cumbersome task since as far as I can tell, styles overrides are defined component wise.

Please correct me if im wrong here.

[tharikaGitHub]

Hi @Chamal1120,

Regarding,

But won't that go against the uniformity with other boxes in the complete application?

AFAIK other drop downs in the publisher web application has the box form like below. Is there any drop down that goes against that apart from this Advanced Configurations UI?

[Chamal1120]

@tharikaGitHub I didn't encounter those underlined dropdown boxes anywhere else during my journey fixing the issues but if it is the way as you say, I'll update the dropdown boxes in the advanced configuration modals to that outlined style.

But can you tell me how to access the advanced configurations modals of AI APIs and MCP Servers? Is it the same way as I created the PizzaShack API?

[tharikaGitHub]

Hi @Chamal1120, you can access the advanced configuration section in AI APIs and MCP servers by accessing the Endpoints page edit option. You can follow [1] and [2] to create AI APIs and MCP Servers.

For AI APIs you don't have to configure access tokens as described in the first part of the doc to check advanced configurations. You can just create the API to view the endpoints section.

[1] https://apim.docs.wso2.com/en/4.6.0/manage-apis/design/create-api/create-ai-api/create-an-ai-api/#! [2] https://apim.docs.wso2.com/en/4.6.0/mcp/create-from-openapi/

[Chamal1120]

Hi @Chamal1120, these changes are fine, but this results in an extra space in the top drop downs as well. Is there a possibility to use the boxed styling as per [1] for the 3 drop downs like below? I think it would address our concerns. WDYT?

instead of, [1] [mui.com/material-ui/react-select](https://mui.com/material-ui/react-select/)

Damn this idea fixed it with two lines!

deselected

selected

I never could'hv thought of that. I wasted a lot of time trying to understand MUI syle overrides 😅

Thanks @tharikaGitHub for the advice!

[tharikaGitHub]

Great! np.. @Chamal1120 This looks better. Thanks for looking into it.

[Chamal1120]

@tharikaGitHub I cannot see the MCP servers section in the publisher portals sidebar.

[tharikaGitHub]

Hi @Chamal1120 this feature is only available in the ongoing development branch of APIM. I see that you are using APIM 4.5.0. You can build the latest pack in product-apim repo to check this.

[Chamal1120]

Hi @Chamal1120 this feature is only available in the ongoing development branch of APIM. I see that you are using APIM 4.5.0. You can build the latest pack in product-apim repo to check this.

Okay, I'll build and get the pack. Thanks for mentioning that.