Commit Graph

16 Commits

Author SHA1 Message Date
ケイラ 8de3cd6400 chore: tweak biome config (#15864) 2024-12-17 12:49:34 -07:00
Jaayden Halko 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
Jaayden Halko 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
Kayla Washburn-Love 3d76e1b55c chore: clean up package.json and tsconfig (#11757) 2024-01-24 13:53:44 -07:00
Kayla Washburn 2b5428e95f refactor: start using emotion for styling (#9909) 2023-09-29 13:08:17 -06:00
Colin Adler 4b81cfaa0d chore: switch from yarn to pnpm (#8822) 2023-08-02 13:28:16 -05:00
Bruno Quaresma 189c562826 chore: Use Vite instead of Webpack for development (#4156) 2022-09-23 15:22:48 -03:00
Kira Pilot c0d19ebea2 chore: configure absolute paths with webpack (#3011)
* coonfigure absolute paths with webpack

resolves #1855

* fixed jest config
2022-07-18 10:43:11 -04:00
Oxylibrium 885e7fd03e chore: update tsconfig target to es2018 (#2616) 2022-06-23 15:52:42 -04:00
Kira Pilot dd55d4577d chore: remove react imports (#1867)
reolves #1856
2022-05-31 10:01:37 -04:00
G r e y 8fde3ed52f chore: improve eslint, sb, tsc configs (#483)
Summary:

This commit is a bit of a shotgun fix for various project settings.
Realistically, they could've been separate commits, but this is
convenience for just getting things into a green state to unblock
further work.

Details:

- Use our version of TS in vscode plugins
- organize vscode/settings.json
- fix tsconfig.test and tsconfig.prod (removes errors in test files)
- only use prod tsconfig in webpack
- point .eslintrc to both test and prod configs
- cleanup storybook
- running eslint in my workspace was OOMing. I configured
  maxWorkers like we had in v1 to fix this.
- remove .storybook from code coverage
- remove .js files from code coverage --> after moving away
  from Next.js, we don't allowJS in our tsconfig anymore. We only
  use JS for configurations, it's not allowed in src code!
2022-03-18 10:26:13 -04:00
G r e y 6c83907b1b refactor(site): match v1 tsconfig; simplify tsconfig.test.json (#426)
* refactor(site): match v1 tsconfig

Summary of changes:

* ordered configurations for ease of readability
* allowJs removed -> not needed after Next.js
* noImplicitAny removed -> this is set to true by strict
* strictNullChecks removed -> this is set to true by strict
* removed lingering next-env.d.ts in include

* refactor(site): simplify tsconfig.test.json

Because that the base tsconfig was simplified when changing from
Next.js, this one now duplicates most of it. I still believe having a
separate tsconfig is a good idea for the purposes of separating tests
from source code. It especially can make it easier for eslint and jest
performance.
2022-03-13 19:54:35 -04:00
Bryan ec077c6191 refactor: Migrate from Next.js to pure webpack config (#360)
Fix for #348 - migrate our NextJS project to a pure webpack project w/ a single bundle

- [x] Switch from `next/link` to `react-router-dom`'s link 

> This part was easy - just change the import to `import { Link } from "react-router-dom"` and `<Link href={...} />` to `<Link to={...} />`

- [x] Switch from `next/router` to `react-router-dom`'s paradigms (`useNavigation`, `useLocation`, and `useParams`)

> `router.push` can be converted to `navigate(...)` (provided by the `useNavigate` hook)
> `router.replace` can be converted `navigate(..., {replace: true})` 
>  Query parameters (`const { query } = useRouter`) can be converted to `const query = useParams()`)

- [x] Implement client-side routing with `react-router-dom`

> Parameterized routes in NextJS like `projects/[organization]/[project]` would look like:
> ```
>               <Route path="projects">
>                    <Route path=":organization/:project">
>                    <Route index element={<ProjectPage />} />
>                  </Route>
>               </Route>
> ```

I've hooked up a `build:analyze` command that spins up a server to show the bundle size:
<img width="1303" alt="image" src="https://user-images.githubusercontent.com/88213859/157496889-87c5fdcd-fad1-4f2e-b7b6-437aebf99641.png">

The bundle looks OK, but there are some opportunities for improvement - the heavy-weight dependencies, like React, ReactDOM, Material-UI, and lodash could be brought in via a CDN: https://stackoverflow.com/questions/50645796/how-to-import-reactjs-material-ui-using-a-cdn-through-webpacks-externals
2022-03-12 12:51:05 -08:00
Bryan 78e652a268 refactor: Move package.json and other front-end collateral into 'site' (#128)
This refactors the front-end collateral to all live within `site` - so no `package.json` at the root.

The reason we had this initially is that the jest test run and NextJS actually require having _two_ different `tsconfig`s - Next needs `jsx:"preserve"`, while jest needs `jsx:"react"` - we were using `tsconfig`s at different levels at the hierarchy to manage this.

I changed this behavior to still use two different `tsconfig.json`s, which is mandatory - but just side-by-side in `site`.

Once that's fixed, it was easy to move everything into `site`

Follow up from: https://github.com/coder/coder/pull/118#discussion_r796244577
2022-02-01 13:34:43 -08:00
Bryan 423611b001 chore: Add initial jest tests + code coverage (#13)
- Adds initial infra for running front-end tests (`jest`, `ts-jest`, `jest.config.js`, etc)
- Adds codecov integration front-end code
2022-01-13 18:48:23 -08:00
Bryan ace89161fb feat(cdr): Initial UI scaffolding
This is testing out [Approach 3](https://www.notion.so/coderhq/Workspaces-v2-Initial-UI-Scaffolding-3b07d2847eed48839a7e6f0f2bb9bf56#56256f25d2954897a8ee315f0820cedd) in the UI scaffolding RFC.

Fixes https://github.com/coder/coder/issues/11

The folder structure looks like:
- `site`
    - `components` (buttons, empty state, etc)
    - `pages` (large sections of UI -> composition of components)
    - `theme` (files defining our palette)

Several components were able to be brought in essentially unmodified:
- `SplitButton`
- `EmptyState`
- `Footer`
-  All the icons / logos
- Theming (removed several items that aren't necessary, yet, though)

Other components had more coupling, and need more refactoring:
- `NavBar`
- `Confetti`

Current State:

![2022-01-06 17 16 31](https://user-images.githubusercontent.com/88213859/148475521-96e080cc-1d33-4b8e-a434-29e388936e3f.gif)

For a full working app, there's potentially a lot more to bring in:
- User / Account Settings Stuff
- Users Page
- Organizations Page
(and all the supporting dependencies)
2022-01-12 14:25:12 -08:00