Skip to content

Commit

Permalink
refactor(ui): creating kube actions component (podman-desktop#10137)
Browse files Browse the repository at this point in the history
* refactor(ui): creating kube actions component

Signed-off-by: axel7083 <[email protected]>

* fix: apply code review comments

Signed-off-by: axel7083 <[email protected]>

---------

Signed-off-by: axel7083 <[email protected]>
  • Loading branch information
axel7083 authored Nov 27, 2024
1 parent 650a00c commit df73089
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import moment from 'moment';
import { onDestroy, onMount } from 'svelte';
import type { Unsubscriber } from 'svelte/store';
import KubeActions from '/@/lib/kube/KubeActions.svelte';
import KubernetesCurrentContextConnectionBadge from '/@/lib/ui/KubernetesCurrentContextConnectionBadge.svelte';
import {
configmapSearchPattern,
Expand All @@ -23,7 +24,6 @@ import {
} from '/@/stores/kubernetes-contexts-state';
import ConfigMapSecretIcon from '../images/ConfigMapSecretIcon.svelte';
import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
import { ConfigMapSecretUtils } from './configmap-secret-utils';
import ConfigMapSecretColumnActions from './ConfigMapSecretColumnActions.svelte';
import ConfigMapSecretColumnName from './ConfigMapSecretColumnName.svelte';
Expand Down Expand Up @@ -150,7 +150,7 @@ const row = new TableRow<ConfigMapSecretUI>({ selectable: _configmapSecret => tr

<NavPage bind:searchTerm={searchTerm} title="configmaps & secrets">
<svelte:fragment slot="additional-actions">
<KubeApplyYamlButton />
<KubeActions />
</svelte:fragment>

<svelte:fragment slot="bottom-additional-actions">
Expand Down
4 changes: 2 additions & 2 deletions packages/renderer/src/lib/deployments/DeploymentsList.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
import moment from 'moment';
import { onMount } from 'svelte';
import KubeActions from '/@/lib/kube/KubeActions.svelte';
import KubernetesCurrentContextConnectionBadge from '/@/lib/ui/KubernetesCurrentContextConnectionBadge.svelte';
import {
deploymentSearchPattern,
Expand All @@ -20,7 +21,6 @@ import {
import { withBulkConfirmation } from '../actions/BulkActions';
import DeploymentIcon from '../images/DeploymentIcon.svelte';
import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
import { DeploymentUtils } from './deployment-utils';
import DeploymentColumnActions from './DeploymentColumnActions.svelte';
import DeploymentColumnConditions from './DeploymentColumnConditions.svelte';
Expand Down Expand Up @@ -113,7 +113,7 @@ const row = new TableRow<DeploymentUI>({ selectable: _deployment => true });

<NavPage bind:searchTerm={searchTerm} title="deployments">
<svelte:fragment slot="additional-actions">
<KubeApplyYamlButton />
<KubeActions />
</svelte:fragment>

<svelte:fragment slot="bottom-additional-actions">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import moment from 'moment';
import { onDestroy, onMount } from 'svelte';
import type { Unsubscriber } from 'svelte/store';
import KubeActions from '/@/lib/kube/KubeActions.svelte';
import KubernetesCurrentContextConnectionBadge from '/@/lib/ui/KubernetesCurrentContextConnectionBadge.svelte';
import {
ingressSearchPattern,
Expand All @@ -24,7 +25,6 @@ import type { V1Route } from '/@api/openshift-types';
import { withBulkConfirmation } from '../actions/BulkActions';
import IngressRouteIcon from '../images/IngressRouteIcon.svelte';
import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
import { IngressRouteUtils } from './ingress-route-utils';
import IngressRouteColumnActions from './IngressRouteColumnActions.svelte';
import IngressRouteColumnBackend from './IngressRouteColumnBackend.svelte';
Expand Down Expand Up @@ -157,7 +157,7 @@ const row = new TableRow<IngressUI | RouteUI>({ selectable: _ingressRoute => tru

<NavPage bind:searchTerm={searchTerm} title="ingresses & routes">
<svelte:fragment slot="additional-actions">
<KubeApplyYamlButton />
<KubeActions />
</svelte:fragment>

<svelte:fragment slot="bottom-additional-actions">
Expand Down
74 changes: 74 additions & 0 deletions packages/renderer/src/lib/kube/KubeActions.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/**********************************************************************
* Copyright (C) 2024 Red Hat, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* SPDX-License-Identifier: Apache-2.0
***********************************************************************/

import '@testing-library/jest-dom/vitest';

import { render } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { beforeAll, beforeEach, expect, test, vi } from 'vitest';

import KubeActions from '/@/lib/kube/KubeActions.svelte';

// mock the router
vi.mock('tinro', () => {
return {
router: {
goto: vi.fn(),
},
};
});

beforeAll(() => {
Object.defineProperty(global, 'window', {
value: {
// global needed
navigator: {
clipboard: {
writeText: vi.fn(),
},
},
// needed for the test
kubernetesGetCurrentContextName: vi.fn(),
openDialog: vi.fn(),
},
writable: true,
});
});

beforeEach(() => {
vi.resetAllMocks();

vi.mocked(window.kubernetesGetCurrentContextName).mockResolvedValue('dummy-context');
});

test('KubeApplyYAMLButton should redirect to', async () => {
const { getByTitle } = render(KubeActions);

const applyYAMLBtn = getByTitle('Apply YAML');
expect(applyYAMLBtn).toBeInTheDocument();

await userEvent.click(applyYAMLBtn);

await vi.waitFor(() => {
expect(window.openDialog).toHaveBeenCalledWith(
expect.objectContaining({
title: 'Select a .yaml file to apply',
}),
);
});
});
5 changes: 5 additions & 0 deletions packages/renderer/src/lib/kube/KubeActions.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script lang="ts">
import KubeApplyYamlButton from '/@/lib/kube/KubeApplyYAMLButton.svelte';
</script>

<KubeApplyYamlButton />
4 changes: 2 additions & 2 deletions packages/renderer/src/lib/node/NodesList.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import {
import moment from 'moment';
import { onMount } from 'svelte';
import KubeActions from '/@/lib/kube/KubeActions.svelte';
import KubernetesCurrentContextConnectionBadge from '/@/lib/ui/KubernetesCurrentContextConnectionBadge.svelte';
import { kubernetesCurrentContextNodesFiltered, nodeSearchPattern } from '/@/stores/kubernetes-contexts-state';
import NodeIcon from '../images/NodeIcon.svelte';
import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
import { NodeUtils } from './node-utils';
import NodeColumnName from './NodeColumnName.svelte';
import NodeColumnRoles from './NodeColumnRoles.svelte';
Expand Down Expand Up @@ -88,7 +88,7 @@ const row = new TableRow<NodeUI>({});

<NavPage bind:searchTerm={searchTerm} title="nodes">
<svelte:fragment slot="additional-actions">
<KubeApplyYamlButton />
<KubeActions />
</svelte:fragment>

<svelte:fragment slot="bottom-additional-actions">
Expand Down
4 changes: 2 additions & 2 deletions packages/renderer/src/lib/pvc/PVCList.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import moment from 'moment';
import { onMount } from 'svelte';
import KubeActions from '/@/lib/kube/KubeActions.svelte';
import KubernetesCurrentContextConnectionBadge from '/@/lib/ui/KubernetesCurrentContextConnectionBadge.svelte';
import {
kubernetesCurrentContextPersistentVolumeClaimsFiltered,
Expand All @@ -21,7 +22,6 @@ import {
import { withBulkConfirmation } from '../actions/BulkActions';
import PVCIcon from '../images/PVCIcon.svelte';
import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
import { PVCUtils } from './pvc-utils';
import PVCColumnActions from './PVCColumnActions.svelte';
import PvcColumnMode from './PVCColumnMode.svelte';
Expand Down Expand Up @@ -122,7 +122,7 @@ const row = new TableRow<PVCUI>({ selectable: _pvc => true });

<NavPage bind:searchTerm={searchTerm} title="persistent volume claims">
<svelte:fragment slot="additional-actions">
<KubeApplyYamlButton />
<KubeActions />
</svelte:fragment>

<svelte:fragment slot="bottom-additional-actions">
Expand Down
4 changes: 2 additions & 2 deletions packages/renderer/src/lib/service/ServicesList.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ import {
import moment from 'moment';
import { onMount } from 'svelte';
import KubeActions from '/@/lib/kube/KubeActions.svelte';
import KubernetesCurrentContextConnectionBadge from '/@/lib/ui/KubernetesCurrentContextConnectionBadge.svelte';
import { kubernetesCurrentContextServicesFiltered, serviceSearchPattern } from '/@/stores/kubernetes-contexts-state';
import { withBulkConfirmation } from '../actions/BulkActions';
import ServiceIcon from '../images/ServiceIcon.svelte';
import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
import { ServiceUtils } from './service-utils';
import ServiceColumnActions from './ServiceColumnActions.svelte';
import ServiceColumnName from './ServiceColumnName.svelte';
Expand Down Expand Up @@ -121,7 +121,7 @@ const row = new TableRow<ServiceUI>({ selectable: _service => true });

<NavPage bind:searchTerm={searchTerm} title="services">
<svelte:fragment slot="additional-actions">
<KubeApplyYamlButton />
<KubeActions />
</svelte:fragment>

<svelte:fragment slot="bottom-additional-actions">
Expand Down

0 comments on commit df73089

Please sign in to comment.