-
Notifications
You must be signed in to change notification settings - Fork 323
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Dashboard directory interactivity (#6279)
* turn object into var * add todo * fix style * fixes * remove forgot password + reset password * remove signout * remove setusername * remove login * remove registration * fix comments * re-enable flag * rename div * add comment * fix lints * remove tailwind conf * Revert "remove registration" This reverts commit 02439c9. * Revert "remove login" This reverts commit 8e6f9c1. * Revert "remove setusername" This reverts commit 84721bc. * Revert "remove signout" This reverts commit 08a96d3. * Revert "remove forgot password + reset password" This reverts commit e52f51a. * remove opener * move opener * tmp * prettier * expand docs * tmp * replace react-scripts with craco * add tailwindcss * switch to brands * tmp * tmp * tmp * fixmes * fixmes * fixmes * fixmes * fixmes * fixes for e-hern's comments * use abortcontroller * add docs * fixes * revert craco, fix windows build * remove from gitignore * remove unnecessary check * tmp * augment window * tmptmp * split errors back up * tmp * tmp * prettier * fix * Fix lints * Prepare for addition for `as T` lint * Add lint for early returns * Address review issues * Fix lints * remove withrouter * fix file length * fixes * fixes * remove dashboard * fix * use switch * prettier * fixes * prettier * fixes * run prettier * run prettier * run prettier * fix main page url * allow node.js debugging * fix lints * change not equal * prettier * Remove references to withRouter; fix lints * Run prettier * Add cloud endpoints * Add JSON-RPC endpoints * Add dashboard skeleton * Add components and edit dashboard * Run prettier * (WIP) Add cloud endpoints * Add rpc endpoints * Address review issues * Formatting and minor fixes for `newtype.ts` * Address review issues * Rename `Brand` to `NewtypeVariant` * Rename `Brand` to `NewtypeVariant` * Fix formatting in `newtype.ts` * Switch dashboard to esbuild * Minor fixes; move Tailwind generation into esbuild-config * Fix watching `content/` and `client/` * Bump esbuild binary versions; minor dependency list fixes * Add dashboard skeleton * Run prettier * Fixes; rename "npm run dev" to "npm run watch-dashboard" * Avoid writing esbuild outputs to disk for `dashboard/` * Convert watch-dashboard to be fully in-memory; rebuild css files on change * Remove obsolete FIXME * Remove unused constants * Run prettier * add missing styles * Fixes * Fix the fixes * Run prettier * Fixes; use nesting plugin to wrap tailwind preflight * Remove testing flag from client/watch * Minor fixes * Run prettier * Export newtypes * Make css rebuild when tailwind config changes * Fix endpoints * Finish copying changes over * Remove duplicate type definitions * Fix bundling for dashboard * Fix dashboard/bundle.ts erroring when build directory does not exist * Move CSS to Tailwind config * Run prettier * Update endpoints * Fix esbuild binary package names * Remove redundant "npx" prefix from build scripts * Remove unused dependency * Begin adding interactivity * workaround for mac freeze * Fix modal bugs * Begin implementing forms, split forms and modals into new files * Get form UI working * add missing sections * Minor fixes, save current directory to localStorage * Fixes for drop-to-upload Note: currently it is opening in a new tab instead of actually uploading * Address review issue * Fix prettier config; run prettier * Fix live-reload of `npm run watch-dashboard` * (WIP) * Fix service worker for client-side routing * Add close button to asset creation forms; fix saving directory to localStorage * Remove workaround for backend bug when listing directories * Fix drop-to-upload * Fix sizing * Fix spacing, add fixed paths * WIP: fix toast notification styles, begin adding context menu * WIP: Add context menu, minor fixes * Fix authentication on desktop IDE * Allow unused locals and parameters in tsconfig.json * Run prettier * Fix TypeScript errors * Fix modals; minor refactor * Implement context menus for labels; fixes * Add modal provider and switch all modals to provider; fixes * Fix modals and user icon size * Fixes * Remove obsolete files from incorrect merge * Address review issues * Fix type error * Stop removing `#root` * Fixes for cloud * Implement search on frontend side * Fix race condition related to `directoryId` * Hide directories, files and secrets tables on desktop IDE * Fix lint errors * Properly update visible projects when a project is created * Pass directory id to create project * Hide column display switcher; remove placeholder column data --------- Co-authored-by: Nikita Pekin <nikita@frecency.com> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com> Co-authored-by: Paweł Buchowski <pawel.buchowski@enso.org>
- Loading branch information
Showing
32 changed files
with
1,637 additions
and
353 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
...-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| /** @file Modal for confirming delete of any type of asset. */ | ||
| import toast from 'react-hot-toast' | ||
|
|
||
| import * as modalProvider from '../../providers/modal' | ||
| import * as svg from '../../components/svg' | ||
|
|
||
| import Modal from './modal' | ||
|
|
||
| // ================= | ||
| // === Component === | ||
| // ================= | ||
|
|
||
| export interface ConfirmDeleteModalProps { | ||
| assetType: string | ||
| name: string | ||
| doDelete: () => Promise<void> | ||
| onSuccess: () => void | ||
| } | ||
|
|
||
| function ConfirmDeleteModal(props: ConfirmDeleteModalProps) { | ||
| const { assetType, name, doDelete, onSuccess } = props | ||
| const { unsetModal } = modalProvider.useSetModal() | ||
| return ( | ||
| <Modal className="bg-opacity-90"> | ||
| <form | ||
| className="relative bg-white shadow-soft rounded-lg w-96 p-2" | ||
| onClick={event => { | ||
| event.stopPropagation() | ||
| }} | ||
| > | ||
| <button type="button" className="absolute right-0 top-0 m-2" onClick={unsetModal}> | ||
| {svg.CLOSE_ICON} | ||
| </button> | ||
| Are you sure you want to delete the {assetType} '{name}'? | ||
| <div className="m-1"> | ||
| <div | ||
| className="hover:cursor-pointer inline-block text-white bg-red-500 rounded-full px-4 py-1 m-1" | ||
| onClick={async () => { | ||
| unsetModal() | ||
| await toast.promise(doDelete(), { | ||
| loading: `Deleting ${assetType}...`, | ||
| success: `Deleted ${assetType}.`, | ||
| error: `Could not delete ${assetType}.`, | ||
| }) | ||
| onSuccess() | ||
| }} | ||
| > | ||
| Delete | ||
| </div> | ||
| <div | ||
| className="hover:cursor-pointer inline-block bg-gray-200 rounded-full px-4 py-1 m-1" | ||
| onClick={unsetModal} | ||
| > | ||
| Cancel | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </Modal> | ||
| ) | ||
| } | ||
|
|
||
| export default ConfirmDeleteModal |
28 changes: 28 additions & 0 deletions
28
app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| /** @file A context menu. */ | ||
|
|
||
| import * as react from 'react' | ||
|
|
||
| // ================= | ||
| // === Component === | ||
| // ================= | ||
|
|
||
| export interface ContextMenuProps { | ||
| // `left: number` and `top: number` may be more correct, | ||
| // however passing an event eliminates the chance | ||
| // of passing the wrong coordinates from the event. | ||
| event: react.MouseEvent | ||
| } | ||
|
|
||
| function ContextMenu(props: react.PropsWithChildren<ContextMenuProps>) { | ||
| const { children, event } = props | ||
| return ( | ||
| <div | ||
| style={{ left: event.pageX, top: event.pageY }} | ||
| className="absolute bg-white rounded-lg shadow-soft flex flex-col flex-nowrap" | ||
| > | ||
| {children} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ContextMenu |
29 changes: 29 additions & 0 deletions
29
...de-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenuEntry.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| /** @file An entry in a context menu. */ | ||
|
|
||
| import * as react from 'react' | ||
|
|
||
| export interface ContextMenuEntryProps { | ||
| disabled?: boolean | ||
| onClick: (event: react.MouseEvent<HTMLButtonElement>) => void | ||
| } | ||
|
|
||
| // This component MUST NOT use `useState` because it is not rendered directly. | ||
| function ContextMenuEntry(props: react.PropsWithChildren<ContextMenuEntryProps>) { | ||
| const { children, disabled, onClick } = props | ||
| return ( | ||
| <button | ||
| disabled={disabled} | ||
| className={`${ | ||
| disabled ? 'opacity-50' : '' | ||
| } p-1 hover:bg-gray-200 first:rounded-t-lg last:rounded-b-lg text-left`} | ||
| onClick={event => { | ||
| event.stopPropagation() | ||
| onClick(event) | ||
| }} | ||
| > | ||
| {children} | ||
| </button> | ||
| ) | ||
| } | ||
|
|
||
| export default ContextMenuEntry |
58 changes: 58 additions & 0 deletions
58
app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /** @file Base form to create an asset. | ||
| * This should never be used directly, but instead should be wrapped in a component | ||
| * that creates a specific asset type. */ | ||
|
|
||
| import * as react from 'react' | ||
|
|
||
| import * as modalProvider from '../../providers/modal' | ||
| import * as svg from '../../components/svg' | ||
|
|
||
| import Modal from './modal' | ||
|
|
||
| /** The props that should also be in the wrapper component. */ | ||
| export interface CreateFormPassthroughProps { | ||
| left: number | ||
| top: number | ||
| } | ||
|
|
||
| /** `CreateFormPassthroughProps`, plus props that should be defined in the wrapper component. */ | ||
| export interface CreateFormProps extends CreateFormPassthroughProps, react.PropsWithChildren { | ||
| title: string | ||
| onSubmit: (event: react.FormEvent) => Promise<void> | ||
| } | ||
|
|
||
| function CreateForm(props: CreateFormProps) { | ||
| const { title, left, top, children, onSubmit: wrapperOnSubmit } = props | ||
| const { unsetModal } = modalProvider.useSetModal() | ||
|
|
||
| async function onSubmit(event: react.FormEvent) { | ||
| event.preventDefault() | ||
| await wrapperOnSubmit(event) | ||
| } | ||
|
|
||
| return ( | ||
| <Modal className="bg-opacity-25"> | ||
| <form | ||
| style={{ left, top }} | ||
| className="absolute bg-white shadow-soft rounded-lg w-60" | ||
| onSubmit={onSubmit} | ||
| onClick={event => { | ||
| event.stopPropagation() | ||
| }} | ||
| > | ||
| <button type="button" className="absolute right-0 m-2" onClick={unsetModal}> | ||
| {svg.CLOSE_ICON} | ||
| </button> | ||
| <h2 className="inline-block font-semibold m-2">{title}</h2> | ||
| {children} | ||
| <input | ||
| type="submit" | ||
| className="hover:cursor-pointer inline-block text-white bg-blue-600 rounded-full px-4 py-1 m-2" | ||
| value="Create" | ||
| /> | ||
| </form> | ||
| </Modal> | ||
| ) | ||
| } | ||
|
|
||
| export default CreateForm |
Oops, something went wrong.