Skip to content

Commit

Permalink
9810/follow-up with fixes. (rancher#10638)
Browse files Browse the repository at this point in the history 
* fix: moves AddCustomDialog outside NameNsDescription
---------

Signed-off-by: scures <[email protected]>
  • Loading branch information
@scures
scures authored Mar 20, 2024
1 parent 9ef3397 commit 89fecf8
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 98 deletions.
127 changes: 127 additions & 0 deletions shell/components/form/ClusterAppearance.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@

<script>
import ClusterIconMenu from '@shell/components/ClusterIconMenu';
import { _CREATE, _VIEW } from '@shell/config/query-params';
import { CLUSTER_BADGE } from '@shell/config/labels-annotations';
export default {
title: 'ClusterAppearance',
components: { ClusterIconMenu },
props: {
name: { type: String, default: '' },
mode: { type: String, default: _CREATE },
currentCluster: { type: Object, default: null }
},
created() {
this.$store.dispatch('customisation/setDefaultPreviewCluster');
},
computed: {
disable() {
if (this.mode === _VIEW) {
return true;
}
return this.name.length <= 2;
},
clusterPreview() {
if (this.mode !== _CREATE) {
return {
badge: {
iconText: this.currentCluster.metadata.annotations[CLUSTER_BADGE.ICON_TEXT],
color: this.currentCluster.metadata.annotations[CLUSTER_BADGE.COLOR],
text: this.currentCluster.metadata.annotations[CLUSTER_BADGE.TEXT]
}
};
}
const obj = {
...this.$store.getters['customisation/getPreviewCluster'],
label: this.name
};
return obj || {
label: this.name,
badge: { iconText: null }
};
},
},
methods: {
customBadgeDialog() {
this.$store.dispatch('cluster/promptModal', {
component: 'AddCustomBadgeDialog',
componentProps: {
isCreate: this.mode === _CREATE,
mode: this.mode,
clusterName: this.name,
clusterPreview: this.clusterPreview
},
});
},
},
};
</script>

<template>
<div class="cluster-appearance">
<label for="name">Cluster ClusterAppearance</label>
<div class="cluster-appearance-preview">
<span>
<ClusterIconMenu :cluster="clusterPreview" />
</span>
<button
:disabled="disable"
@click="customBadgeDialog"
>
<i class="icon icon-brush-icon" />
<span>Customize</span>
</button>
</div>
</div>
</template>

<style lang="scss" scoped>
.cluster-appearance {
display: flex;
flex-direction: column;
margin: 0px 35px 0px 0px;
label {
margin: 6px 0 0;
}
&-preview {
display: flex;
justify-content: center;
align-self: start;
gap: 10px;
justify-content: space-between;
span {
display: flex;
align-self: center;
height: auto;
}
button {
display: flex;
align-self: center;
height: auto;
margin: 0;
padding: 0;
top: 0;
color: var(--link);
background: transparent;
i {
margin-right: 2px;
}
&:disabled {
color: var(--disabled-text);
cursor: not-allowed;
}
}
}
}
</style>
86 changes: 1 addition & 85 deletions shell/components/form/NameNsDescription.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,12 @@ import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
import { LabeledInput } from '@components/Form/LabeledInput';
import LabeledSelect from '@shell/components/form/LabeledSelect';
import { normalizeName } from '@shell/utils/kube';
import ClusterIconMenu from '@shell/components/ClusterIconMenu';
export default {
name: 'NameNsDescription',
components: {
LabeledInput,
LabeledSelect,
ClusterIconMenu
},
props: {
Expand Down Expand Up @@ -222,12 +220,6 @@ export default {
!!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
); // namespace is never editable
},
clusterPreview() {
return this.$store.getters['customisation/getPreviewCluster'] || {
label: this.name,
badge: { iconText: null }
};
},
nameReallyDisabled() {
return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
Expand Down Expand Up @@ -322,13 +314,6 @@ export default {
watch: {
name(val) {
// Reset the badge preview when the name changes
if (!this.clusterPreview) {
return;
}
this.$set(this.clusterPreview?.badge, 'iconText', null);
this.$set(this.clusterPreview, 'label', val);
if (this.normalizeName) {
val = normalizeName(val);
}
Expand Down Expand Up @@ -364,10 +349,6 @@ export default {
});
},
created() {
this.$store.dispatch('customisation/setDefaultPreviewCluster');
},
methods: {
updateNamespace(val) {
if (this.forceNamespace) {
Expand Down Expand Up @@ -409,17 +390,6 @@ export default {
this.$emit('isNamespaceNew', false);
}
},
customBadgeDialog() {
this.$store.dispatch('cluster/promptModal', {
component: 'AddCustomBadgeDialog',
componentProps: {
isCreate: true,
clusterName: this.name,
clusterPreview: this.clusterPreview
},
});
},
},
};
</script>
Expand Down Expand Up @@ -493,24 +463,8 @@ export default {
/>
</div>
<slot name="customize" />
<!-- // TODO: here goes the custom component -->
<div class="cluster-appearance">
<label for="name">Cluster Appearance</label>
<div class="cluster-appearance-preview">
<span>
<ClusterIconMenu :cluster="clusterPreview" />
</span>
<button
:disabled="!showCustomize"
@click="customBadgeDialog"
>
<i class="icon icon-brush-icon" />
<span>Customize</span>
</button>
</div>
</div>
<div
v-show="!descriptionHidden"
:data-testid="componentTestid + '-description'"
Expand Down Expand Up @@ -587,43 +541,5 @@ button {
}
}
.cluster-appearance {
display: flex;
flex-direction: column;
margin: 0px 35px 0px 0px;
&-preview {
display: flex;
justify-content: center;
align-self: start;
gap: 10px;
justify-content: space-between;
span {
display: flex;
align-self: center;
height: auto;
}
button {
display: flex;
align-self: center;
height: auto;
margin: 0;
padding: 0;
top: 0;
color: var(--link);
i {
margin-right: 2px;
}
&:disabled {
color: var(--disabled-text);
cursor: not-allowed;
}
}
}
}
}
</style>
28 changes: 20 additions & 8 deletions shell/dialog/AddCustomBadgeDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import ColorInput from '@shell/components/form/ColorInput';
import { parseColor, textColor } from '@shell/utils/color';
import { NORMAN } from '@shell/config/types';
import { abbreviateClusterName } from '@shell/utils/cluster';
import { _CREATE, _EDIT } from '@shell/config/query-params';
export default {
name: 'AddCustomBadgeDialog',
Expand All @@ -28,7 +29,8 @@ export default {
},
props: {
isCreate: { type: Boolean, default: false },
clusterName: { type: String, default: '' }
clusterName: { type: String, default: '' },
mode: { type: String, default: _CREATE },
},
data() {
return {
Expand All @@ -43,19 +45,18 @@ export default {
},
mounted() {
// Generates a fake cluster object for use with badge component on cluster provisioning.
if (this.isCreate) {
if (this.enableFields) {
this.cluster = this.getPreviewCluster;
this.badgeAsIcon = true;
this.letter = this.cluster?.badge?.iconText || abbreviateClusterName(this.clusterName);
this.useCustomComment = false;
this.useCustomComment = this.cluster?.badge?.text?.length > 0 || false;
this.badgeBgColor = this.cluster?.badge?.color || '#f1f1f1';
this.badgeComment = this.cluster?.badge?.text || null;
}
},
fetch() {
if (this.isCreate) {
if (this.enableFields ) {
return;
}
Expand All @@ -74,21 +75,28 @@ export default {
computed: {
...mapGetters(['currentCluster']),
...mapGetters('customisation', ['getPreviewCluster']),
enableFields() {
return this.isCreate || this.mode === _EDIT;
},
canSubmit() {
if (this.isCreate) {
if (this.mode === _CREATE) {
return true;
}
if (this.badgeAsIcon && this.useCustomComment) {
return true;
} else {
if (this.mode === _EDIT) {
return true;
}
return this.badgeAsIcon !== this.currentCluster.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || this.useCustomComment !== !!this.currentCluster.metadata?.annotations[CLUSTER_BADGE.TEXT];
}
},
// Fake cluster object for use with badge component
previewCluster() {
// Make cluster object that is enough for the badge component to work
return !this.isCreate ? {
return (!this.isCreate && this.currentCluster) ? {
isLocal: this.currentCluster.isLocal,
providerNavLogo: this.currentCluster.providerNavLogo,
badge: {
Expand All @@ -111,7 +119,11 @@ export default {
},
previewName() {
return this.isCreate ? this.clusterName : this.currentCluster.nameDisplay;
if (this.enableFields) {
return this.clusterName;
}
return this.currentCluster.nameDisplay;
},
},
Expand Down
6 changes: 3 additions & 3 deletions shell/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ describe('component: rke2', () => {
computed: defaultComputed,
mocks: {
...defaultMocks,
$store: { getters: defaultGetters },
$store: { dispatch: () => jest.fn(), getters: defaultGetters },
},
stubs: defaultStubs
});
Expand All @@ -157,7 +157,7 @@ describe('component: rke2', () => {
computed: defaultComputed,
mocks: {
...defaultMocks,
$store: { getters: defaultGetters },
$store: { dispatch: () => jest.fn(), getters: defaultGetters },
},
stubs: defaultStubs
});
Expand All @@ -183,7 +183,7 @@ describe('component: rke2', () => {
computed: defaultComputed,
mocks: {
...defaultMocks,
$store: { getters: defaultGetters },
$store: { dispatch: () => jest.fn(), getters: defaultGetters },
},
stubs: defaultStubs
});
Expand Down
Loading

0 comments on commit 89fecf8

Please sign in to comment.