DOC-783 Add hideClipboard functionality (#1355)

* chore : add hideClipboard functionality

* Optimised images with calibre/image-actions

* chore : fix ci/cd

* chore : remove unsued variables in test case

* chore:fix review comments

* Optimised images with calibre/image-actions

* chore: remove white space

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/pull_request.yaml

@@ -20,6 +20,26 @@ jobs:
     # Because this step is part of the critical path, omission of this step will result in remaining CI steps not gettinge executed.
     # As of 8/8/2022 there is now way to enforce this beahvior in GitHub Actions CI.
       - run: exit 0
+
+  run-test:
+    name: Test
+    needs: [run-ci]
+    runs-on: ubuntu-latest
+    if: ${{ !github.event.pull_request.draft }}
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - run: npm ci
+
+      - name: Test
+        run: npm run test
 
   vale:
     # Image Optimizer docs: https://github.com/calibreapp/image-actions
@@ -43,7 +63,7 @@ jobs:
 
   build:
     name: Build
-    needs: [run-ci]
+    needs: [run-ci, run-test]
     runs-on: ubuntu-latest
     if: ${{ !github.event.pull_request.draft }}
     steps:

README.md

@@ -354,6 +354,16 @@ Example
 ![Example usage of codeblocks with highlighting.](assets/docs/images/readme_codeblocks_example.png)
 
 
+#### Hide ClipBoard Button
+
+The copy button is shown by default in all code blocks. You can disable the copy button by passing in the parameter value `hideClipboard` in the markdown declaration of the code blocks. 
+
+Example 
+![Example](assets/docs/images/hide_copy_button_example.png)
+
+Result
+
+![Result](assets/docs/images/hide_copy_button.png)
 
 
 ### Using Warning Box compponent/Info Box component or any component that wraps content

__mocks__/__gatsby__.js

@@ -0,0 +1,32 @@
+const React = require("react");
+const gatsby = jest.requireActual("gatsby");
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      partiallyActive,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
+      React.createElement("a", {
+        ...rest,
+        href: to,
+      })
+  ),
+  Slice: jest.fn().mockImplementation(({ alias, ...rest }) =>
+    React.createElement("div", {
+      ...rest,
+      "data-test-slice-alias": alias,
+    })
+  ),
+  useStaticQuery: jest.fn(),
+};

__tests__/pre.test.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import Pre from "../src/shared/mdx/components/Pre";
+import Clipboard from "clipboard";
+
+jest.mock("clipboard");
+
+const TextComponent = (props) => {
+  return <div>{props.text}</div>;
+};
+
+describe("Displays the correct title", () => {
+  afterEach(() => {
+    Clipboard.mockRestore();
+  });
+
+  it("renders the component with default props", () => {
+    const { getByText, getByRole } = render(
+      <Pre>
+        <TextComponent text={"Testing code"}></TextComponent>
+      </Pre>
+    );
+
+    expect(getByText("Testing code")).toBeInTheDocument();
+
+    expect(getByRole("button", { name: /copy/i })).toBeInTheDocument();
+    expect(Clipboard).toBeCalled();
+  });
+
+  it("does not render the copy button when hideClipboard prop is true", () => {
+    const { queryByRole } = render(
+      <Pre>
+        <TextComponent text={"Sample code"} hideClipboard={true}></TextComponent>
+      </Pre>
+    );
+    expect(queryByRole("button", { name: /copy/i })).toBeNull();
+    expect(Clipboard).not.toHaveBeenCalled();
+  });
+});

content/docs/14-troubleshooting/04-cluster-deployment.md

@@ -23,7 +23,7 @@ An instance is launched and terminated every 30 minutes prior to completion of i
 
 <br />
 
-```bash
+```bash hideClipboard
 Failed to update kubeadmControlPlane Connection timeout connecting to Kubernetes Endpoint
 ```
 

jest-preprocess.js

@@ -0,0 +1,5 @@
+const babelOptions = {
+  presets: ["babel-preset-gatsby"],
+};
+
+module.exports = require("babel-jest").default.createTransformer(babelOptions);

jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  transform: {
+    "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
+  },
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby|gatsby-script|gatsby-link)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  testEnvironmentOptions: {
+    url: `http://localhost`,
+  },
+  setupFiles: [`<rootDir>/loadershim.js`],
+  testEnvironment: `jsdom`,
+  setupFilesAfterEnv: ["<rootDir>/setup-test-env.js"],
+};

loadershim.js

@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+};