3be6487f02
feat: support GFM alerts in markdown ( #17662 )
...
Closes https://github.com/coder/coder/issues/17660
Add support to [GFM
Alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts ).
<img width="635" alt="Screenshot 2025-05-02 at 14 26 36"
src="https://github.com/user-attachments/assets/8b785e0f-87f4-4bbd-9107-67858ad5dece "
/>
PS: This was heavily copied from
https://github.com/coder/coder-registry/blob/dev/cmd/main/site/src/components/MarkdownView/MarkdownView.tsx
2025-05-02 14:44:01 -03:00
3ab3ef865c
feat: add link to provisioner jobs and daemons ( #17509 )
...
Close https://github.com/coder/coder/issues/17314
**Demo**
https://github.com/user-attachments/assets/db37aa67-4755-4b72-a54d-2c3f0c297b7d
**Changes**
- Added the `xs` button variant
- Display all the daemons - idle and offline - and set a size limit to
100 results (explanation in the demo)
- Filter daemons and jobs by ID
2025-04-28 11:38:32 -03:00
c8edadae10
refactor: redesign workspace status on workspaces table ( #17425 )
...
Closes https://github.com/coder/coder/issues/17310
**Before:**
<img width="1624" alt="Screenshot 2025-04-16 at 11 49 52"
src="https://github.com/user-attachments/assets/4fb6c8e5-329f-476f-99bb-192c0f9562a2 "
/>
**After:**
<img width="1624" alt="Screenshot 2025-04-16 at 11 49 19"
src="https://github.com/user-attachments/assets/c7025fee-fefd-4064-9101-d7a1b364dd80 "
/>
**Notice!**
- I've create a new size variation for the badge, `xs`. Since we reduced
the line-height for the `text-xs` to be 16px instead of 18px, having a
smaller badge, reducing the vertical size and horizontal paddings, just
worked better.
- I have to update Figma to reflect these changes. I tried, but I was
not able to get it working and updated correctly. I'm going to take a
pause during this week to learn that.
- Updated the destructive, and warning badges to use borders as defined
in the designs
[here](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=489-3472&t=gfnYeLOIFUqHx6qv-0 ).
2025-04-17 10:57:02 -03:00
a8c2586404
feat: implement UI for top level dynamic parameters diagnostics ( #17394 )
...
<img width="672" alt="Screenshot 2025-04-14 at 21 31 11"
src="https://github.com/user-attachments/assets/5ca25c9d-e82e-4d52-8c43-91e4dc31117d "
/>
2025-04-16 13:00:56 -04:00
8a24372e4d
feat: add shadcn checkbox component ( #17248 )
...
contributes to coder/preview#55
Add shadcn checkbox component matching Figma styles from Coder Kit:
https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=489-4187&t=Zx137ETWsQZtaCku-1
<img width="52" alt="Screenshot 2025-04-03 at 21 15 52"
src="https://github.com/user-attachments/assets/ff2de95c-cb12-46ed-af31-a6d230e52a31 "
/>
2025-04-04 10:05:21 -04:00
4604f191e9
refactor: increase workspace and template avatar size ( #17200 )
...
**Before**
<img width="1363" alt="Screenshot 2025-04-01 at 14 46 10"
src="https://github.com/user-attachments/assets/d3d76d70-df16-4b27-a138-e493e0bcac83 "
/>
<img width="1360" alt="Screenshot 2025-04-01 at 14 45 55"
src="https://github.com/user-attachments/assets/bbae38fe-6ed2-42fa-99b0-e24f6c8d382d "
/>
**After**
<img width="1359" alt="Screenshot 2025-04-01 at 14 46 18"
src="https://github.com/user-attachments/assets/230b606b-fd5f-4e42-9ca2-56ddb2e1f617 "
/>
<img width="1362" alt="Screenshot 2025-04-01 at 14 46 02"
src="https://github.com/user-attachments/assets/b22d4b59-4660-47dd-a362-e8d842dd2a82 "
/>
2025-04-01 21:29:36 -03:00
9668cba0e5
refactor: improve markdown rendering on notifications ( #17112 )
...
**Before:**
<img width="753" alt="Screenshot 2025-03-26 at 11 11 46"
src="https://github.com/user-attachments/assets/d4504de9-d007-43bf-9e0b-a8ff1b04da2c "
/>
**After:**
2025-03-26 11:24:54 -03:00
8a3a79f527
refactor: match StatusIndicator component with the new designs ( #16458 )
...
Reference:
https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=489-4278&m=dev
2025-02-07 15:11:56 -03:00
bcfeb726d6
feat: show warning on unrecognized idp org mapping claims ( #16478 )
2025-02-06 16:45:03 -07:00
42451aa615
chore: add overlay color for background behind dialogs ( #16442 )
...
Create tailwind color for the background overlay for dialogs
<img width="1153" alt="Screenshot 2025-02-05 at 12 26 16"
src="https://github.com/user-attachments/assets/46d16418-f594-4daa-9fa9-8ecc597e5c02 "
/>
2025-02-05 07:54:59 -05:00
947818f2d3
chore: add Table component ( #16410 )
...
Reference:
https://www.figma.com/design/JYW69pbgOMr21fCMiQsPXg/Provisioners?node-id=10-2056&m=dev
Unfortunately, it’s kinda hard to apply a border only around the table
body using CSS and make it rounded—at least I couldn’t figure out a sane
way to do that. We’d probably need to use a workaround, like not using
the native HTML table element, but that would add significant work. With
that in mind, I'm wrapping the entire table with a border.
<img width="688" alt="Screenshot 2025-02-03 at 14 37 12"
src="https://github.com/user-attachments/assets/55675df0-1aca-4353-b795-0e3cc2938812 "
/>
2025-02-03 20:24:47 -03:00
3217cb85f6
feat: improve usage visibility ( #16134 )
...
- Refactor the DAUs chart for clarity by improving the description and updating its title to better reflect the data.
- Add a license consumption chart to the licenses page.
2025-01-17 12:37:54 -03:00
cb6facb53a
refactor: use the new button component on forms and dialogs ( #16050 )
...
This is a significant PR that will impact many parts of the UI, so I’d
like to ask you, @jaaydenh, for a very thorough review of the Storybook
stories on Chromatic. I know it’s a bit of a hassle with around 180
stories affected, but it’s all for a good cause 💪
Main changes:
- Update the `Button` component to match the [new buttons
design](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756&p=f&m=dev ).
- Update forms and dialogs to use the new `Button` component.
Related to https://github.com/coder/coder/issues/14978
2025-01-07 14:28:58 -03:00
cee365670d
chore: add spinner component ( #16014 )
...
This component is necessary to move forward with the "[Define a global
button style](https://github.com/coder/coder/issues/14978 )" issue, as it
requires buttons to support loading states with spinners. The `Spinner`
component is heavily inspired by the [Radix UI Spinner
component](https://www.radix-ui.com/themes/docs/components/spinner ) and
was developed with the help of [v0](https://v0.dev/ ).
**Preview**
---------
Co-authored-by: Jaayden Halko <jaayden.halko@gmail.com >
2025-01-02 16:10:38 -03:00
49fadb801d
refactor: update the navbar to match the new designs ( #15964 )
...
Update the navbar to match the designs in [this Figma
file](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=4a6pX5tQU5Ti2Oyi-0 ).
Related to https://github.com/coder/coder/issues/15617 .
**Desktop preview:**
https://github.com/user-attachments/assets/01ce7cd2-baaa-49c4-9e9a-bf6e675151da
**Mobile preview:**
https://github.com/user-attachments/assets/155e2521-7293-4368-a5f5-425179d76326
For a closer look, you can check Chromatic snapshots or test the changes
locally.
**A few considerations:**
- I made some adjustments to improve the design, such as removing the
chevron from the profile menu and reducing the size of the chevrons in
the dropdowns. I’ve documented these changes in the [Figma
file](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=4a6pX5tQU5Ti2Oyi-0 )
so @chrifro can review them after returning from vacation.
- Some of the design questions involve how the proxy and account
dropdown menus should look on desktop and mobile. For desktop, I decided
to retain the current styles, and for mobile, I tried to infer how they
should look based on the existing design.
- There is some duplicated logic between the regular/desktop navbar
menus and the mobile menus, which could lead to inconsistencies and make
maintenance harder in the future. I plan to address this in a follow-up
PR to keep this review manageable.
- I’ve added tests to minimize inconsistencies and potential bugs while
working on this refactor.
2024-12-30 14:25:00 -03:00
6c9ccca687
feat: implement CRUD UI for IDP organization sync settings ( #15503 )
...
resolves coder/internal#205
The goal is to create a new page located in deployment settings to allow
users to create and update organization IDP sync settings.
- [x] Use shadcn button for export policy button
- [x] Disable save button if form is not dirty
- [x] Disable "Add IdP organization" button if idp org name or coder
orgs are empty
- [x] Add footnote label below organization sync field input
- [x] Add button to Delete rows in mapping table
- [x] Create Multi-select combox box component to select coder org to
map to idp org
- [x] Storybook tests
- [x] Tooltip for assign default org switch
- [x] Display success/error toast on form submission
<img width="1181" alt="Screenshot 2024-12-02 at 20 33 07"
src="https://github.com/user-attachments/assets/86877d3b-82ec-4ed2-b239-bf8497352a9e ">
2024-12-04 14:23:18 -05:00
308df177c9
chore: use hsl for tailwind and shadcn theming ( #15453 )
...
Co-authored-by: Jaayden Halko <jaayden.halko@gmail.com >
2024-11-08 14:33:50 -03:00
de2f42eedd
fix: enable Tailwind with storybook ( #15418 )
...
This adds index.css to the storybook preview file and references to
#storybook-root element in the tailwind config
---------
Co-authored-by: Spike Curtis <spike@coder.com >
Co-authored-by: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com >
2024-11-07 20:56:42 -05:00
d4131badb6
feat: implement Premium features page using shadcn/ui and Tailwind ( #15094 )
...
resolves coder/internal#176
This is a proof of concept to showcase the use of Tailwind + shadcn/ui.
The goal here was to implement a lower complexity page to reduce the
initial risk and highlight the specific global changes needed.
Changes:
- Create a separate version of Premium features content for Enterprise
and OSS users
- Use shadcn/ui button component and setup styling and variants to match
the buttons defined in the Coder Kit Figma.
https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756
- Setup theming using CSS variables and custom Tailwind colors by using
the dark class name on the root element.
- CSS variable design token naming and colors defined in Figma.
https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=1-2
<img width="1199" alt="Screenshot 2024-11-01 at 12 46 03 PM"
src="https://github.com/user-attachments/assets/a251450f-8447-405a-9cc4-9f6aad9cd19f ">
<img width="1197" alt="Screenshot 2024-11-01 at 12 45 36 PM"
src="https://github.com/user-attachments/assets/e78a5a40-cbdf-4d85-9ffe-873505800fcc ">
2024-11-06 12:53:00 -05:00
Bruno Quaresma