Add buttons to interface drawer yaml tab

locales/en/plugin__nmstate-console-plugin.json

@@ -21,7 +21,9 @@
   "Chassis ID": "Chassis ID",
   "Click <1>Create NodeNetworkConfigurationPolicy</1> to create your first policy": "Click <1>Create NodeNetworkConfigurationPolicy</1> to create your first policy",
   "Confirm deletion by typing <1>{{name}}</1> below:": "Confirm deletion by typing <1>{{name}}</1> below:",
+  "Copy": "Copy",
   "Copy MAC address": "Copy MAC address",
+  "Copy YAML to clipboard": "Copy YAML to clipboard",
   "Create": "Create",
   "Create NodeNetworkConfigurationPolicy": "Create NodeNetworkConfigurationPolicy",
   "Create NodeNetworkConfigurationPolicy error": "Create NodeNetworkConfigurationPolicy error",
@@ -36,6 +38,7 @@
   "Disabled": "Disabled",
   "Display all {{status}} enactments": "Display all {{status}} enactments",
   "Down": "Down",
+  "Download YAML": "Download YAML",
   "DS": "DS",
   "Edit": "Edit",
   "Edit NodeNetworkConfigurationPolicy": "Edit NodeNetworkConfigurationPolicy",

src/views/states/list/components/InterfaceDrawer/InterfaceDrawer.tsx

@@ -5,7 +5,9 @@ import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 
 import { useDrawerContext } from '../../contexts/DrawerContext';
 
+import { InterfaceDrawerTabId, InterfaceDrawerTabProps } from './constants';
 import InterfaceDrawerDetailsTab from './InterfaceDrawerDetailsTab';
+import InterfaceDrawerYAMLFooter from './InterfaceDrawerFooter';
 import InterfaceDrawerYAMLTab from './InterfaceDrawerYAMLTab';
 
 const InterfaceDrawer: FC = () => {
@@ -16,7 +18,7 @@ const InterfaceDrawer: FC = () => {
     setSelectedInterface(null);
   }, []);
 
-  const Tabs = [
+  const Tabs: InterfaceDrawerTabProps[] = [
     {
       title: t('Details'),
       id: 'drawer-details',
@@ -29,7 +31,7 @@ const InterfaceDrawer: FC = () => {
     },
   ];
 
-  const selectedTab = location.hash.replace('#', '') || Tabs?.[0]?.id;
+  const selectedTab = (location.hash.replace('#', '') as InterfaceDrawerTabId) || Tabs?.[0]?.id;
 
   const SelectedTabComponent =
     Tabs.find((tab) => tab.id === selectedTab)?.component ?? Tabs?.[0]?.component;
@@ -43,6 +45,11 @@ const InterfaceDrawer: FC = () => {
       disableFocusTrap
       header={<Title headingLevel="h2">{selectedInterface?.name}</Title>}
       data-test="interface-drawer"
+      footer={
+        selectedTab === 'drawer-yaml' && (
+          <InterfaceDrawerYAMLFooter selectedInterface={selectedInterface} />
+        )
+      }
     >
       <div className="co-m-horizontal-nav pf-u-px-md">
         <ul className="co-m-horizontal-nav__menu">

src/views/states/list/components/InterfaceDrawer/InterfaceDrawerFooter.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useCallback, useState } from 'react';
+
+import { Button, ButtonVariant, debounce, Tooltip } from '@patternfly/react-core';
+import { NodeNetworkConfigurationInterface } from '@types';
+import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
+
+import { copyToClipboard, downloadYAML } from './utils';
+
+type InterfaceDrawerFooterProps = {
+  selectedInterface: NodeNetworkConfigurationInterface;
+};
+
+const InterfaceDrawerYAMLFooter: FC<InterfaceDrawerFooterProps> = ({ selectedInterface }) => {
+  const { t } = useNMStateTranslation();
+  const [copied, setCopied] = useState(false);
+
+  const resetCopied = useCallback(
+    debounce(() => {
+      setCopied(false);
+    }, 3000),
+    [],
+  );
+
+  const onCopy = useCallback(() => {
+    copyToClipboard(selectedInterface);
+    setCopied(true);
+
+    resetCopied();
+  }, []);
+
+  return (
+    <>
+      <Tooltip content={copied ? 'Copied' : t('Copy YAML to clipboard')}>
+        <Button variant={ButtonVariant.primary} onClick={onCopy}>
+          {t('Copy')}
+        </Button>
+      </Tooltip>
+      <Button
+        variant={ButtonVariant.secondary}
+        onClick={() => downloadYAML(selectedInterface)}
+        className="pf-u-ml-md"
+      >
+        {t('Download YAML')}
+      </Button>
+    </>
+  );
+};
+
+export default InterfaceDrawerYAMLFooter;

src/views/states/list/components/InterfaceDrawer/constants.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+import { NodeNetworkConfigurationInterface } from '@types';
+
+export type InterfaceDrawerTabId = 'drawer-details' | 'drawer-yaml';
+
+export type InterfaceDrawerTabProps = {
+  id: InterfaceDrawerTabId;
+  title: string;
+  component: FC<{ selectedInterface: NodeNetworkConfigurationInterface }>;
+};

src/views/states/list/components/InterfaceDrawer/utils.ts

@@ -0,0 +1,25 @@
+import { dump } from 'js-yaml';
+
+import { NodeNetworkConfigurationInterface } from '@types';
+
+export const copyToClipboard = (selectedInterface: NodeNetworkConfigurationInterface) => {
+  const el = document.createElement('textarea');
+  el.value = dump(selectedInterface);
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+};
+
+export const downloadYAML = (selectedInterface: NodeNetworkConfigurationInterface) => {
+  const el = document.createElement('a');
+  el.setAttribute(
+    'href',
+    `data:text/plain;charset=utf-8,${encodeURIComponent(dump(selectedInterface))}`,
+  );
+  el.setAttribute('download', 'interface.yaml');
+  el.style.display = 'none';
+  document.body.appendChild(el);
+  el.click();
+  document.body.removeChild(el);
+};

src/views/states/list/components/interfaces-popover-body.scss

@@ -1,6 +1,6 @@
 .interfaces-popover-body {
   max-height: 700px;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   &__list-item {
     & > div > div {