feat(coral): Add Request a new dropdown navigation in Header

[mathieu-anderson]

About this change - What it does

• Add Request new dropdown in Header to directly link to the form for creating:
  • Topic : redirect to existing route /topics/request
  • ACL: redirect to new route /request/acl
  • Schema: redirect to new route /request/schema
  • Connectors: redirects to existing route connectors/request
• To allow for rendering the ACL and Schema request forms without having access to a topic in the URL params, add:
  • ACL: isSubscription prop on TopicConsumerForm and TopicProducerForm is set to true when we have access to a topic name in URL params -> the topic name field is disabled (cannot switch topics in this context).
  • Schema: if topicName picked from params is undefined, render enabled topic names Select

New topic request

New Header link

Screen.Recording.2023-05-05.at.09.21.45.mov

UI navigation

Screen.Recording.2023-05-05.at.09.33.20.mov

New ACL request

New Header link

Screen.Recording.2023-05-05.at.09.22.19.mov

UI navigation (should be from Topic overview which is not implemented)

Screen.Recording.2023-05-05.at.09.38.47.mov

New Schema request

New Header link

Screen.Recording.2023-05-05.at.09.23.33.mov

UI navigation (should be from Topic overview which is not implemented)

Screen.Recording.2023-05-05.at.09.40.25.mov

New Connector request

New Header link

Screen.Recording.2023-05-05.at.09.24.00.mov

UI navigation

Screen.Recording.2023-05-05.at.09.41.31.mov

Resolves: #1114

[programmiri]

General not about navigating / using with keyboard and screenreader:

• I think keyboard navigation works fine! :D
• Screenreader usage is a bit suboptimal. The dropdown is read out correctly, which is already good!
  but SR users don't now that this is part of the navigation and it does go to a page with a form. With a link in a navigation, it's pretty clear what is happening, but not this way. I guess we can't change the elements being used (making it a proper nav with a href would already solve this mostly)? (At least add an extra information with a visually-hidden span or aria-label, so SR users know this not not (only) a "Request new" collapsed menu, but actually acts as navigation to these different forms, could help a bit hopefully)

[programmiri]

Hm I think we need to check out a few different cases. I'm logged in with team DevRel and have different (or none_) topics / env then you currently, and the ACL form does not work very smooth for me.

I can choose an environment where it seems I have no topics and the form just does not change, which feels like I could fill it out, which I can't, because there's not topic :D

And in this recording, after I've chosen the dev env, the other option for env was just gone and I could not reset that in any way.

recording.mov

Schema form looks ok, but I have schemas in the one env that I can chose. But as far as I can see, if I don't have a topic in that env where I can register a schema, I would just see the skeleton loading without more information?

[mathieu-anderson]

I can choose an environment where it seems I have no topics and the form just does not change, which feels like I could fill it out, which I can't, because there's not topic :D

That is pretty weird, but I have seen that state before, so it should be a bug :o

And in this recording, after I've chosen the dev env, the other option for env was just gone and I could not reset that in any way.

That is expected, it's because the topic you chose only exists in this one env. So you can't choose a different env after choosing this topic ^^ If you choose a topic that is in different envs, you will be able to switch.

but I have schemas in the one env that I can chose. But as far as I can see, if I don't have a topic in that env where I can register a schema, I would just see the skeleton loading without more information?

Not sure what you mean :o

[mathieu-anderson]

I'm thinking smartness that makes it so that:

• only environments which have the currently selected topic are in the options
• only the topics that are in the currently selected environments are in the option

Is responsible for the weirdness in your video

[programmiri]

That is expected, it's because the topic you chose only exists in this one env. So you can't choose a different env after choosing this topic ^^ If you choose a topic that is in different envs, you will be able to switch.

I thought so, but I'm not sure if it's ok to leave it like that, because I'm not sure users will understand 🤔

Not sure what you mean :o

(regarding schemas): In TopicSchemaRequests, when the topicNames is undefined, it's showing the loading native select. If something goes wrong with getTopicNames (list will be undefined then and we've no error handling) we will still show the loading animation. And if the list is empty, there's an empty select element without more info.

I think we need designs (or decisions on designs) for different scenarios 🤔 here.

[mathieu-anderson]

I thought so, but I'm not sure if it's ok to leave it like that, because I'm not sure users will understand 🤔

I mean, presumably a user knows in which envs the topic is, so I don't think they would be surprised :o

(regarding schemas): In TopicSchemaRequests, when the topicNames is undefined, it's showing the loading native select. If something goes wrong with getTopicNames (list will be undefined then and we've no error handling) we will still show the loading animation. And if the list is empty, there's an empty select element without more info.

Ah I see! Tbh I didn't think that the topic list could ever be empty. Would that be a frequent occurence? But I do see the issue if something goes wrong with the call to getTopicNames ^^

[programmiri]

I mean, presumably a user knows in which envs the topic is, so I don't think they would be surprised :o

In this cases, I think it's better to not rely on users knowing / remembering things and (where possible) don't make them think at all. I would say we should clarify that with UX. Also, in that caae the form doesn't do anything, so at least an information for users (aka No topics in this environment, please choose a different one or something like that may be helpful.

Tbh I didn't think that the topic list could ever be empty. Would that be a frequent occurence?

I don't know, so we would need to clarify if that's a case that could happen. And even if that shouldn't happen, there could be an error from the Api for some reason & that should be covered.

[mathieu-anderson]

Also, in that caae the form doesn't do anything, so at least an information for users (aka No topics in this environment, please choose a different one or something like that may be helpful.

Yes for sure ^^ It is not harder to do this than to remove them from the list.

And even if that shouldn't happen, there could be an error from the Api for some reason & that should be covered.

Also for sure ^^ Not asking about frequency to use it as an excuse to not address it, just to have a clearer idea of the possible app states ^^

[mathieu-anderson]

@programmiri :

• added disabled options instead of removing the options for unavailable envs: b2be104
  https://user-images.githubusercontent.com/20607294/236823962-814dfb7b-cd1b-4776-a312-3d3b8d7e6def.mov

• added a more explcicit UI regarding the Topic names / Prefix field adcb000

• added Alert components rendered when there is an unforeseen issue while fetching topic names / environments in Schema request form 303d347

[programmiri]

I found a few 🐛 or weird behaviour in ACL form (ofc it's that form, because it's so complex 😅 )

1. Information about choosing env first

When I want to subscribe as a producer, I get that information that I've to choose env etc. first. But when I want to subscribe as a consumer, I don't get that -> I think that should be consistent.

2. Can't reset environment

When I want to subscribe as producer and by mistake chose the wrong environment, I can't change that (I think I could if I have chosen a topic that belongs to other environments too, but then I would only be able to chose these envs and not all I can theoretically choose?). Maybe a we need a way to reset this required filters?

acl-producer-want-to-change-env.mov

3. Environment has no topics suddenly?

Also producer: I've a environment in the list that has no topics (I guess?) and I can chose it, but then it's disabled and I'm stuck because of 2. But the env I just chose shows "unavailable for selected topic" even tho I haven't chosen a topic.

(this may be fixed in the env endpoint PR?)

alc-producer-env-not-for-topic-wat.mov

4. It seems I can't subscribe anywhere as a consumer (logged in in team devrel) but it's not made clear. The envs are all disabled, but two of them with "unavailable for selected topic" even so there's no topic selected.

[programmiri]

Also, the screenreader support is still bad 😞

[mathieu-anderson]

@programmiri

When I want to subscribe as a producer, I get that information that I've to choose env etc. first. But when I want to subscribe as a consumer, I don't get that -> I think that should be consistent.

The reason why this is needed in Producer form and not in Consumer form is that we need to know if an environment is an Aiven cluster or not to know what to render for the pattern type and topic name fields:

• if isAivenCluster: pattern type is disabled (can only beLITERAL)
• is !isAivenCluster: pattern type is enabled, and user needs to choose either LITERAL or PREFIXED. which then renders:
  • if LITERAL: select component with topics in the environment as options
  • if PREFEIXED: text input component

All of this does not apply to the Consumer form, which can be simpler.

When I want to subscribe as producer and by mistake chose the wrong environment, I can't change that (I think I could if I have chosen a topic that belongs to other environments too, but then I would only be able to chose these envs and not all I can theoretically choose?). Maybe a we need a way to reset this required filters?

I think this is a UX choice. We can either have the current very strict state, or we can allow to switch env, and reset the topic name field if the topic does not exist in the new environment. Which can also conceivably be very confusing. Or a third option! Maybe fusing the environment and topic name fields, and using a ComplexNativeSelect or Combobox to render options like Topicname [DEV], Topicname [TST] ? ... that would need more UI research

Environment has no topics suddenly?

Facepalm.gif. That is 100% my mistake (the "placehodler" field was still registered with the form, and sending "Select environment and topic pattern type first" as value for topic name). Fix here: b7c7541

It seems I can't subscribe anywhere as a consumer (logged in in team devrel) but it's not made clear. The envs are all disabled, but two of them with "unavailable for selected topic" even so there's no topic selected.

That is the weirdest of them, I would like more info about it ^^

[programmiri]

I think this is a UX choice. We can either have the current very strict state, or we can allow to switch env, and reset the topic name field if the topic does not exist in the new environment. Which can also conceivably be very confusing. Or a third option! Maybe fusing the environment and topic name fields, and using a ComplexNativeSelect or Combobox to render options like Topicname [DEV], Topicname [TST] ? ... that would need more UI research

Hm that's tricky 🤔 being strict is good, but also gets me stuck as a user :D which I don't like (am a very impatient user). Probably best to sync with Mustafa on that and see how different scenarios are playing out vs. how they should work.

That is the weirdest of them, I would like more info about it ^^
I'll make a recording after the meetings! I thought I did, but it seems I forgot uploading it and (of course) already cleared my desktop 🙈

[mathieu-anderson]

being strict is good, but also gets me stuck as a user

I mean, as I imagine it, the flow would be not really a "stuck" flow. If you want to change env after picking a topic, and you see that there is only one env available, I imagine a user would:

• realize this topic only exist in this env and be like "ah well, guess I need to do it in this env / I need to promote the topic to a different env"
• realize they picked the wrong topic and pick the one that actually exists in the env they want to switch to

No?

[programmiri]

I mean, as I imagine it, the flow would be not really a "stuck" flow. If you want to change env after picking a topic, and you see that there is only one env available, I imagine a user would:

• realize this topic only exist in this env and be like "ah well, guess I need to do it in this env / I need to promote the topic to a different env"
• realize they picked the wrong topic and pick the one that actually exists in the env they want to switch to
  No?

I think I have to test this with the updated env endpoints, because for me at the moment I do get stuck, because after choosing a environment for DEV and getting a list of topics for DEV, the option TST in env get's disabled (bc the first topic is preselected in the list, which does not exist on TST). (this is the workflow for a user choosing the wrong env by mistake now :D)

Now I only can get TST enabled again if I find a topic that exists in TST, too 🤔

wrong-env.mov

[programmiri]

It seems I can't subscribe anywhere as a consumer (logged in in team devrel) but it's not made clear. The envs are all disabled, but two of them with "unavailable for selected topic" even so there's no topic selected.

That is the weirdest of them, I would like more info about it ^^

OK I got it. Tried it signed in for STAGINGTEAM

reproduced.mov

[mathieu-anderson]

(this is the workflow for a user choosing the wrong env by mistake now :D)

I would imagine that they know which Topic they want to create an ACL request for. Therefore, if they mistakenly choose DEV instead of TST (or any "higher level" env in the promotion system, which goes like DEV -> TST -> ACC -> PROD, or similar), the topic they want will still be available in the DEV environment. They can choose it, and then change it to TST.

Similarly, if they mistakenly choose a lower level env and want a higher, level, they can change the env because of this:

Now I only can get TST enabled again if I find a topic that exists in TST, too

Not being defensive, just explaining how this UI makes sense in my brain haha

[mathieu-anderson]

Ah yes! I saw this bug before and forgot to address it, thank you! I imagine in this instance the selectedTopic is undefined, which does not exist in any env haha

This is definitely an argument for showing the placeholder instead of the field until the env is selected, as you suggested. Sorry I didn't see it before, will implement it now.

[mathieu-anderson]

@programmiri Whew that was a rabbit hole. I implemented the more consistent UI with placeholder until env is chosen here: 4c24c9e

But more importantly, I replaced the behaviour of NativeSelect setting "" as the field value on blur by a trigger to validate: e9a51cf

• we do not set a empty value in the form, which was the root cause for the issue ("" makes no sense in most contexts for a required field):

237315277-906cb999-6a0f-42d1-9ba8-7f29f93a3f6b.mov

• we use errorMap instead of validating string length to still render an error when validating required NativeSelect

Seems like the issue is now fixed:

237314688-67f88027-878b-4583-bf8b-d858d5ffe09c.mov

But this illustrates how having env and topic name as separate fields might be a bad idea when:

• they so strongly depend on one another
• make no sense individually

Will create a "future improvement" issue to reflect on this.

[programmiri]

I left a few comments. Let's pack this behind a feature flag 🥷 and then we can merge it.

Though it has to be rebased.

[programmiri]

I think it could be a good idea to actually add the feature flag that we need to be active 🤔 Not because it's important for the test, but when we remove the flag, it will come up when searching for FEATURE_FLAG_TOPNAV_DROPDOWN and we'll know that we can safely remove the mock (or part of it, in case there are multipe flags mocked)

Not important for this PR now, but if you agree, I would later do a small follow up on the docs to describe it.

[mathieu-anderson]

Yes that makes sense :o