backstage

1
/*
2
 * Copyright 2021 The Backstage Authors
3
 *
4
 * Licensed under the Apache License, Version 2.0 (the "License");
5
 * you may not use this file except in compliance with the License.
6
 * You may obtain a copy of the License at
7
 *
8
 *     http://www.apache.org/licenses/LICENSE-2.0
9
 *
10
 * Unless required by applicable law or agreed to in writing, software
11
 * distributed under the License is distributed on an "AS IS" BASIS,
12
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
 * See the License for the specific language governing permissions and
14
 * limitations under the License.
15
 */
16

17
import {
18
  createApiFactory,
19
  createComponentExtension,
20
  createPlugin,
21
  createRoutableExtension,
22
  identityApiRef,
23
  storageApiRef,
24
} from '@backstage/core-plugin-api';
25
import { createCardExtension } from '@backstage/plugin-home-react';
26
import {
27
  ToolkitContentProps,
28
  VisitedByTypeProps,
29
  FeaturedDocsCardProps,
30
} from './homePageComponents';
31
import { rootRouteRef } from './routes';
32
import { VisitsStorageApi, visitsApiRef } from './api';
33
import { StarredEntitiesProps } from './homePageComponents/StarredEntities/Content';
34

35
/** @public */
36
export const homePlugin = createPlugin({
37
  id: 'home',
38
  apis: [
39
    createApiFactory({
40
      api: visitsApiRef,
41
      deps: {
42
        storageApi: storageApiRef,
43
        identityApi: identityApiRef,
44
      },
45
      factory: ({ storageApi, identityApi }) =>
46
        VisitsStorageApi.create({ storageApi, identityApi }),
47
    }),
48
  ],
49
  routes: {
50
    root: rootRouteRef,
51
  },
52
});
53

54
/** @public */
55
export const HomepageCompositionRoot = homePlugin.provide(
56
  createRoutableExtension({
57
    name: 'HomepageCompositionRoot',
58
    component: () =>
59
      import('./components').then(m => m.HomepageCompositionRoot),
60
    mountPoint: rootRouteRef,
61
  }),
62
);
63

64
/** @public */
65
export const ComponentAccordion = homePlugin.provide(
66
  createComponentExtension({
67
    name: 'ComponentAccordion',
68
    component: {
69
      lazy: () =>
70
        import('./componentRenderers').then(m => m.ComponentAccordion),
71
    },
72
  }),
73
);
74

75
/** @public */
76
export const ComponentTabs = homePlugin.provide(
77
  createComponentExtension({
78
    name: 'ComponentTabs',
79
    component: {
80
      lazy: () => import('./componentRenderers').then(m => m.ComponentTabs),
81
    },
82
  }),
83
);
84

85
/** @public */
86
export const ComponentTab = homePlugin.provide(
87
  createComponentExtension({
88
    name: 'ComponentTab',
89
    component: {
90
      lazy: () => import('./componentRenderers').then(m => m.ComponentTab),
91
    },
92
  }),
93
);
94

95
/**
96
 * A component to display a playful greeting for the user.
97
 *
98
 * @public
99
 */
100
export const WelcomeTitle = homePlugin.provide(
101
  createComponentExtension({
102
    name: 'WelcomeTitle',
103
    component: {
104
      lazy: () =>
105
        import('./homePageComponents/WelcomeTitle').then(m => m.WelcomeTitle),
106
    },
107
  }),
108
);
109

110
/**
111
 * A component to display a company logo for the user.
112
 *
113
 * @public
114
 */
115
export const HomePageCompanyLogo = homePlugin.provide(
116
  createComponentExtension({
117
    name: 'CompanyLogo',
118
    component: {
119
      lazy: () =>
120
        import('./homePageComponents/CompanyLogo').then(m => m.CompanyLogo),
121
    },
122
  }),
123
);
124

125
/** @public */
126
export const HomePageRandomJoke = homePlugin.provide(
127
  createCardExtension<{ defaultCategory?: 'any' | 'programming' }>({
128
    name: 'HomePageRandomJoke',
129
    title: 'Random Joke',
130
    components: () => import('./homePageComponents/RandomJoke'),
131
    description: 'Shows a random joke about optional category',
132
    layout: {
133
      height: { minRows: 4 },
134
      width: { minColumns: 3 },
135
    },
136
    settings: {
137
      schema: {
138
        title: 'Random Joke settings',
139
        type: 'object',
140
        properties: {
141
          defaultCategory: {
142
            title: 'Category',
143
            type: 'string',
144
            enum: ['any', 'programming', 'dad'],
145
            default: 'any',
146
          },
147
        },
148
      },
149
    },
150
  }),
151
);
152

153
/**
154
 * A component to display a list of tools for the user.
155
 *
156
 * @public
157
 */
158
export const HomePageToolkit = homePlugin.provide(
159
  createCardExtension<ToolkitContentProps>({
160
    name: 'HomePageToolkit',
161
    title: 'Toolkit',
162
    components: () => import('./homePageComponents/Toolkit'),
163
  }),
164
);
165

166
/**
167
 * A component to display a list of starred entities for the user.
168
 *
169
 * @public
170
 */
171
export const HomePageStarredEntities = homePlugin.provide(
172
  createCardExtension<Partial<StarredEntitiesProps>>({
173
    name: 'HomePageStarredEntities',
174
    title: 'Your Starred Entities',
175
    components: () => import('./homePageComponents/StarredEntities'),
176
  }),
177
);
178

179
/**
180
 * A component to display a configurable list of clocks for various time zones.
181
 *
182
 * @public
183
 */
184
export const HeaderWorldClock = homePlugin.provide(
185
  createComponentExtension({
186
    name: 'HeaderWorldClock',
187
    component: {
188
      lazy: () =>
189
        import('./homePageComponents/HeaderWorldClock').then(
190
          m => m.HeaderWorldClock,
191
        ),
192
    },
193
  }),
194
);
195

196
/**
197
 * Display top visited pages for the homepage
198
 * @public
199
 */
200
export const HomePageTopVisited = homePlugin.provide(
201
  createCardExtension<Partial<VisitedByTypeProps>>({
202
    name: 'HomePageTopVisited',
203
    components: () => import('./homePageComponents/VisitedByType/TopVisited'),
204
  }),
205
);
206

207
/**
208
 * Display recently visited pages for the homepage
209
 * @public
210
 */
211
export const HomePageRecentlyVisited = homePlugin.provide(
212
  createCardExtension<Partial<VisitedByTypeProps>>({
213
    name: 'HomePageRecentlyVisited',
214
    components: () =>
215
      import('./homePageComponents/VisitedByType/RecentlyVisited'),
216
  }),
217
);
218

219
/**
220
 * A component to display specific Featured Docs.
221
 *
222
 * @public
223
 */
224
export const FeaturedDocsCard = homePlugin.provide(
225
  createCardExtension<FeaturedDocsCardProps>({
226
    name: 'FeaturedDocsCard',
227
    title: 'Featured Docs',
228
    components: () => import('./homePageComponents/FeaturedDocsCard'),
229
  }),
230
);
231