https://github.com/jetbrains/youtrack-activities-widget
YouTrack Dashboard widget that displays recent activities feed
https://github.com/jetbrains/youtrack-activities-widget
jetbrains-hub jetbrains-youtrack widget
Last synced: 5 months ago
JSON representation
YouTrack Dashboard widget that displays recent activities feed
- Host: GitHub
- URL: https://github.com/jetbrains/youtrack-activities-widget
- Owner: JetBrains
- License: apache-2.0
- Created: 2019-07-31T09:30:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-04T13:51:57.000Z (over 1 year ago)
- Last Synced: 2025-01-30T02:02:00.146Z (5 months ago)
- Topics: jetbrains-hub, jetbrains-youtrack, widget
- Language: JavaScript
- Homepage: https://plugins.jetbrains.com/plugin/13412-issue-activity-feed
- Size: 2.85 MB
- Stars: 6
- Watchers: 22
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Issue Activity Feed
[](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
[YouTrack](https://www.jetbrains.com/youtrack/) dashboard widget, which shows activities in selected categories for issues that match the specified search criteria.
Widget's [page](https://plugins.jetbrains.com/plugin/13412-issue-activity-feed) in JetBrains Marketplace
[Code of Conduct](https://github.com/JetBrains?#code-of-conduct)
## Developing a Hub widget
The following commands are available:
- `npm test` to launch karma tests
- `npm start` to run a local development server
- `npm run lint` to lint your code (JS and CSS)
- `npm run stylelint` to lint CSS only
- `npm run build` to generate a production bundle (will be available under `dist`)
- `npm run ci-test` to launch karma tests and report the results to TeamCity
To check your widget, go to the widget playground page located at `/dashboard/widgets-playground`.
You may encounter the following problem when using a local development server together with Hub running over HTTPS: all major browsers block insecure scripts.
In Chrome you can add a security exception: click the security notification in the address bar (the one saying "The page is trying to load scripts from unauthenticated sources") and
press the "Load unsafe scripts" button. Similar workarounds are available in other browsers as well.
## Introduction into widget development
The `app` folder contains a demo widget that shows a welcome message. Its configuration screen allows selecting the font color.
In this guide we'll show you how to add a new parameter to the configuration screen and use its value in the rendered widget.
Open the `app.js` file, all the changes will be made there.
First of all, import the `Input` component from Ring UI:
```
import Input from '@jetbrains/ring-ui/components/input/input';
```
Configuration screen is rendered by the `renderConfiguration` function. Let's put an input below the select:
```
```
To set input's placeholder use the `label` property.
If you haven't launched the dev server yet, run `yarn start`, open the widget playground (`/dashboard/widgets-playground`),
specify the URL of the dev server (e.g., `http://localhost:9010/`) and reload the widget by clicking the corresponding button.
An input we've just added should appear on the configuration screen of the widget.
To store the value of the input in the state of the widget, we add the `onChange` prop:
```
```
and implement the `changeName` handler:
```
changeName = e => this.setState({
username: e.target.value
});
```
To display the value we retrieve it from state in the very beginning of the `renderConfiguration` function together with `selectedColor`:
```
const {selectedColor, username} = this.state;
```
and pass the value into the `Input` as `value` prop:
```
value={username}
```
Our `Input` now looks like this:
```
```
Now, we need to persist the value. To do so, Dashboard API comes in handy:
```
const {selectedColor, username} = this.state;
await this.props.dashboardApi.storeConfig({selectedColor, username});
```
Finally, we use the stored value in the `render` method of our widget:
```
const {username, selectedColor, isConfiguring} = this.state;
...
{sayHello(username)}
```
Now we can hit "Reload widget" and see if everything works!
[1]: http://yeoman.io/