Skip to content

Commit

Permalink
merge: #2979
Browse files Browse the repository at this point in the history 
2979: feat(web) various small ui fixes from journey map r=theoephraim a=theoephraim



Co-authored-by: Theo Ephraim <[email protected]>
  • Loading branch information
@si-bors-ng
si-bors-ng[bot] and Theo Ephraim authored Nov 28, 2023
2 parents 3922adc + 1713e5b commit da0fd30
Show file tree
Hide file tree
Showing 14 changed files with 121 additions and 183 deletions.
14 changes: 3 additions & 11 deletions app/web/src/components/ActionWidget.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"
@click="clickHandler"
>
<Icon :name="iconName" />
<StatusIndicatorIcon type="action" :status="action?.name" tone="inherit" />
<Stack spacing="2xs">
<div>{{ action?.displayName }}</div>
<div class="text-xs text-neutral-300">{{ component?.displayName }}</div>
Expand All @@ -29,9 +29,10 @@
import * as _ from "lodash-es";
import clsx from "clsx";
import { PropType, computed } from "vue";
import { Icon, IconNames, Stack } from "@si/vue-lib/design-system";
import { Icon, Stack } from "@si/vue-lib/design-system";
import { ActionPrototypeId, useActionsStore } from "@/store/actions.store";
import { ComponentId, useComponentsStore } from "@/store/components.store";
import StatusIndicatorIcon from "./StatusIndicatorIcon.vue";
const props = defineProps({
componentId: { type: String as PropType<ComponentId>, required: true },
Expand All @@ -57,15 +58,6 @@ const action = computed(() => {
const isActive = computed(() => !!action.value?.actionInstanceId);
const iconName = computed<IconNames>(() => {
if (!action.value) return "help-circle";
if (action.value.name === "create") return "resource-create";
if (action.value.name === "delete") return "resource-delete";
if (action.value.name.trim() === "refresh") return "resource-refresh";
if (action.value.name === "other") return "resource-question";
return "help-circle";
});
function clickHandler() {
if (!action.value) return;
if (action.value.actionInstanceId) {
Expand Down
5 changes: 3 additions & 2 deletions app/web/src/components/AssetActionsDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@
</div>
<div v-else class="flex flex-col p-xs gap-xs">
<div class="text-sm text-neutral-300">
Actions will be enacted upon click of the
<b>APPLY CHANGES</b> button in the right rail.
Actions will be enacted after this change set has been applied. To
do so, deselect this component and click the "Apply Changes" button
in the top right.
</div>
<ActionWidget
v-for="action in actions"
Expand Down
57 changes: 23 additions & 34 deletions app/web/src/components/AssetPalette.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,23 @@
</div>
</template>
<template v-else-if="schemasReqStatus.isSuccess">
<ScrollArea class="">
<SiSearch
autoSearch
placeholder="search assets"
@search="onSearchUpdated"
/>
<ScrollArea>
<template #top>
<SidebarSubpanelTitle label="Assets" icon="component-plus" />

<div
ref="instructionsRef"
class="border-b-2 dark:border-neutral-600 text-sm leading-tight p-2.5 text-neutral-400 dark:text-neutral-300 flex flex-row items-center gap-2"
>
<!-- <a
href="#"
class="hover:text-neutral-600 dark:hover:text-neutral-400"
@click="hideInstructions"
>
<Icon name="x-circle" />
</a> -->
<div>
Drag the assets that you wish to include in your application into
the canvas to the right.
</div>
</div>
<SidebarSubpanelTitle label="Assets" icon="component-plus">
<Icon
v-tooltip="
'Drag the assets that you wish to include in your application into the canvas to the right.'
"
allowPointerEvents
name="question-circle"
/>
</SidebarSubpanelTitle>

<SiSearch
autoSearch
placeholder="search assets"
@search="onSearchUpdated"
/>
</template>

<ul class="overflow-y-auto">
Expand Down Expand Up @@ -98,14 +90,6 @@ import SiSearch from "@/components/SiSearch.vue";
defineProps<{ fixesAreRunning: boolean }>();
const instructionsRef = ref();
// const hideInstructions = () => {
// if (instructionsRef.value) {
// instructionsRef.value.classList.add("hidden");
// }
// };
const componentsStore = useComponentsStore();
// NOTE - component store is automatically fetching things we need when it is used
// otherwise we could trigger calls here
Expand Down Expand Up @@ -175,8 +159,13 @@ function onSelect(schemaId: string, fixesAreRunning: boolean) {
return;
}
componentsStore.selectedInsertSchemaId = schemaId;
selecting.value = true;
if (componentsStore.selectedInsertSchemaId === schemaId) {
componentsStore.selectedInsertSchemaId = null;
selecting.value = false;
} else {
componentsStore.selectedInsertSchemaId = schemaId;
selecting.value = true;
}
}
function onDeselect() {
Expand Down
87 changes: 9 additions & 78 deletions app/web/src/components/AttributesPanel/AttributesPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,6 @@
@blur="updateSiProp('name')"
@keyup.enter="updateSiProp('name')"
/>
<div class="attributes-panel__type-dropdown">
<select v-model="siValues.type" @change="updateSiProp('type')">
<option value="component">Component</option>
<option value="configurationFrame">Configuration Frame</option>
<option value="aggregationFrame">Aggregation Frame</option>
</select>
<Icon name="chevron--down" />
</div>
<Icon
:name="siValues.protected ? 'lock' : 'lock-open'"
class="attributes-panel__protected-switch"
allowPointerEvents
@click="toggleProtectedHandler"
/>
</div>

<LoadingMessage v-if="loadSchemaReqStatus.isPending && !domainTree">
Expand Down Expand Up @@ -108,7 +94,6 @@ import mitt, { Emitter } from "mitt";
import {
DropdownMenu,
DropdownMenuItem,
Icon,
JsonTreeExplorer,
LoadingMessage,
} from "@si/vue-lib/design-system";
Expand Down Expand Up @@ -150,10 +135,6 @@ const siProps = computed(() => attributesStore.siTreeByPropName);
const siValuesFromStore = computed(() => ({
name: (siProps.value?.name?.value?.value as string) || component.displayName,
color: (siProps.value?.color?.value?.value as string) || component.color,
protected: (siProps.value?.protected?.value?.value as boolean) || false,
type:
(siProps.value?.type?.value?.value as typeof component.nodeType) ||
component.nodeType,
}));
const siValues = reactive(siValuesFromStore.value);

Expand All @@ -177,28 +158,15 @@ function updateSiProp(key: keyof typeof siValues) {
const prop = siProps.value?.[key as string];
if (!prop) return;

if (key === "type") {
// TODO: not sure why only this one gets a special handler...?
attributesStore.SET_COMPONENT_TYPE({
value: newVal,
attributesStore.UPDATE_PROPERTY_VALUE({
update: {
attributeValueId: prop.valueId,
parentAttributeValueId: prop.parentValueId,
propId: prop.propId,
componentId: component.id,
});
} else {
attributesStore.UPDATE_PROPERTY_VALUE({
update: {
attributeValueId: prop.valueId,
parentAttributeValueId: prop.parentValueId,
propId: prop.propId,
componentId: component.id,
value: newVal,
},
});
}
}

function toggleProtectedHandler() {
siValues.protected = !siValues.protected;
updateSiProp("protected");
value: newVal,
},
});
}

// color picker
Expand Down Expand Up @@ -314,7 +282,7 @@ provide(AttributesPanelContextInjectionKey, {
height: 40px;
margin: @spacing-px[sm];
margin-left: @spacing-px[md];
margin-right: 2px;
margin-right: 8px;

input,
select {
Expand Down Expand Up @@ -343,41 +311,4 @@ provide(AttributesPanelContextInjectionKey, {
flex-shrink: 1;
min-width: 50px;
}

.attributes-panel__protected-switch {
width: 40px;
height: 40px;
padding: 8px;
height: inherit;
cursor: pointer;

body.light & {
color: @colors-neutral-700;
}

&:hover {
transform: scale(1.1);
}
}
.attributes-panel__type-dropdown {
position: relative;
height: inherit;
flex-grow: 1;
min-width: 120px;

select {
position: absolute;
width: 100%;
height: 100%;
padding-right: 30px;
text-overflow: ellipsis;
}
.icon {
position: absolute;
right: 4px;
top: 0;
height: inherit;
z-index: 3;
}
}
</style>
19 changes: 14 additions & 5 deletions app/web/src/components/AttributesPanel/AttributesPanelItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
<!-- <Icon
v-if="propName === 'region'"
v-tooltip="'Some help info'"
name="help-circle"
name="question-circle"
allowPointerEvents
class="attributes-panel-item__help-icon"
/> -->
Expand Down Expand Up @@ -437,7 +437,7 @@ const icon = computed((): IconNames => {
if (propKind.value === "array") return "brackets-square";
if (propKind.value === "map") return "brackets-curly";
if (propKind.value === "object") return "bullet-list";
return WIDGET_ICON_LOOKUP[widgetKind.value] || "help-circle";
return WIDGET_ICON_LOOKUP[widgetKind.value] || "question-circle";
});
const HEADER_HEIGHT = 24;
Expand Down Expand Up @@ -639,6 +639,7 @@ function secretSelectedHandler(newSecret: Secret) {
display: flex;
align-items: center;
border-bottom: 1px solid var(--panel-bg-color);
user-select: none;
}
.attributes-panel-item__section-header-child-count {
Expand All @@ -653,7 +654,7 @@ function secretSelectedHandler(newSecret: Secret) {
position: absolute;
width: @header-height;
height: @header-height;
opacity: 0;
opacity: 0.8;
transition: all 0.2s;
body.light & {
Expand Down Expand Up @@ -756,7 +757,7 @@ function secretSelectedHandler(newSecret: Secret) {
width: 45%;
flex-shrink: 0;
background: var(--input-bg-color);
margin-right: 4px;
margin-right: 8px;
font-family: monospace;
font-size: 13px;
line-height: 18px;
Expand All @@ -783,6 +784,14 @@ function secretSelectedHandler(newSecret: Secret) {
min-height: 80px;
margin: 0;
}
// chrome + linux showing white on white text - this might fix it?
select {
option {
background: white;
color: black;
}
}
}
.attributes-panel-item__input-value {
padding: 5px 8px;
Expand Down Expand Up @@ -880,7 +889,7 @@ function secretSelectedHandler(newSecret: Secret) {
justify-content: center;
cursor: pointer;
flex-shrink: 0;
margin-right: 4px;
margin-right: 8px;
// unset a few shared styles from the other buttons
width: unset;
Expand Down
35 changes: 26 additions & 9 deletions app/web/src/components/ComponentDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,6 @@
<ScrollArea v-if="selectedComponent">
<template #top>
<SidebarSubpanelTitle label="Asset Details" icon="component" />

<div v-if="DEV_MODE" class="px-xs pt-xs text-2xs italic opacity-30">
COMPONENT ID = {{ selectedComponent.id }}
<br />
NODE ID = {{ selectedComponent.nodeId }}
</div>
<ComponentCard :componentId="selectedComponent.id" class="m-xs" />

<div
Expand Down Expand Up @@ -108,13 +102,32 @@
</div>
</template>
</TabGroupItem>
<TabGroupItem label="Qualifications" slug="qualifications">
<TabGroupItem slug="qualifications">
<template #label>
<Inline noWrap alignY="center">
<span>Qualifications</span>
<PillCounter
:count="selectedComponentFailingQualificationsCount"
tone="destructive"
/>
</Inline>
</template>
<AssetQualificationsDetails
:componentId="selectedComponentId"
/>
</TabGroupItem>

<TabGroupItem label="Diff" slug="diff">
<template #label>
<Inline noWrap alignY="center">
<span>Diff</span>
<StatusIndicatorIcon
type="change"
:status="selectedComponent.changeStatus"
/>
</Inline>
</template>

<AssetDiffDetails :componentId="selectedComponentId" />
</TabGroupItem>
<TabGroupItem label="Debug" slug="debug">
Expand Down Expand Up @@ -183,8 +196,6 @@ import AttributesPanel from "./AttributesPanel/AttributesPanel.vue";
const emit = defineEmits(["delete", "restore"]);
const DEV_MODE = import.meta.env.DEV;
const componentsStore = useComponentsStore();
const qualificationsStore = useQualificationsStore();
const changeSetStore = useChangeSetsStore();
Expand All @@ -202,6 +213,12 @@ const selectedComponentQualificationStatus = computed(
selectedComponentId.value
],
);
const selectedComponentFailingQualificationsCount = computed(
() =>
qualificationsStore.qualificationStatsByComponentId[
selectedComponentId.value
]?.failed || 0,
);
const selectedComponentCode = computed(
() => componentsStore.selectedComponentCode,
Expand Down
Loading

0 comments on commit da0fd30

Please sign in to comment.