windmill-components 1.309.7 → 1.352.0

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -92,6 +92,8 @@ async function removeAllInvitesFromDomain() {
     })));
 }
 let nbInviteDisplayed = 50;
+let showInvites = false;
+$: showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !autoAdd);
 </script>
 
 <SearchItems
@@ -101,18 +103,22 @@ let nbInviteDisplayed = 50;
 	f={(x) => x.email + ' ' + x.name + ' ' + x.company}
 />
 <div class="flex flex-col gap-4 my-8">
-<div class="flex flex-col gap-1">
-	<div class=" text-primary text-lg font-semibold"> Members & Invites </div>
-	<div class="text-tertiary text-xs">
-		Add members to your workspace and manage their roles. You can also invite or auto-invites users to join your workspace.
-		<a href="https://www.windmill.dev/docs/core_concepts/roles_and_permissions" target="_blank" class="text-blue-500">Learn more</a>.
+	<div class="flex flex-col gap-1">
+		<div class="text-tertiary text-xs">
+			Add members to your workspace and manage their roles. You can also auto-add users to join your
+			workspace.
+			<a
+				href="https://www.windmill.dev/docs/core_concepts/roles_and_permissions"
+				target="_blank"
+				class="text-blue-500">Learn more</a
+			>.
+		</div>
 	</div>
 </div>
-</div>
 <div class="flex flex-row justify-between items-center">
 	<PageHeader
 		title="Members ({filteredUsers?.length ?? users?.length ?? ''})"
-		primary={false}
+		primary={true}
 		tooltip="Manage users manually or enable SSO authentication."
 		documentationLink="https://www.windmill.dev/docs/core_concepts/authentification"
 	/>
@@ -121,7 +127,135 @@ let nbInviteDisplayed = 50;
 		<input placeholder="Filter members" bind:value={userFilter} class="input !pl-8" />
 		<Search class="absolute left-2" size={14} />
 
-		<AddUser on:new={listUsers} />
+		<Popup
+			floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+			containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+		>
+			<svelte:fragment slot="button">
+				<Button
+					color={auto_invite_domain != undefined ? 'green' : 'red'}
+					variant="border"
+					size="xs"
+					nonCaptureEvent={true}
+					startIcon={{ icon: Mails }}
+					>Auto-{showInvites && !autoAdd ? 'invite' : 'add'}: {auto_invite_domain != undefined
+						? 'ON'
+						: 'OFF'}
+				</Button>
+			</svelte:fragment>
+			<div class="flex flex-col items-start">
+				<span class="text-sm leading-6 font-semibold">
+					{isCloudHosted()
+						? `Auto-add anyone from ${
+								auto_invite_domain != undefined ? auto_invite_domain : domain
+						  }`
+						: `Auto-add anyone joining the instance`}
+				</span>
+
+				{#if showInvites}
+					<span class="text-xs mb-1 leading-6 pt-2"
+						>Mode <Tooltip>Whether to invite or add users directly to the workspace.</Tooltip>
+					</span>
+					<ToggleButtonGroup
+						selected={autoAdd ? 'add' : 'invite'}
+						on:selected={async (e) => {
+							if (auto_invite_domain != undefined) {
+								await removeAllInvitesFromDomain()
+								await WorkspaceService.editAutoInvite({
+									workspace: $workspaceStore ?? '',
+									requestBody: {
+										operator: operatorOnly ?? false,
+										invite_all: !isCloudHosted(),
+										auto_add: e.detail === 'add'
+									}
+								})
+								loadSettings()
+								listInvites()
+								listUsers()
+							} else {
+								autoAdd = e.detail === 'add'
+							}
+						}}
+					>
+						<ToggleButton value="invite" size="xs" label="Auto-invite" />
+						<ToggleButton value="add" size="xs" label="Auto-add" />
+					</ToggleButtonGroup>
+				{/if}
+
+				<span class="text-xs mb-1 leading-6 pt-2"
+					>Role <Tooltip>Role of the auto-added users</Tooltip></span
+				>
+				<ToggleButtonGroup
+					selected={operatorOnly ? 'operator' : 'developer'}
+					on:selected={async (e) => {
+						if (auto_invite_domain != undefined) {
+							await removeAllInvitesFromDomain()
+							await WorkspaceService.editAutoInvite({
+								workspace: $workspaceStore ?? '',
+								requestBody: {
+									operator: e.detail === 'operator',
+									invite_all: !isCloudHosted(),
+									auto_add: showInvites ? autoAdd ?? false : true
+								}
+							})
+							loadSettings()
+							listInvites()
+							listUsers()
+						} else {
+							operatorOnly = e.detail === 'operator'
+						}
+					}}
+				>
+					<ToggleButton
+						value="operator"
+						size="xs"
+						label="Operator"
+						tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+					/>
+					<ToggleButton
+						value="developer"
+						size="xs"
+						label="Developer"
+						tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+					/>
+				</ToggleButtonGroup>
+				<div class="pt-2">
+					<Toggle
+						size="xs"
+						checked={auto_invite_domain != undefined}
+						on:change={async (e) => {
+							await removeAllInvitesFromDomain()
+							await WorkspaceService.editAutoInvite({
+								workspace: $workspaceStore ?? '',
+								requestBody: e.detail
+									? {
+											operator: operatorOnly ?? false,
+											invite_all: !isCloudHosted(),
+											auto_add: showInvites ? autoAdd ?? false : true
+									  }
+									: { operator: undefined, auto_add: undefined }
+							})
+							loadSettings()
+							listInvites()
+							listUsers()
+						}}
+						disabled={isCloudHosted() && !allowedAutoDomain}
+						options={{
+							right: 'Enabled'
+						}}
+					/>
+				</div>
+				{#if isCloudHosted() && !allowedAutoDomain}
+					<div class="text-red-400 text-xs">{domain} domain not allowed for auto-add</div>
+				{/if}
+			</div>
+		</Popup>
+		<AddUser
+			on:new={() => {
+				listUsers()
+				listInvites()
+			}}
+		/>
 	</div>
 </div>
 
@@ -154,11 +288,16 @@ let nbInviteDisplayed = 50;
 		</Head>
 		<tbody class="divide-y bg-surface">
 			{#if filteredUsers}
-				{#each filteredUsers.slice(0, nbDisplayed) as { email, username, is_admin, operator,  disabled } (email)}
+				{#each filteredUsers.slice(0, nbDisplayed) as { email, username, is_admin, operator, disabled } (email)}
 					<tr class="!hover:bg-surface-hover">
 						<Cell first>{truncate(email, 20)}</Cell>
 						<Cell>{truncate(username, 30)}</Cell>
-						<Cell>{#if usage?.[email] != undefined}{usage?.[email]}{:else}<Loader2 size={14} class="animate-spin" />{/if}</Cell>
+						<Cell
+							>{#if usage?.[email] != undefined}{usage?.[email]}{:else}<Loader2
+									size={14}
+									class="animate-spin"
+								/>{/if}</Cell
+						>
 						<Cell>
 							<div class="flex gap-1">
 								{#if disabled}
@@ -276,232 +415,113 @@ let nbInviteDisplayed = 50;
 	</DataTable>
 </div>
 
-<PageHeader
-	title="Invites ({invites.length ?? ''})"
-	primary={false}
-	tooltip="Manage invites on your workspace."
-	documentationLink="https://www.windmill.dev/docs/core_concepts/authentification#adding-users-to-a-workspace"
->
-	<div class="flex gap-2 items-center">
-		<Popup
-			floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-			containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-		>
-			<svelte:fragment slot="button">
-				<Button
-					color={auto_invite_domain != undefined ? 'green' : 'red'}
-					variant="border"
-					size="xs"
-					nonCaptureEvent={true}
-					startIcon={{ icon: Mails }}
-					>Auto-invite: {auto_invite_domain != undefined ? 'ON' : 'OFF'}
-				</Button>
-			</svelte:fragment>
-			<div class="flex flex-col items-start">
-				<!-- <span class="text-xs mb-1 leading-6">Who </span>
-				<span class="text-sm" /> -->
+{#if showInvites}
+	<PageHeader
+		title="Invites ({invites.length ?? ''})"
+		primary={false}
+		tooltip="Manage invites on your workspace."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/authentification#adding-users-to-a-workspace"
+	>
+		<div class="flex gap-2 items-center">
+			<InviteUser on:new={listInvites} />
+		</div>
+	</PageHeader>
 
-				<span class="text-sm leading-6 font-semibold">
-					{isCloudHosted()
-						? `Auto-invite anyone from ${
-								auto_invite_domain != undefined ? auto_invite_domain : domain
-						  }`
-						: 'Auto-invite anyone joining the instance'}
-				</span>
-				<span class="text-xs mb-1 leading-6 pt-2"
-					>Mode <Tooltip>Whether to invite or add users directly to the workspace.</Tooltip>
-				</span>
-				<ToggleButtonGroup
-					selected={autoAdd ? 'add' : 'invite'}
-					on:selected={async (e) => {
-						if (auto_invite_domain != undefined) {
-							await removeAllInvitesFromDomain()
-							await WorkspaceService.editAutoInvite({
-								workspace: $workspaceStore ?? '',
-								requestBody: {
-									operator: operatorOnly ?? false,
-									invite_all: !isCloudHosted(),
-									auto_add: e.detail === 'add'
-								}
-							})
-							loadSettings()
-							listInvites()
-							listUsers()
-						} else {
-							autoAdd = e.detail === 'add'
-						}
-					}}
-				>
-					<ToggleButton value="invite" size="xs" label="Auto-invite" />
-					<ToggleButton value="add" size="xs" label="Auto-add" />
-				</ToggleButtonGroup>
+	<div>
+		<DataTable>
+			<Head>
+				<tr>
+					<Cell head first>Email</Cell>
+					<Cell head>Role</Cell>
+					<Cell head last><span class="sr-only">Actions</span></Cell>
+				</tr>
+			</Head>
+			<tbody class="divide-y bg-surface">
+				{#if invites?.length > 0}
+					{#each invites.slice(0, nbInviteDisplayed) as { email, is_admin, operator }}
+						<Row>
+							<Cell first>{email}</Cell>
+							<Cell>
+								<div>
+									<ToggleButtonGroup
+										selected={is_admin ? 'admin' : operator ? 'operator' : 'developer'}
+										on:selected={async (e) => {
+											const body =
+												e.detail == 'admin'
+													? { is_admin: true, operator: false }
+													: e.detail == 'operator'
+													? { is_admin: false, operator: true }
+													: { is_admin: false, operator: false }
+											await WorkspaceService.inviteUser({
+												workspace: $workspaceStore ?? '',
+												requestBody: {
+													email,
+													...body
+												}
+											})
+											listUsers()
+										}}
+									>
+										<ToggleButton
+											value="operator"
+											size="xs"
+											label="Operator"
+											tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+										/>
 
-				<span class="text-xs mb-1 leading-6 pt-2"
-					>Role <Tooltip>Role of the auto-invited users</Tooltip></span
-				>
-				<ToggleButtonGroup
-					selected={operatorOnly ? 'operator' : 'developer'}
-					on:selected={async (e) => {
-						if (auto_invite_domain != undefined) {
-							await removeAllInvitesFromDomain()
-							await WorkspaceService.editAutoInvite({
-								workspace: $workspaceStore ?? '',
-								requestBody: {
-									operator: e.detail === 'operator',
-									invite_all: !isCloudHosted(),
-									auto_add: autoAdd ?? false
-								}
-							})
-							loadSettings()
-							listInvites()
-							listUsers()
-						} else {
-							operatorOnly = e.detail === 'operator'
-						}
-					}}
-				>
-					<ToggleButton
-						value="operator"
-						size="xs"
-						label="Operator"
-						tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-					/>
-					<ToggleButton
-						value="developer"
-						size="xs"
-						label="Developer"
-						tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-					/>
-				</ToggleButtonGroup>
-				<div class="pt-2">
-					<Toggle
-						size="xs"
-						checked={auto_invite_domain != undefined}
-						on:change={async (e) => {
-							await removeAllInvitesFromDomain()
-							await WorkspaceService.editAutoInvite({
-								workspace: $workspaceStore ?? '',
-								requestBody: e.detail
-									? {
-											operator: operatorOnly ?? false,
-											invite_all: !isCloudHosted(),
-											auto_add: autoAdd ?? false
-									  }
-									: { operator: undefined, auto_add: undefined }
-							})
-							loadSettings()
-							listInvites()
-							listUsers()
-						}}
-						disabled={isCloudHosted() && !allowedAutoDomain}
-						options={{
-							right: 'Enabled'
-						}}
-					/>
-				</div>
-				{#if isCloudHosted() && !allowedAutoDomain}
-					<div class="text-red-400 text-xs">{domain} domain not allowed for auto-invite</div>
-				{/if}
-			</div>
-		</Popup>
-		<InviteUser on:new={listInvites} />
-	</div>
-</PageHeader>
+										<ToggleButton
+											value="developer"
+											size="xs"
+											label="Developer"
+											tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+										/>
 
-<div>
-	<DataTable>
-		<Head>
-			<tr>
-				<Cell head first>Email</Cell>
-				<Cell head>Role</Cell>
-				<Cell head last><span class="sr-only">Actions</span></Cell>
-			</tr>
-		</Head>
-		<tbody class="divide-y bg-surface">
-			{#if invites?.length > 0}
-				{#each invites.slice(0, nbInviteDisplayed) as { email, is_admin, operator }}
-					<Row>
-						<Cell first>{email}</Cell>
-						<Cell>
-							<div>
-								<ToggleButtonGroup
-									selected={is_admin ? 'admin' : operator ? 'operator' : 'developer'}
-									on:selected={async (e) => {
-										const body =
-											e.detail == 'admin'
-												? { is_admin: true, operator: false }
-												: e.detail == 'operator'
-												? { is_admin: false, operator: true }
-												: { is_admin: false, operator: false }
-										await WorkspaceService.inviteUser({
+										<ToggleButton
+											value="admin"
+											size="xs"
+											label="Admin"
+											tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+										/>
+									</ToggleButtonGroup>
+								</div>
+							</Cell>
+							<Cell last>
+								<button
+									class="ml-2 text-red-500"
+									on:click={async () => {
+										await WorkspaceService.deleteInvite({
 											workspace: $workspaceStore ?? '',
 											requestBody: {
 												email,
-												...body
+												is_admin,
+												operator
 											}
 										})
-										listUsers()
+										listInvites()
 									}}
 								>
-									<ToggleButton
-										value="operator"
-										size="xs"
-										label="Operator"
-										tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-									/>
-
-									<ToggleButton
-										value="developer"
-										size="xs"
-										label="Developer"
-										tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-									/>
-
-									<ToggleButton
-										value="admin"
-										size="xs"
-										label="Admin"
-										tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-									/>
-								</ToggleButtonGroup>
-							</div>
-						</Cell>
-						<Cell last>
-							<button
-								class="ml-2 text-red-500"
-								on:click={async () => {
-									await WorkspaceService.deleteInvite({
-										workspace: $workspaceStore ?? '',
-										requestBody: {
-											email,
-											is_admin,
-											operator
-										}
-									})
-									listInvites()
-								}}
-							>
-								Cancel
-							</button>
-						</Cell>
-					</Row>
-				{/each}
-			{:else}
-				<tr>
-					<td colspan="3" class="text-center py-8">
-						<div class="text-xs text-secondary"> No invites yet </div>
-					</td>
-				</tr>
-			{/if}
-		</tbody>
-	</DataTable>
-	{#if invites && invites?.length > 50 && nbInviteDisplayed < invites.length}
-		<span class="text-xs"
-			>{nbInviteDisplayed} invites out of {invites.length}
-			<button class="ml-4" on:click={() => (nbInviteDisplayed += 50)}>load 50 more</button></span
-		>
-	{/if}
-</div>
+									Cancel
+								</button>
+							</Cell>
+						</Row>
+					{/each}
+				{:else}
+					<tr>
+						<td colspan="3" class="text-center py-8">
+							<div class="text-xs text-secondary"> No invites yet </div>
+						</td>
+					</tr>
+				{/if}
+			</tbody>
+		</DataTable>
+		{#if invites && invites?.length > 50 && nbInviteDisplayed < invites.length}
+			<span class="text-xs"
+				>{nbInviteDisplayed} invites out of {invites.length}
+				<button class="ml-4" on:click={() => (nbInviteDisplayed += 50)}>load 50 more</button></span
+			>
+		{/if}
+	</div>
+{/if}
 
 <ConfirmationModal
 	open={Boolean(deleteConfirmedCallback)}

package/package/components/sidebar/MenuButton.svelte

@@ -14,7 +14,7 @@ export let lightMode = false;
 				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
 				lightMode
 					? 'text-primary hover:bg-surface-hover '
-					: '  hover:bg-[#34363c] text-primary-inverse dark:text-primary',
+					: '  hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
 				'transition-all',
 				$$props.class
 			)}

package/package/components/sidebar/MenuLink.svelte

@@ -30,7 +30,7 @@ navigating.subscribe(() => {
 						: 'bg-frost-700 hover:bg-[#30404e]'
 					: lightMode
 					? 'hover:bg-surface-hover rounded-none'
-					: 'hover:bg-[#34363c]',
+					: 'hover:bg-[#2A3648]',
 
 				'hover:transition-all',
 				$$props.class

package/package/components/sidebar/changelogs.js

@@ -1,4 +1,44 @@
 const changelogs = [
+    {
+        label: 'Concurrency Limit Observability',
+        href: 'https://www.windmill.dev/changelog/concurrency-limit-observability',
+        date: '2024-05-15'
+    },
+    {
+        label: 'PHP Support',
+        href: 'https://www.windmill.dev/changelog/php-support',
+        date: '2024-05-15'
+    },
+    {
+        label: 'nativets/REST supports the full wmill API',
+        href: 'https://www.windmill.dev/changelog/nativets-wmill-library',
+        date: '2024-05-13'
+    },
+    {
+        label: 'Workers Metrics',
+        href: 'https://www.windmill.dev/changelog/workers-metrics',
+        date: '2024-05-10'
+    },
+    {
+        label: 'CLI and Git Sync major improvements',
+        href: 'https://www.windmill.dev/changelog/cli-lockfiles',
+        date: '2024-04-28'
+    },
+    {
+        label: 'AgGrid Infinite Table',
+        href: 'https://www.windmill.dev/changelog/aggrid-infinite-table',
+        date: '2024-04-24'
+    },
+    {
+        label: 'Jobs Labels',
+        href: 'https://www.windmill.dev/changelog/jobs-labels',
+        date: '2024-04-24'
+    },
+    {
+        label: 'AgGrid Actions',
+        href: 'https://www.windmill.dev/changelog/aggrid-actions',
+        date: '2024-04-12'
+    },
     {
         label: 'Continue on error with error as step`s return',
         href: 'https://www.windmill.dev/changelog/continue-on-error',