@valiantys/atlassian-app-frontend 1.0.0

package/examples/hello-world/example-components/issue-types-example-backend.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { useBackendAdapter } from '@valiantys/atlassian-app-frontend';
+
+/**
+ * This component invokes a resolver function on the Forge backend, which then invokes a Jira API.
+ */
+export function IssueTypesExampleBackend() {
+  const [issueTypes, setIssueTypes] = useState<IssueTypeDetails[]>([]);
+  const { invoke } = useBackendAdapter();
+
+  useEffect(() => {
+    invoke<IssueTypeDetails[]>('getIssueTypes').then((types) =>
+      setIssueTypes(types)
+    );
+  }, [invoke]);
+
+  return (
+    <div>
+      {issueTypes.map((it) => (
+        <div key={it.id}>
+          {it.id}: {it.description}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface IssueTypeDetails {
+  avatarId: number;
+  description: string;
+  hierarchyLevel: number;
+  iconUrl: string;
+  id: string;
+  name: string;
+  self: string;
+  subtask: boolean;
+}

package/examples/hello-world/example-components/issue-types-example.d.ts

@@ -0,0 +1,4 @@
+/**
+ * This component call a Jira API directly from the client using requestJira.
+ */
+export declare function IssueTypesExample(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/issue-types-example.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { useRequestJira } from '@valiantys/atlassian-app-frontend';
+
+/**
+ * This component call a Jira API directly from the client using requestJira.
+ */
+export function IssueTypesExample() {
+  const [issueTypes, setIssueTypes] = useState<IssueTypeDetails[]>([]);
+  const requestJiraSvc = useRequestJira();
+
+  useEffect(() => {
+    requestJiraSvc
+      .fetch<IssueTypeDetails[]>({
+        url: requestJiraSvc.route`/rest/api/2/issuetype`,
+        method: 'GET',
+      })
+      .then((types) => setIssueTypes(types));
+  }, [requestJiraSvc]);
+
+  return (
+    <div>
+      {issueTypes.map((it) => (
+        <div key={it.id}>
+          {it.id}: {it.description}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface IssueTypeDetails {
+  avatarId: number;
+  description: string;
+  hierarchyLevel: number;
+  iconUrl: string;
+  id: string;
+  name: string;
+  self: string;
+  subtask: boolean;
+}

package/examples/hello-world/example-components/list-assets.d.ts

@@ -0,0 +1 @@
+export declare function ListAssets(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/list-assets.tsx

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import {
+  PageLoadingView,
+  useLoadDataEffect,
+  useRequestJira,
+  useWorkspaceId,
+} from '@valiantys/atlassian-app-frontend';
+
+interface AssetSchema {
+  name: string;
+  id: string;
+}
+
+export function ListAssets() {
+  const jiraFetchService = useRequestJira();
+  const workspaceId = useWorkspaceId();
+
+  const listAssetsSchemas = useCallback(async () => {
+    if (jiraFetchService && workspaceId) {
+      const paginatedResult = await jiraFetchService.fetch<{
+        values: AssetSchema[];
+      }>({
+        url: jiraFetchService.route`/jsm/assets/workspace/${workspaceId}/v1/objectschema/list`,
+        method: 'GET',
+      });
+      return paginatedResult.values;
+    }
+    return [];
+  }, [jiraFetchService, workspaceId]);
+
+  const { data, loading, error } =
+    useLoadDataEffect<AssetSchema[]>(listAssetsSchemas);
+  return loading || error ? (
+    <PageLoadingView label="" loadingError={error} />
+  ) : (
+    <div>{data?.map((schema) => <div key={schema.id}>{schema.name}</div>)}</div>
+  );
+}

package/examples/hello-world/example-components/open-modal-example.d.ts

@@ -0,0 +1 @@
+export declare function OpenModalExample(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/open-modal-example.tsx

@@ -0,0 +1,47 @@
+import Button from '@atlaskit/button/new';
+import Textfield from '@atlaskit/textfield';
+
+import { useModalService } from '@valiantys/atlassian-app-frontend';
+import { useCallback, useState } from 'react';
+
+export function OpenModalExample() {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [text, setText] = useState<string>('Hello');
+
+  const modalService = useModalService();
+
+  const openModal = useCallback(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+      void modalService.open({
+        resource: 'hello-world-modal', // must be the key of a resource defined in manifest.yml
+        onClose: () => {
+          setIsOpen(false);
+        },
+        /*
+          small - w: 400px h: 20vh minHeight: 320px
+          medium - w: 600px h: 40vh minHeight: 520px
+          large - w: 800px h: 70vh minHeight: 720px
+          xlarge - w: 968px h: 90vh
+          max - w: 100% h: 100%
+        */
+        size: 'large',
+        context: {
+          text,
+        },
+        closeOnEscape: true,
+        closeOnOverlayClick: true,
+      });
+    }
+  }, [modalService, isOpen, text]);
+
+  return (
+    <div>
+      <Textfield
+        value={text}
+        onChange={(e) => setText((e.target as HTMLInputElement).value)}
+      ></Textfield>
+      <Button onClick={openModal}>Open Modal</Button>
+    </div>
+  );
+}

package/examples/hello-world/example-components/view-context-example.d.ts

@@ -0,0 +1 @@
+export declare function ViewContextExample(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/view-context-example.tsx

@@ -0,0 +1,17 @@
+import { useViewContext } from '@valiantys/atlassian-app-frontend';
+import { useEffect, useState } from 'react';
+
+export function ViewContextExample() {
+  const viewContext = useViewContext();
+  const [contextData, setContextData] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (viewContext) {
+      viewContext
+        .getContext()
+        .then((fullContext) => setContextData(JSON.stringify(fullContext)));
+    }
+  }, [viewContext]);
+
+  return <div>{contextData}</div>;
+}

package/examples/hello-world/example-components/who-am-i.d.ts

@@ -0,0 +1 @@
+export declare function WhoAmI(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/who-am-i.tsx

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { useBackendAdapter } from '@valiantys/atlassian-app-frontend';
+
+export function WhoAmI() {
+  const [id, setId] = useState<string>('');
+  const { invoke } = useBackendAdapter();
+
+  useEffect(() => {
+    invoke<{ myId: string }>('whoAmI').then((response) => setId(response.myId));
+  }, [invoke]);
+
+  return <div>My Atlassian ID is {id}</div>;
+}

package/examples/hello-world/main.tsx

@@ -0,0 +1,11 @@
+import * as ReactDOM from 'react-dom/client';
+
+import App from './app';
+
+import '@atlaskit/css-reset';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(<App />);

package/examples/hello-world/styles.css

@@ -0,0 +1 @@
+@import '../node_modules/@valiantys/atlassian-app-frontend/style.css';

package/examples/hello-world-modal/app.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import('react/jsx-runtime').JSX.Element;
+export default App;

package/examples/hello-world-modal/app.tsx

@@ -0,0 +1,30 @@
+import { AtlassianApp, ModalContent } from '@valiantys/atlassian-app-frontend';
+import { Hello } from './hello';
+
+function App() {
+  return (
+    <AtlassianApp
+      appName="hello-modal"
+      standaloneConfig={{
+        modalContextConfig: { openerOrigin: 'http://localhost:4200' },
+        initialMockViewContext: {
+          extension: {
+            // This is a hard-coded version of the data that will be passed
+            // from the opening app when running in an Atlassian environment.
+            modal: {
+              text: 'Hello Bob',
+            },
+          },
+        },
+      }}
+      embeddedConfig={{}}
+    >
+      {/* ModalContent component provides modal-related services, see Hello component for example usage. */}
+      <ModalContent>
+        <Hello></Hello>
+      </ModalContent>
+    </AtlassianApp>
+  );
+}
+
+export default App;

package/examples/hello-world-modal/hello.d.ts

@@ -0,0 +1 @@
+export declare function Hello(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world-modal/hello.tsx

@@ -0,0 +1,15 @@
+import Button from '@atlaskit/button/new';
+import { useModalContentService } from '@valiantys/atlassian-app-frontend';
+
+export function Hello() {
+  const { modalContextData, close } = useModalContentService<{
+    text: string;
+  }>();
+
+  return (
+    <div>
+      <div>{modalContextData?.text}</div>
+      <Button onClick={close}>Close Modal</Button>
+    </div>
+  );
+}

package/examples/hello-world-modal/main.tsx

@@ -0,0 +1,11 @@
+import * as ReactDOM from 'react-dom/client';
+
+import App from './app';
+
+import '@atlaskit/css-reset';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(<App />);

package/examples/hello-world-modal/styles.css

@@ -0,0 +1 @@
+@import '../node_modules/@valiantys/atlassian-app-frontend/style.css';

package/examples/hello-world-remote/app.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import('react/jsx-runtime').JSX.Element;
+export default App;

package/examples/hello-world-remote/app.tsx

@@ -0,0 +1,23 @@
+import Heading from '@atlaskit/heading';
+import { Box } from '@atlaskit/primitives';
+import { AtlassianApp } from '@valiantys/atlassian-app-frontend';
+import { InvokeRemoteExample } from './invoke-remote-example';
+
+function App() {
+  return (
+    <AtlassianApp
+      appName="hello-remote"
+      standaloneConfig={{
+        remoteUrl: 'https://jsonplaceholder.typicode.com/', // For invokeRemote from client (useRemoteAdapter)
+      }}
+      embeddedConfig={{}}
+    >
+      <Box paddingBlockEnd="space.200">
+        <Heading size="small">useRemoteAdapter Example (invokeRemote)</Heading>
+        <InvokeRemoteExample></InvokeRemoteExample>
+      </Box>
+    </AtlassianApp>
+  );
+}
+
+export default App;

package/examples/hello-world-remote/invoke-remote-example.d.ts

@@ -0,0 +1,13 @@
+/**
+ * manifest.yml must contain this configuration to enable the remote invocation:
+ *
+ * remotes:
+ *   - key: example-remote
+ *     baseUrl: https://jsonplaceholder.typicode.com
+ * permissions:
+ *   external:
+ *     fetch:
+ *       client:
+ *         - remote: example-remote
+ */
+export declare function InvokeRemoteExample(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world-remote/invoke-remote-example.tsx

@@ -0,0 +1,40 @@
+/**
+ * manifest.yml must contain this configuration to enable the remote invocation:
+ *
+ * remotes:
+ *   - key: example-remote
+ *     baseUrl: https://jsonplaceholder.typicode.com
+ * permissions:
+ *   external:
+ *     fetch:
+ *       client:
+ *         - remote: example-remote
+ */
+
+import { useRemoteAdapter } from '@valiantys/atlassian-app-frontend';
+import { useEffect, useState } from 'react';
+
+interface Todo {
+  completed: boolean;
+  id: number;
+  title: string;
+  userId: number;
+}
+
+export function InvokeRemoteExample() {
+  const remoteSvc = useRemoteAdapter();
+  const [todo, setTodo] = useState<Todo | undefined>(undefined);
+
+  useEffect(() => {
+    remoteSvc
+      .invokeRemote<Todo, void>({
+        path: '/todos/1',
+        method: 'GET',
+        headers: { accept: 'application/json' },
+      })
+      .then((response) => setTodo(response.body))
+      .catch((error) => console.error('remote error', error));
+  }, [remoteSvc]);
+
+  return <div>Todo: {todo?.title}</div>;
+}

package/examples/hello-world-remote/main.tsx

@@ -0,0 +1,11 @@
+import * as ReactDOM from 'react-dom/client';
+
+import App from './app';
+
+import '@atlaskit/css-reset';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(<App />);

package/examples/hello-world-remote/styles.css

@@ -0,0 +1 @@
+@import '../node_modules/@valiantys/atlassian-app-frontend/style.css';

package/examples/manifest.yml.example

@@ -0,0 +1,49 @@
+modules:
+  jira:globalPage:
+    - key: hello-world-page
+      resource: hello-world-resource
+      resolver:
+        function: resolver
+      title: Hello world
+  jira:issuePanel:
+    - key: hello-world-remote-example
+      resource: hello-remote-resource
+      resolver:
+        endpoint: example-remote-endpoint
+      title: Hello world Remote
+      icon: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
+  function:
+    - key: resolver
+      handler: index.handler
+  endpoint:    # for using invokeRemote to access external API from client (must be internet accessible)
+    - key: example-remote-endpoint
+      remote: example-remote
+remotes:
+  - key: example-remote
+    baseUrl: https://jsonplaceholder.typicode.com
+
+resources:
+  - key: hello-world-resource
+    path: static/hello-world/dist
+  - key: hello-remote-resource
+    path: static/hello-world-remote/dist
+  - key: hello-world-modal
+    path: static/hello-world-modal/dist
+permissions:
+  external:
+    fetch:
+      client:
+        - remote: example-remote
+  content:
+    styles:
+      - 'unsafe-inline'
+  scopes:
+    - read:jira-user
+    - read:jira-work
+    - read:servicedesk-request
+    - read:cmdb-schema:jira
+    - storage:app
+app:
+  runtime:
+    name: nodejs20.x
+  id: ari:cloud:ecosystem::app/<app-id>

package/index-CBKhl1FP.mjs

@@ -0,0 +1,22 @@
+import { FeatureChosenResourceCheck as r } from "./index.mjs";
+import "react/jsx-runtime";
+import "@atlaskit/button";
+import "@atlaskit/button/new";
+import "@atlaskit/form";
+import "@atlaskit/primitives";
+import "@atlaskit/section-message";
+import "@atlaskit/select";
+import "react";
+import "@atlaskit/heading";
+import "@atlaskit/spinner";
+import "react-router-dom";
+import "@atlaskit/flag";
+import "@atlaskit/icon/glyph/check-circle";
+import "@atlaskit/icon/glyph/error";
+import "@atlaskit/icon/glyph/info";
+import "@atlaskit/icon/glyph/warning";
+import "@atlaskit/tokens";
+export {
+  r as FeatureChosenResourceCheck,
+  r as default
+};

package/index-CP8emE0q.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index.js");require("react/jsx-runtime");require("@atlaskit/button");require("@atlaskit/button/new");require("@atlaskit/form");require("@atlaskit/primitives");require("@atlaskit/section-message");require("@atlaskit/select");require("react");require("@atlaskit/heading");require("@atlaskit/spinner");require("react-router-dom");require("@atlaskit/flag");require("@atlaskit/icon/glyph/check-circle");require("@atlaskit/icon/glyph/error");require("@atlaskit/icon/glyph/info");require("@atlaskit/icon/glyph/warning");require("@atlaskit/tokens");exports.FeatureChosenResourceCheck=e.FeatureChosenResourceCheck;exports.default=e.FeatureChosenResourceCheck;