nyaruka / temba-components Goto Github PK

View Code? Open in Web Editor NEW

4.0 7.0 6.0 57.1 MB

General web components for site building

License: Other

JavaScript 2.54% HTML 2.13% TypeScript 93.59% CSS 1.68% Dockerfile 0.05%

temba-components's Introduction

temba-components is a suite of ui widgets used by various RapidPro projects.

Some of the components:

<temba-select/> Advanced select widget with support for remote fetching and filtering. Also supports multi selection with the ability to enter expressions.
<temba-completion/> Completion widget for completing RP-style expressions
<temba-textinput/> - Standard text field with baked in support for date picking
<temba-charcount/> - SMS segment counter attachable to elements for monitoring
<temba-store/> - In page cache for RP core data types
<temba-options/> - Generic option list with configurable rendering, remote list paging, and keyboard support. Used by temba-select, temba-completion, and temba-list
<temba-list/> - Block rendered option list
<temba-dialog/> - Basic modal
<temba-modax/> - Fancier modal that fetches and submits html rendered forms and is triggered by a slot element
.. and many more

Install

We use yarn, so you'll want to install with that if you care about our lock file.

% yarn install

Demo

To view the interactive demo, use start.

% yarn start

Testing

All tests live under /test. When running tests, some tests capture screenshots for pixel comparision under /screenshots. Running tests requires that you have Chromium installed.

% yarn test

Usage

Simply include the built file as a module and you should be off to the races!

<html>
  <head>
    <script type="module">
      import '../out-tsc/temba-components.js';
    </script>
  </head>
  <body>
    <temba-select name="color">
      <temba-option name="Red" value="r"></temba-option>
      <temba-option name="Green" value="g"></temba-option>
      <temba-option name="Blue" value="b"></temba-option>
    </temba-select>
  </body>
</html>

To interactively work with components whilst embedded in another project, it can easily be done with a couple nginx rules.

  location ~ /out-tsc/(.*) {
      proxy_pass http://localhost:3010/out-tsc/$1;
  }

  location ~ /node_modules/(.*) {
      proxy_pass http://localhost:3010/node_modules/$1;
  }

temba-components's People

Contributors

Stargazers

Watchers

Forkers

communityconnectlabs susanm74 ilhasoft eliaskioni glific

temba-components's Issues

Modaxes shouldn't expect rendered view to be returned if being dismissed

There should be a way for the view to pass back a response that says "please close" without passing back a rendering of the form. Sometimes the rendered form ends up invalid and for split second before the modal disappears the user needs new validation errors.

Disabled select allows selecting value if value not set

Then once it has a value, you just can't change it, e.g. in this disabled select I can pick a value..

But now I can't change the value

Odd rendering of messages with attachments

I think better for the attachment to be inside the bubble like how WhatsApp renders it, then it's clear that it was a single message with text and an attachment.

Tagging shouldn't select first option

This effectively makes a non-placeholder text field with tagging to not be able to remove the last item.

Don't allow reopening a ticket if there's already an open ticket

Modals don't scale-in animate on Safari

This works in Chrome, but in Safari, instead of animating there is a brief pause (presumably the duration of the animation) with the mask shown and then the modal pops in instantly.

Removing item with backspace on multi select doesn't fire change event

Abstract attachments out of compose its own components

compose - set focus back on the chatbox - part deux

whenever clicking the bottom "row" area containing the paperclip, counter, and send button... set the focus back on the chatbox
immediately after selecting/uploading attachments...set the focus back on the chatbox

Modaxes shouldn't expect rendered view to be returned if being dismissed

Discussed in #241

^{Originally posted by rowanseymour June 16, 2021}
There should be a way for the view to pass back a response that says "please close" without passing back a rendering of the form. Sometimes the rendered form ends up invalid and for split second before the modal disappears the user needs new validation errors.

Alignment issue with searchable selects

Top is a searchable select, bottom is a select without search functionality. These should look the same when collapsed.

ContactSearchWidget doesn't render form errors

Modax should fail after 500

Currently the loading animation just shows forever. It should close and show a generic error.

Searchable select should allow query without options open

Enter on completion for non textarea input loses focus

Edit Contact Add user to a group does not allow filtering by typing

Previously when adding a contact to a group from the edit contact screen, you could start typing a group name and it would filter. Now you can only add a group by scrolling through the whole list.

Add multiple language localizations to compose component

compose component needs to support multi-language localization (aka translations cont'd)
add this as a searchable dropdown directly above the chatbox in the compose component that should allow the user to toggle back and forth between languages
translations dropdown should be hidden for usage such as the contact chat (when the user is sending a one-time text or attachments to a single recipient), and should be displayed for usage such as for broadcasts (when the user is sending text or attachments to multiple recipients, and needs to send the content in potentially multiple languages)
dropdown should display a list of languages filtered based on the org's languages
if the user has text and attachments for arabic, but then the org removes arabic from it's list of languages, don’t display the arabic translations in the component, and upon save, remove from the arabic translation from the translations
extra credit - show which languages content has been translated into vs. not translated via icons on the left side of the dropdown language option
todo - how to handle incomplete or partially localized attachments:
- when a user provides text and attachments in one language - all good
- when a user provides text and attachments in multiple languages - all good
- when a user provides text in multiple languages (ex. english and spanish) but only provides attachments in one language (ex. english), when we go to save/send the spanish broadcast, do we send:
  - no attachments?
  - the english ones?
  - disallow the user from saving without specifying "spanish" attachments?
  - allow the user to specify how to handle and whether to send the english ones vs none, for any/all other languages for which attachments have not been provided?

potentially relevant broadcast discussions:

Self-assigning a ticket should follow ticket

Datepicker in rare occasions doesn't init properly

One theory here is that the init is performed before the dependency is loaded. A soft refresh (or even a hard one) has fixed it. This has been reported a couple times by a couple different people. I believe each time was on staging verification, so the cache theory might have merit.

Add ContentMenu Component

Create a new component to render the in-page dropdown menus.

JSON endpoints already exist by sending the header Temba-Content-Menu: 1

See here:
https://github.com/nyaruka/rapidpro/blob/79671dec985e0a145d3771e32deaea02e0f850d5/temba/utils/views.py#L408

Problem with tickets opened on external ticketers

These will have events without a user - i.e. created_by is null, e.g. a mailgun ticket that was reopened by a new email coming in.

Omnibox field errors rendered twice

I see the error both as a div on the temba-field and again on the temba-select

broadcast crud interface - switch from text field to compose component

current "create" scheduled message interface modal contains an area with a chatbox and char counter
update that area to use the compose component containing chatbox, attachments, counter, no button
needs to be updated in both old and new ui (with slight priority for new ui)
don't worry about "send now" stuff yet
rename "scheduled message" to "broadcast"

potentially relevant broadcast discussions:

when postUrl returns a rejected promise, pass the whole response back instead of just 'Server failure'

would make it easier for processing errors stored in the response.xyz (ex. response.body, response.json, response.json.error, response.json.file, etc) when it's desired to know more (or display more to the user) than just 'Server failure'

an idea that springs from issue 4347 / PR #276, but making a separate issue for this as the change itself and the testing burden would be nontrivial:

postJSON and postFormData both make a call to postUrl
postUrl is used directly by a few helpers and components:
- contacts -> helpers -> closeTicket (although don't think this is actively used anywhere across TC, RP, FE repos)
- Store
- Modax
postJSON is used directly by:
- 8 components
postFormData is used directly by:
- 1 component

Alias editor should handle error responses from boundaries endpoint

{"status": "error", "description": "..."}

and/or not allow aliases longer than 128 chars

Can we add check for custom Elements definition

Hi Team, we are using these components in our application Glific and sometimes when we don't refresh the page and load the library once again after removing with react-router it shows this Error:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

This happens because the page is not refreshed and we call the library once again after removing and it tries to register the custom elements again.

temba-components/temba-modules.ts

Line 25 in 9d7e675

window.customElements.define('temba-alert', Alert);

Can we add a check for this in the code:

if (!window.customElements.get('temba-alert')) {
 window.customElements.define('temba-alert', Alert);  
 }

I know it won't affect anything in RapidPro since the page always gets refreshed on moving to a new flow that removes the custom Elements, but if you can add this check, that would be really helpful.

https://stackoverflow.com/a/58489650

Or If you guys have any other suggestions that would be super helpful.

create new compose component - form element with text, attachments, char counter, and send button

We'll want to add attachments to message broadcasts and contact chats. In order to do that, we need a self-contained component that lets you upload files and outputs a values list of urls.

It should:

Show upload progress
Show a list of previously uploaded files / types
Allow removal of previously uploaded files
Allow drag and drop on to a target to start an upload

Completion options should hide on blur

Opening select with empty options should show a message

Currently nothing happens and it leaves the user hanging with no feedback.

Round times of upcoming events to nearest second

Entering text on normal inputs advances cursor to end

Type some text
Place cursor in middle of text
Type additional text

Only the first letter is added at the insertion point and the cursor moves to the end of the text fort he rest.

Datepicker should have a better way to dismiss

Currently the only way to hide the picker, even after selections are made, is to change the focus.

Send ticket UUID with broadcast requests from chat component

I haven't yet added it to the docs but https://app.rapidpro.io/api/v2/broadcasts can take a ticket param which is the UUID of a ticket

Send ticket UUID with requests for contact history

?ticket=<ticket-uuid> so that we filter out events like notes for other tickets

Fetch contacts with expanded URNs from API endpoint

See nyaruka/rapidpro#4511

So then we can tell users if a contact is unsendable (no URN with a channel), likely unsendable (out of the messaging window on default channel) etc

Support HTML in field errors

Or at least just links so we can make something like this work..

Fix rendering optin request messages in ticket list

These don't have text or attachments so

temba-components/src/list/TicketList.ts

Line 69 in 920e5b0

: 'Unsupported Message'

renders them as "Unsupported Message"

Compose echos carriage return on Send

Repro:

Visit contact page
Type a message
Hit enter

Not that the caret echos a new line moments before the chat clears and is sent.

Use single editor.json resource for autocompletion list

Mailroom now shares /mr/docs/editor.json which looks like:

{
  "context": { ... what used to be in completion.json ..   }
  "functions": { ... what used to be in functions.json ..   }
}

compose - switch from array of content_type:url to array of uuid when sending broadcast

switch from sending an array of content_type:url's to sending an array of valid UUIDs (returned from successfully uploading the attachment to the server) when sending a broadcast

Update format for channel events in contact history

Old incoming call...

{
    "type": "channel_event",
    "created_on": "2023-09-28T12:30Z",
    "channel_event_type": "mo_call",
    "duration": 5,
}

New incoming call...

{
    "type": "channel_event",
    "created_on": "2023-09-28T12:30Z",
    "event": {
        "type": "mo_call",
        "channel": {"uuid": "d7c9b320-3e48-486d-a4a9-7ca367823dfa", "name": "Test Channel"},
        "duration": 5,
    }
}

Old optin...

{
    "type": "channel_event",
    "created_on": "2023-09-28T12:30Z",
    "channel_event_type": "optin",
    "duration": null
}

New optin...

{
    "type": "channel_event",
    "created_on": "2023-09-28T12:30Z",
    "event": {
        "type": "optin",
        "channel": {"uuid": "d7c9b320-3e48-486d-a4a9-7ca367823dfa", "name": "Test Channel"},
        "optin": {"uuid": "22546e04-1e97-436d-a114-947f2ed96c77", "name": "Polls"},
    }
}

Fire change event for checkbox changes

Select field does not truncate long words

Issue

GSM character replacement forces cursor to the end

Create a message in a textinput with an extended character ’
Move cursor to the middle of the text
Type

Moves cursor to the end of the text

Display topic ticket counts

These are added to the API endpoint in nyaruka/rapidpro#4512

Native datepicker time issue on Safari

The datepicker on Safari has doesn't allow specific date/time part selection on click/focus

Audio attachments not working in chat histories

Ticketing users have asked for this..

Select with completed expression has no options or instruction

Currently, the user is expected to hit enter to accept an expression option. It'd be nicer for them to see a message instructing them to do so.

Selecting completion option doesn't fire input/change event

compose - double focus on send button click

When acting on the send button directly, you can get a "double" focus appearance. Additionally, focus is not returned to the input. Ideally, in this case, the send button would lose focus immediately after the action is complete and the focus is returned to the input.